Po kliknięciu na przycisk "Kontakt" i "Logowanie" - oba pola tekstowe nakładają się na siebie [treść + kod HTML i CSS].

pytanie zadane 3 czerwca 2015 w HTML i CSS przez Krzysiek_34 Mądrala (6,130 p.)
przywrócone 4 czerwca 2015 przez Krzysiek_34

Gdy klikam na "Logowanie" to super, że wyskakuje pole tekstowe.

Ale gdy klikam następnie na "Kontakt", to super, że

wyskakuje pole tekstowe, ale w tej sytuacji te oba pola tekstowe

nakładają się na siebie.

Jak zrobić, aby np. najpierw po kliknięciu "Logowanie" i następnie na

"Kontakt", te oba pola tekstowe nie nakładały się na siebie?

Chodzi mi o blokadę, aby po kliknięciu np. na "Logowanie" z polem

tekstowym, nie było możliwości wyświetlić pola tekstowego z "Kontakt".

Jest przeznaczony do tego celu jakiś atrybut w HTML, CSS albo w jQuery?

Kod HTML:

<head>
	<meta charset="utf-8" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
		
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

	<script>
	$(document).ready(function(){
		$(".option_kontakt").click(function(){
			$('#pole_tekstowe_kontakt').toggle();
		});
	});
	
	$(document).ready(function(){
		$(".option_logowanie").click(function(){
			$('#pole_tekstowe_logowanie').toggle();
		});
	});
	</script>

</head>

<div id="menu">
	<div class="option_logowanie">Logowanie</div>
		<div id="pole_tekstowe_logowanie">
			<form>
				<label for="username">Nazwa użytkownika:</label>
				<input type="text" id="username" name="username">
				<label for="password">Hasło:</label>
				<input type="password" id="password" name="password">
			</form>
		</div>
				
	<div class="option_kontakt">Kontakt</div>
		<div id="pole_tekstowe_kontakt">
			<form>
				<p>Mój e-mail:</p>
				<p>Moje gg:</p>
			</form>
		</div>
				
	<div style="clear:both;"></div>
</div>

Kod CSS:

.option_kontakt
{
    float: right;
    min-width: 50px;
    height: 20px;
    color: white;
    font-size: 15px;
    padding: 10px;
    border: 2px solid #FF0000;
    margin-left: 15px;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    opacity: 0.8;
}

.option_kontakt:hover
{
    background-color: #0000FF;
    cursor: pointer;
}

.option_logowanie
{
    float: right;
    min-width: 50px;
    height: 20px;
    color: white;
    font-size: 15px;
    padding: 10px;
    border: 2px solid #FF0000;
    margin-left: 15px;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    opacity: 0.8;
}

.option_logowanie:hover
{
    background-color: #0000FF;
    cursor: pointer;
}

#pole_tekstowe_kontakt
{
    display: none;
    width: 200px;
    height: 100px;
    background: #008000;
    font-size: 11px;
    position: absolute;
    z-index: 9999;
    top: 70px;
    right: 500px;
}

#pole_tekstowe_logowanie
{
    display: none;
    width: 300px;
    height: 200px;
    background: #008000;
    font-size: 11px;
    position: absolute;
    z-index: 9999;
    top: 70px;
    right: 180px;
}

Od redaktora: Proszę nie umieszczać opisu problemu w bloku code, gdyż jak sama nazwa wskazuje służy on do umieszczania kodu ;)

1 odpowiedź

odpowiedź 3 czerwca 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

Ehh chyba zaraz moja cierpliwość się skończy... Przecież do tamtego pytania wkleiłem Ci kod i nie było sensu zakładać kolejngo a tamtego ukrywać. A po drugie znów robisz to samo o czym Ci też już mówiłem - w blok przeznaczony na kod wklejasz treść pytania, a później dziwisz się że ktoś zwraca Ci na to uwagę. Najpierw ma być treść wpisana normalnie, a w znacznik CODE wstawiamy tylko sam kod, a nie treść problemu.

Pokaż 37 poprzednich komentarzy

komentarz 6 czerwca 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

No niby tutaj wszystko jest okej. A pokaż jeszcze tego HTMLa gdzie są divy. Chcę tylko zerknąć czy każdy ma przypisane dobre id zgodnie z tym co tutaj jest.

A i nie powiedziałeś mi co dokładnie się dzieje, dlaczego jest źle?

Nie, hovery na pewno w niczym nie przeszkadzają.

komentarz 6 czerwca 2015 przez Krzysiek_34 Mądrala (6,130 p.)

Po kliknięciu, np. na "Logowanie" i zaraz na "Kontakt", oba pola tekstowe nakładają się na siebie. Oprócz tego po kliknięciu na obojętnie jaki przycisk, dalej jest to samo co było wcześniej, czyli nie zmienia się kolor tła żadnego przycisku. Nie pokazuje na przycisku zielonego koloru tła. Działa tylko hover.

<div class="optionTR_logowanie" onclick="pokazdiva(1)">Logowanie</div>
	<div id="pole_tekstowe_logowanie" style="display: none;">
		<form>
		.....
		</form>
	</div>
				
<div class="optionTR_kontakt" onclick="pokazdiva(2)">Kontakt</div>
	<div id="pole_tekstowe_kontakt" style="display: none;">
		<form>
		.....
		</form>
	</div>
<div style="clear:both;"></div>

komentarz 6 czerwca 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

Dlaczego pola się nakładają to nie wiem, ale wiem już dlaczego nie zmienia się tło przycisku. Nie masz przypisanych id do przycisków. Spójrz na mój kod:

<div id="przycisk_logowanie" class="optionTR_logowanie" onclick="pokazdiva(1)">Logowanie</div>
			<div id="pole_tekstowe_logowanie">
				<form>
					<label for="username">Nazwa użytkownika:</label>
					<input type="text" id="username" name="username">
					<label for="password">Hasło:</label>
					<input type="password" id="password" name="password">
				</form>
			</div>
						 
		<div id="przycisk_kontakt" class="optionTR_kontakt" onclick="pokazdiva(2)">Kontakt</div>
			<div id="pole_tekstowe_kontakt">
				<form>
					<p>Mój e-mail:</p>
					<p>Moje gg:</p>
				</form>
			</div>
		<div style="clear:both;"></div>

Obydwa przyciski oprócz klasy mają jeszcze przypisane id: przycisk_logowanie i przycisk_kontakt. Bez tego na pewno nie podziała, bo przeglądarka chce zmieniać kolor tła divowi który nie istnieje no więc wiadomo, że kończy się to błędem...

Popraw to i zobacz czy inne błędy nie znikną bo może być tak, że jeden błąd rozsypuje stronę i powoduje kolejne ;)