nicht angemeldet
Div-Ebenen + Firefox / IE
Hallo zusammen,
ich habe da ein Problem und weiß nicht weiter!
Ich versuche mich gerade an einer Page, die an für sich recht simpel aufgebaut ist: Das Layout an sich ist ein Bild, darauf positioniere ich mit div-Ebenen die jeweiligen Bereiche (Menü, Textfenster, usw) und für die Textformatierung verwende ich eine extrene .css-Datei.
Leider funktioniert das nicht in beiden Browsern (IE & Firefox) gleich, es scheint ein Problem mit den Pixelabständen von oben (style="position:absolute; top:31px; .....) zu geben.
So soll es an für sich aussehen (mit Firefox):
http://www.lunay.net/shtml1.jpg
Ein schwarzer Balken (hier: einfach ein Hintergrundbild) und wenn man über einen Link fährt, wird der Texthintergrund weiß & verbindet sich mit dem weißen Hintergrund, das es optisch gut wirkt.
IE braucht aber fast 20px mehr Abstand von oben um es an den gleichen Platz zu bringen, wie man sieht ist hier alles hochgerutscht und nichts ist mehr lesbar (gleicher Pixelabstand von oben, nur eben IE statt Firefox):
http://www.lunay.net/shtml2.jpg
Dann habe ich versucht den Hintergrund der div-Ebene, die das Menü bildet /positioniert, einfach schwarz zu färben anstatt ein Bild als Hintergrund zu nehmen (ob das Menü nun 20px höher oder tiefer liegt ist mir egal, es soll nur eben den Effekt ergeben das bei 'hover' die weiße Linkunterliegung an den weißen Hintergrund angrenzt!).
Leider hat das auch nicht so geklappt wie ich es mir vorgestellt habe, denn er macht den Balken deutlich größer als die Schrift an sich:
http://www.lunay.net/shtml3.jpg
(das obere ist Firefox, das untere ist IE mit der Eingabe "div#menue2 {background-color: #000000;}" in der externen .css-Datei.)
Durch die "height: ... px;" kann ich die Höhe der schwarzen Hintergrundbalken leider auch nicht ändern, höchstens vergrößern :(
Ich hoffe jemand kann mir helfen,
lieben Dank schonmal!
Judy
-
Hi Judy,
leider hast du den Quelltext deiner CSS-Datei nicht gepostet...
aber ein kleiner Tipp:
oft hilft es die Abstände generell am Anfang der CSS Datei auf 0 zu setzen:
*{
margin:0px;
padding:0px;
}-
Hallo Mika,
also meine .css Datei sieht wie folgt aus:
----------------HINTERGRUND BZW. HINTERGRUNDBILD----------------
body {
color: #000000; background-color: #000000;
font-size: 100.01%;
font-family: Arial;
margin: 0; padding: 0;
}div#bg {
float: left; width: 861px; height: 525px;
margin-top: 0;
margin-left: 0;
padding: 0;
background: #000000 url(lay2.gif);
border: 0px;
}-----------------------HIER DAS EIGENTLICHE MENÜ ---------------
div#menue2 {
float: left; width: 800px;
padding: 0;
margin: 0px;
border: 0px;
font-family: Arial;
color: #FFFFFF;
background-color: #000000;
}.active {
color: #FFFFFF; text-decoration: none;
}div#menue2 a {
width: 80;
padding: 0.2em;
font-weight: bold;
font-family: Arial;}
div#menue2 a:link {
color: #FFFFFF; text-decoration: none;
}
div#menue2 a:visited {
color: #FFFFFF; text-decoration: none;
}
div#menue2 a:hover {
color: #A41C33; background-color: #FFFFFF; text-decoration: none;
}
div#menue2 a:active {
color: #FFFFFF; text-decoration: none;
}------------ und danach dann halt noch die formatierung für das textfeld.
Liebe Grüße!
Judy-
Hi Judy,
auf die schnelle habe ich keinen Fehler entdecken können.
aber ich würde dir empfehlen dein Menu mit Hilfe von Listen aufzubauen und diese dann mit CSS zu formatieren:
<div id="menue2">
<ul>
<li>Home</li>
<li>Sedcard</li>
..usw..
</ul>
</div>damit hatte ich bisher noch nie Probleme und es sah in jedem Browser gleich aus.
Mit float:left oder display:inline wird die Liste dann in einer Zeile ausgegeben.
Infos und Tutorials dazu gibt es genügend bei Google :-)
Gruß
Mika-
Hallo Mika,
liebe Dank, hat aber leider nicht funktioniert (mit der Liste in einer Reihe & der gleichbleibenden Px-Fixierung in beiden Browsern) :(Liebe Grüße,
Judy -
Hallo!
<div id="menue2">
<ul>
<li>Home</li>
<li>Sedcard</li>
..usw..
</ul>
</div>Wohl eher gleich so:
<ul id="menue2">
<li>Home</li>
<li>Sedcard</li>
..usw..
</ul>Viele Grüße
Thorsten
-
-
-