HTML & CSSur HTML, XHTML & CSS
6 svar · 382 visningar · startad av andreas_lindh
Jag har en meny som jag inte har någon fast höjd på. Höjden beror på hur stor loggan som användaren laddar upp är.
Hur ska jag göra så att menyn anpassar höjden efter diven den ligger i?
koden ser ut så här
html
<div id="menu">
<img src="images/vglogga.gif" style="float:left;" alt="Västergötland Logga" />
<ul>
<li><a href="default.aspx">Matcher</a></li>
<li><a href="kontakt.aspx">Kontakta oss</a></li>
</ul>
</div>
css
#menu ul
{
font-size: 1.2em;
margin: 0;
padding: 0;
list-style-type: none;
text-align:left;
float:left;
}
#menu ul li
{
display: inline;
background-color:#f7f7f7;
margin: 0px;
padding:0px;
float:left;
}
#menu ul li a
{
text-decoration: none;
background-color: #f7f7f7;
color: #8B0000;
padding: 0px 15px 0px 15px;
color: #000000;
border-right: 1px solid #eaeaea;
margin: 0px;
min-height: 40px;
display:block;
}
Nu blir den aldrig högre än 40 px
Du måste clear´a dina float-attribut så inte dessa svämmar över div´en som den ligger i.
ex.
<div id="menu">
<img src="images/vglogga.gif" style="float:left;" alt="Västergötland Logga" />
<ul>
<li><a href="default.aspx">Matcher</a></li>
<li><a href="kontakt.aspx">Kontakta oss</a></li>
</ul>
<br style="clear:both;" />
</div>
Det löste inte höjdproblemet. Listan blir fortfarande bara 40 px hög
Palle
<br style="clear:both;" />
är det inte detta bland annat som ska rensas bort från koderna innan folk börjar använda IE7?
andreas_lindh
Jag ser inte att du satt några attribut på #meny. bara på listan.
Det är väl menydiven som ska ha höjdvärdena när bild och lista kommer in.
Hinner inte testa fram något nu, men prova med att lägga en del av dina värden direkt på menyn. Eller så har jag missuppfattat syftet. :OO
andreas_lindh:
Aha, nu förstår jag mer vad det är som du är ute efter.
Dock tror jag inte att du kan lösa det så, om du vill använda en lista som grund,
jag tror du får tänka om och använda en annan approach.
tanten:
Nja, detta är idag det bästa sättet att göra clears på, och detta sätt kommer fungera även i IE7.
http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/
Är det så här du menar det ska se ut?
Har inte petat på detaljerna utan bara på ett ungefär.
#menu
{
font-size: 1.2em;
margin: 0;
padding: 0;
text-align:left;
float:left;
background-color:#f7f7f7;
}
#menu ul li
{
display: inline;
list-style-type: none;
margin: 0px;
padding:0px;
float:left;
}
#menu ul li a
{
text-decoration: none;
background-color: #f7f7f7;
color: #8B0000;
padding: 0px 15px 0px 15px;
color: #000000;
border-right: 1px solid #eaeaea;
margin: 0px;
min-height: 40px;
display:block;
}
Palle skrev:
Nja, detta är idag det bästa sättet att göra clears på, och detta sätt kommer fungera även i IE7.
"Bästa" kanske är subjektivt, men hur du än vrider och vänder på det har du ett meningslöst element i märkkoden. Det går att cleara med hasLayout på föräldern för IE7 genom tex zoom:1, utan att behöva slänga in "clearing"-element.