Problem mit CSS LAyout
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
beitrag
boxen
encoding
explorer
komplette layout
layout
mache
margin
men
mitte
paar fehler
raterei
recht
richtig anzeigen
schrift
test
textinhalt
wahrscheinlichkeit
wolltest
-
Hi,
ich bin gerade dabei ein CSS LAyout zu erstellen. Leider habe ich ein paar Fehler drinne und wei? nciht wo.
Also, es wir im IE richtig angezeigt aber in Firefox nicht. Beim Firefox steht das Men? so weit rechts, das man nicht mal die Listenpunkte sieht.
Au?erdem ist das Men? im Textinhalt drinne. Was muss ich ?ndern, das es nicht mehr so ist?
Zweite Sache:
Wie kann ich das Komplette Layout von rechts in die mitte hohlen, ohne das die Schrft dann auch zentriert ist?
Und wie mache ich es, dass das Men? dierekt am content dran ist ohne abstand?
hier mein code:
<!doctype html public "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Test Layout</title> <style type="text/css"> #menue { width:100px; color:red; border:1px ridge #cecece; float:left; } #content { width:600px; color:blue; border:1px ridge #dedede; float:center; } </style> </head> <body> <div width="700px" style="margin:0px;"> <div id="menue"> <li><a href="#">Hallo</a></li> <li><a href="#">Hallo</a></li> <li><a href="#">Hallo</a></li> <li><a href="#">Hallo</a></li> <li><a href="#">Hallo</a></li> </div> <div id="content"> <h3>Hallo</h3><br><br><br> shdjksdfjhdsjkfhkjsdfhjkh<br> sehjksdfhjksdhfkjhsdjkfhsdjk<br> sdahkjdshfjkhdskfjhsdkjfkjsdf<br> </div> </div> </body> </html>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also, wegen zentrieren:
Du kannst den Html-tag <center>...</center> benutzen, allerdings ist dieser nicht html4-gerecht.
Ich benutze zum zentrieren Javascript, also, wenn man von 1024px breite ausgeht:
document.getElementById("...").style.marginLeft = (document.width-1024)/2;
1024 ist die breite deines Elements, das kannste ab?ndern. -
das ist sch?n, aber ich will es nicht zentrieren, weil wenn ich es so wie du mache, ist die schrift auf links und nur der content in der mitte, aber immer noch nicht alles, so wie ich es will
-
padding-left:20px;
#menue
{
width:100px;
color:red;
border:1px ridge #cecece;
float:left;
padding-left:20px;
}
http://css4you.de/ kennst du bestimmt schon. -
ok, jetzt kann ich alles lesen, aber das men? ist immer noch im textflu
-
http://css4you.de/wslayout1/index.html
guck dir mal die beispiele unten an. da ist bestimmt was f?r dich dabei. -
Zentriert wird ein Block (beispielsweise <div> oder <p>) mit "margin: auto;".
Dann kannst du den Text im Blockelement immer noch so ausrichten, wie du m?chtest ( mit "text-align").
Teste deine Layouts immer zuerst mit dem Firefox, und erst wenn es dort hinhaut, kuckst du, was der IE dazu sagt. Umgekehrt geht das nicht, weil der IE viel mehr interpretiert (er versucht zu erraten, was du darstellen wolltest) als der Firefox. Verhaut der Firefox dein Layout, dann ist mit ziemlich gro?er Wahrscheinlichkeit dein Code daran schuld.
Au?erdem hilft es, XHTML statt HTML zu schreiben. Dazu ben?tigt deine HTML-Datei einen speziellen Header in der ersten Zeile:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
... <!-- usw. -->
Das zwingt den IE, von seiner "Raterei" abzulassen und den Quellcode so zu interpretieren, wie es auch der Firefox macht (meistens).
Verlinke mal bitte deine Seite, damit wir schauen k?nnen, wie du das Layout haben m?chtest (also so, wie es der MSIE anzeigt).
MfG
alopex
*nachtr?glich_einf?g*
So m?sste es gehen:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layout</title> <style type="text/css"> div#main { margin-left: auto; margin-right: auto; width: 720px; heigt: 100%; border: 1px green dashed; } div#menue { position: relative; width:100px; color:red; border:1px ridge #cecece; float:left; clear: right; } div#content { position: relative; width:600px; color:blue; border:1px ridge #dedede; float:right; } </style> </head> <body> <div id="main"> <div id="menue"> <li><a href="#">Hallo</a></li> <li><a href="#">Hallo</a></li> <li><a href="#">Hallo</a></li> <li><a href="#">Hallo</a></li> <li><a href="#">Hallo</a></li> </div> <div id="content"> <h3>Hallo</h3><br><br><br> shdjksdfjhdsjkfhkjsdfhjkh<br> sehjksdfhjksdhfkjhsdjkfhsdjk<br> sdahkjdshfjkhdskfjhsdkjfkjsdf<br> </div> </div> </body> </html>
Beitrag ge?ndert am 14.10.2005 18:43 von alopex -
Falsche Anzeige in Internet Explorer wegen box-modell-bug. Internet Explorer 6 kann es richtig anzeigen (d.h. so wie Firefox), wenn in der Dokumenttypangabe verlinkt ist.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage