Az alábbi példában (teljes html kód lent van, csak ki kell másolni) miért van az, hogy a menü felső része ("Cégünkről") kisebb és olyan minzha a padding beállítás a felső részén nem érvényesülne?
Íme a teljes kód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#felulet {
margin:auto;
background-color: #FFF;
width: 960px;
height:600px;
}
#header {
height: 100px;
width: 100%;
background-color: #FFF;
float:left;
}
#menuTarolo {
background-color: #FFF;
width: 20%;
height:100%;
}
#menu{
list-style:none;
margin:0px;
padding:0px;
}
#menuTarolo ul li{
background-color: #666;
padding:0px;
margin:2px;
}
#menuTarolo ul li a{
text-decoration:none;
display:block;
font-family: "MS Serif", "New York", serif;
font-size:24px;
color: #FFF;
padding-bottom:10px;
padding-top:10px;
}
</style>
</head>
<body>
<div id="felulet">
<div id="header"> </div>
<div id="menuTarolo">
<ul id="menu">
<li><a href="#">Cégünkről</a></li>
<li><a href="#">Szolgáltatások</a></li>
<li><a href="#">Árajánlatkérés</a></li>
<li><a href="#">Visszahívjuk</a></li>
<li><a href="#">Kapcsolat</a></li>
<li><a href="#">Egyéb</a></li>
</ul>
</div>
</div>
</body>
</html>
Nálam az alábbi módosítással működik, egyeztesd őket:
<style type="text/css">
#felulet {
margin:auto;
background-color: #FFF;
width: 960px;
height:600px;
}
#header {
background-color: #FFF;
}
#menuTarolo {
background-color: #FFF;
width: 20%;
height:100%;
}
#menu{
list-style:none;
}
#menuTarolo ul li{
width: 100%;
background-color: #666;
padding: 20px;
margin:2px;
text-align: center;
vertical-align: middle;
}
#menuTarolo ul li a{
text-decoration:none;
display:block;
font-family: "MS Serif", "New York", serif;
font-size:24px;
color: #FFF;
}
</style>
válasza:nekem így jó:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu-HU" lang="HU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="felulet">
<div id="header"> </div>
<div id="menuTarolo">
<ul id="menu">
<li><a href="#">Cégünkről</a></li>
<li><a href="#">Szolgáltatások</a></li>
<li><a href="#">Árajánlatkérés</a></li>
<li><a href="#">Visszahívjuk</a></li>
<li><a href="#">Kapcsolat</a></li>
<li><a href="#">Egyéb</a></li>
</ul>
</div>
</div>
</body>
</html> (szabványos és no error)
css:
#felulet {
margin:auto;
background-color: #fff;
width: 960px;
height:600px;}
#header {
height: 100px;
width: 100%;
background-color: #fff;
float:left;}
#menuTarolo {
background-color: #fff;
width: 20%;
height:100%;}
#menu{
list-style:none;
margin:0;
padding:0;}
#menuTarolo ul li{
background-color: #666;
padding:0;
margin:2px 0;}
#menuTarolo ul li a{
text-decoration:none;
font-family: "MS Serif", "New York", serif;
font-size:24px; line-height: 34px;
color: #fff;
padding:20px 0;}
utolsó blokk line-height-jét állítva tudod nagyobbra tenni a menüt.
válasza:azért arra figyelj, ha a dokumentum xhtml, akkor az oldal is legyen az, vagy a doctype legyen már html :) így nem biztos, hogy minden böngészőben azt látod, amit szeretnél. a régebbi IE verziók amúgy is szemétre valók.
valamint a szabványos színkód vagy #fff, vagy #FFFFFF;
Pár év eltelt, mióta feltetted ezt a kérdést és a jó választ senki se mondta meg neked, de bizonyára most visszatekintve már jót nevetsz a hibádon.
(Egyébként azt volt a baj, h a headert floatoltad és nem clear-eltél utána. :))
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!