nicht angemeldet
CSS Layout im IE
Hallo zusammen,
ich hab mal wieder ein Problem mit meinem CSS-Layout.
Da ich ja noch ein ziehmlicher Anfäger bin, komm ich leider nicht mehr weiter.
Im Firefox und im Opera wird mir alles richtig angezeigt aber im Internetexplorer ist alles verschoben.
Das Div mit dem Inhalt wird z. B. komplett nach unten verschoben.
Mein Quellcode sieht wie folgt aus:
index:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<link rel=stylesheet type="text/css" href="./css/format.css">
</head>
<body>
<div id="banner"><img src="./pics/banner.bmp"></div>
<div>
<ul id="Navigation">
<br>
<br>
<li id="li">Navigation</a></li>
</div>
<div id="Inhalt">
<h1>Test</h1>
</div>
</body>
</html>
css:
body {
font-family: arial;
color: #FFFFFF;
background-color:#000000 ;
margin: 0; padding: 1em;
font-size: 100.01%;
}
div#banner {
margin: 0 0 1em;
text-align: left;
width: 1245px;
background-color: #000000;
border: 1px; border-color:#ffffff; border-style: solid;
}
ul#Navigation {
font-size: 330;
float: left; width: 19.95em;
margin: 0 0 0; padding: 0;
border: 1px; border-color:#ffffff; border-style: solid;
height:597px;
}
ul#Navigation li {
list-style: none;
margin: 0; padding:0 0 0 3em;
}
#li {
font-weight:bold;
}
a:link { color:#ffffff; font-family: arial; text-decoration: none;}
a:visited { color:#ffffff; font-family: arial; text-decoration: none;}
a:hover { color: #7b7b7b; text-decoration:none; }
a:active { color: #7b7b7b; text-decoration:none; }
div#Inhalt {
margin-left: 21;
padding: 1em 3em;
border: 1px; border-color:#ffffff; border-style: solid;
min-width: 51.8em;
height:565px;
}
Bitte hilft mir, was ich zusätzlich angeben bzw. verändern muss.
Vielen Dank
lg Jen
-
Hi,
Da ich ja noch ein ziehmlicher Anfäger bin, komm ich leider nicht mehr weiter.
dann sollte Dein erster Schritt sein, die Seite zu validieren. Fehlerhaftes HTML ist keine gute Basis für CSS-Formatierungen.
<div id="banner"><img src="./pics/banner.bmp"></div>
zwar kein Fehler, aber doppelt schlecht:
1. ist das doch wohl kein (Werbe-)banner, warum benennst Du ihn dann so, dass er von AdBlock&Co ausgeblendet wird?
2. ist bmp kein sinnvolles Bildformat für's Web.<ul id="Navigation">
<br>
<br>in <ul> darf direkt nur <li> stehen. Davon abgesehen sind (zumal doppelte) <br> unangebracht.
<li id="li">Navigation</a></li>
</div>Du vergisst </ul>.
height:597px;
solche Angaben sind problematisch bei Schriftgradänderung. Abgesehen davon wäre dies meist zu hoch für eine sinnvolle Navigation.
a:link { color:#ffffff; font-family: arial; text-decoration: none;}
a:visited { color:#ffffff; font-family: arial; text-decoration: none;}
a:hover { color: #7b7b7b; text-decoration:none; }
a:active { color: #7b7b7b; text-decoration:none; }warum so umständlich - und ohne generische Schriftangabe?
height:565px;
s.o.
verzichte besser auf Höhenangaben.freundliche Grüße
Ingo-
Erst mal vielen dank.
<ul id="Navigation">
<br>
<br>
in <ul> darf direkt nur <li> stehen. Davon abgesehen sind (zumal doppelte) <br> unangebracht.Was heißt hier darf nur <li> stehn?
Darf man innerhalb eines <ul> keine <br>s angeben?
Wie kann ich doppelte <br> umgehn?height:597px;
height:565px;
solche Angaben sind problematisch bei Schriftgradänderung. Abgesehen davon wäre dies meist zu hoch für eine sinnvolle Navigation.Wie kann ich dann sonst angeben, wie hoch und wie breit mein Inhalt und meine Navigation sind?
Verbessert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <link rel=stylesheet type="text/css" href="./css/format.css"> </head> <body> <div id="banner"><img src="./pics/logo.jpg"></div> <div> <ul id="Navigation"> <br> <li id="li">Navigation</a></li> </ul> </div> <div id="Inhalt"> <h1>Test</h1> </div> </body> </html>Und was mach ich nun mit der anzeige im IE?
-
Hi,
in <ul> darf direkt nur <li> stehen. Davon abgesehen sind (zumal doppelte) <br> unangebracht.
Was heißt hier darf nur <li> stehn?Das heisst, UL darf als Kindelemente ausschliesslich LI haben.
Darf man innerhalb eines <ul> keine <br>s angeben?
Nein.
(Innerhalb der LI sind dann wieder diverse HTML-Elemente erlaubt.)Wie kann ich doppelte <br> umgehn?
In dem du sie einfach weglaesst, und fuer Abstaende die CSS-Eigenschaften margin und padding nutzt - so wie du fuer *alles*, was die Darstellung betrifft, CSS nimmst.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“ -
Hi,
Was heißt hier darf nur <li> stehn?
Darf man innerhalb eines <ul> keine <br>s angeben?so ist es - direkt nicht. Aber wenn Du z.B. ein <li> hierin hast, welches einen (sinnvollen) Zeilenumbruch enthalten soll, dann ist ein <br /> an dieser Stelle zulässig.
Wie kann ich doppelte <br> umgehn?
Doppelte <br /> sind in aller Regel unsinnig, denn ein <br /> steht für einen vom Kontext her sinnvollen Zeilenumbruch. Eine Leerzeile hingegen ist in aller Regel ein Indiz für einen neuen Textabsatz, also durch <p></p> auszuzeichnen. Oder eben der Wunsch nach Abstand, den CSS umsetzen sollte.
height:597px;
height:565px;
solche Angaben sind problematisch bei Schriftgradänderung. Abgesehen davon wäre dies meist zu hoch für eine sinnvolle Navigation.
Wie kann ich dann sonst angeben, wie hoch und wie breit mein Inhalt und meine Navigation sind?Die Höhe von Elementen solltest Du i.d.R. überhaupt nicht angeben, außer in Sonderfällen oder wenn es sich um Bilder handelt.
Verbessert:
und immer noch fehlerhaft.
freundliche Grüße
Ingo -
Mahlzeit Jen,
zusätzlich zu dem, was ChrisB und Ingo anmerkten:
<div id="banner"><img src="./pics/logo.jpg"></div>
Wozu überhaupt das <div>? Du kannst auch einem <img> eine ID geben und es direkt formatieren.
<div>
<ul id="Navigation">Wozu dieses <div>? Es ist komplett überflüssig.
Und was mach ich nun mit der anzeige im IE?
Den Code weiter optimieren und validieren - wenn keine Fehler und Warnungen mehr auftreten, kannst Du Dich an <http://de.selfhtml.org/css/layouts/browserweichen.htm@title=entsprechende CSS-Hacks> für den IE machen.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Hi,
<div id="banner"><img src="./pics/logo.jpg"></div>
Wozu überhaupt das <div>?
Vielleicht, um dem Strict-Doctype gerecht zu werden?
Du kannst auch einem <img> eine ID geben und es direkt formatieren.
Das gilt grundsaetzlich natuerlich immer - jedes Element kann direkt formatiert werden, und die Unsitte, Elemente *ausschliesslich* zwecks ihrer Formatierung in Divs zu stecken, sollte man sich abgewoehnen.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“
-
-
-