Miért nem jelenik meg a div amikor a checkbox aktív? Kód lent
<!DOCTYPE html>
<html>
<head>
<title>Általános Iskola</title>
<meta charset="utf-8" />
<style>
* {
margin:0px;
padding:0px;
font-family:"Arial";
}
body {
background:rgb(230,230,230);
}
div#header {
}
div#header div#menu_div {
width:100%;
height:75px;
background:white;
position:absolute;
top:0px;
left:0px;
}
div#header div#menu_div ul {
list-style:none;
position:absolute;
top:25px;
left:15px;
}
div#header div#menu_div ul li {
float:right;
margin-right:7px;
margin-top:5px;
}
div#header div#menu_div ul li a{
color:black;
transition:0.3s;
font-size:15px;
padding:5px;
font-weight:bold;
text-decoration:none;
}
div#header div#menu_div ul li a:hover{
color:orange;
}
div#header div#menu_div input[type=text]{
padding:5px 15px 5px 15px;
margin:0px;
border-radius:20px;
position:absolute;
top:25px;
right:95px;
font-size:13px;
border:2px solid black;
width:100px;
transition:border-color 0.3s;
}
div#header div#menu_div input[type=text]:focus{
outline:none;
border-color:orange;
}
div#header div#menu_div input[type=submit]{
width:28px;
height:28px;
margin:0px;
border:none;
background-image: url(images/keres.png);
font-size:13px;
position:absolute;
top:25px;
right:60px;
cursor:pointer;
}
div#header div#menu_div input[type=submit]:focus{
outline:none;
}
div#header div#menu_div div#jobb label {
position:absolute;
top:18px;
right:15px;
}
div#header div#menu_div label img {
width:32px;
height:32px;
position:absolute;
top:23px;
cursor:pointer;
right:15px;
}
div#header div#menu_div input[type=checkbox]{
display:block;
}
div#header div#menu_div .login_menu {
position:absolute;
top:75px;
background:white;
right:0px;
width:200px;
height:50px;
display:none;
}
div#header div#menu_div .login_menu a {
font-size:15px;
display:block;
margin-top:15px;
margin-left:40px;
color:black;
font-weight:bold;
text-decoration:none;
transition:color 0.3s;
}
div#header div#menu_div .login_menu a:hover {
color:orange;
}
input#toggle:checked + .login_menu {
display:block;
}
</style>
<?php ?>
</head>
<body>
<div id="header">
<div id="menu_div">
<label for="toggle"><image src="images/usericon.png" /></label>
<!-- checkbox --><input type="checkbox" id="toggle" />
<input type="submit" value=""></input>
<input type="text" placeholder="KERESÉS.."></input>
<div class="login_menu">
<a href="">BEJELENTKEZÉS</a>
</div>
<ul>
<li><a href="">ELÉRHETŐSÉG</a></li>
<li><a href="">DOKUMENTUMOK</a></li>
<li><a href="">DIAKOKNAK</a></li>
<li><a href="">FOTÓGALÉRIA</a></li>
<li><a href="">ISKOLÁNKRÓL</a></li>
<li><a href="">FŐOLDAL</a></li>
</ul>
</div>
</div>
<div id="main_body"></div>
<div id="footer"></div>
</body>
</html>
válasza:Mert a login_menu osztályú blokk nem közvetlenül a toggle azonosítójú kijelölőnégyzet után következik - amire a + selector illeszkedne:
helyette tessék a ~ selectort alkalmazni:
Ja és egy pár javaslat:
* Fórumba való kód beillesztéséhez használj kódmegosztó oldalakat (például hastebin, pastebin), mert ott legalább az indentálás megmarad és jól olvasható marad a kód
* Az ilyen
div#header div#menu_div ul li
hosszú rondaságok helyett használj ilyesmit:
#menu_div li
válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!