Erstes CSS-Tabellen-Layout...:(

[Eva H.]

Hallo zusammen,

ich bin am verzweifeln. Da ich mich langsam von html-Tabellenlayouts ternnen möchte, versuche ich es immer wieder mit css-layouts, aber es will nicht so recht klappen...

In diesem Fall wollte ich eine kleine Navi mit 4 Links, die in Rechtecken mit Außenabständen a 3px liegen, umsetzen. Bei hover sollte sich die Hintergrundfarbe ändern. Nachdem nun der Tag schon fast vorbei ist und ich immer wieder an den verschiedenen paddings der verschiedenen Browser gescheitert bin, wollte ich einfache Grafiken benutzen (und das hovern mit Javascript machen). Aber auch das klappt nicht... bin ich zu doof? :(((

So wie der Code jetzt unten steht, klappts im IE7 und FF1.5, aber Opera erwartet statt des padding 3px 3px 0 3px; anscheinend doch padding:3px; was dann aber wieder in den anderen Browsern %$§$§ aussieht.

Gibt es denn sowas wie einen Opera-Fix? Oder spinnt eher der IE bzw. FF?

Der Code:

  
#prenavi {  
border-bottom:1px solid #B2B2B2;  
padding:3px 3px 0 3px;  
text-align:left;  
}  
#navi {  
width: 100%;  
display: inline;  
padding: 0;  
}  
#navi ul {  
padding:0;  
margin: 0;  
list-style-type: none;  
text-align: left;  
}  
#navi li {  
display: inline;  
margin: 0;  
}  

  
<div id="prenavi">  
<div id="navi">  
<ul>  
<li><a href=""><img name="index" src="index.gif" width="130" height="16" alt="" /></a></li>  
<li><a href=""><img name="member" src="member.gif" width="130" height="16" alt="" /></a></li>  
<li><a href=""><img name="contact" src="contact.gif" width="130" height="16" alt="" /></a></li>  
<li><a href=""><img name="impressum" src="impressum.gif" width="130" height="16" alt="" /></a></li>  
<li><img src="spacer.gif" width="182" height="16" alt="" /></li>  
</ul>  
</div>  
</div>  

[Jo]

Hi Eva,

schau am besten mal bei www.css4you.de vorbei. Dort findest du viele Infos zum Thema CSS Layout bzw. Layouten ohne Tabellen.

Gruß
Jo