nicht angemeldet
Frage: css-layout, IE7
Hallo,
meine erste Frage hier in diesem Forum, bitte Nachsicht. Folgender Code wird im IE7 (im Gegensatz zu Mozilla Firefox) nicht so angezeigt, wie ich mich das wünsche. Die linke und rechte Navigationsleiste sollten parallel vom oberen zum unteren Rand des root-layers verlaufen. Ich war nicht in der Lage, in Selfhtml die Antwort zu finden.
Vielen Dank,
Christopher.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
BODY {font-family:"Century Gothic"; font-size:11;text-align:center;margin:0;padding:1em 0;}
P {font-family:"Century Gothic"; font-size:11;}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
FORM {margin:0;padding:0;}
#root {margin:0 auto;text-align:left;padding:0;width:959px;border: 2px ridge silver;}
ul#Navigation {
float:left;
margin-left:0;margin-top:0;
font-size: 0.83em;
width: 179px;
margin: 0 0 0 0; padding: 0;background-color:#EAF5F9;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0 auto; padding: 0.5em;
}
ul#Navigation li.first {
margin-top:200px;
}
ul#Navigation a {
color:#003366;
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:hover,ul#Navigation a:active {
color: #FFF;
background-color: #003366;
}
ul#Navigationrechts {
margin: 0 0 1em 780px;
font-size: 0.83em;
width: 179px;
padding: 0;
background-color:#EAF5F9;
border: 1px dashed silver;
}
ul#Navigationrechts li {
list-style: none;
margin: 0 auto; padding: 0.5em;
}
ul#Navigationrechts a {
color:#003366;
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigationrechts a:hover,ul#Navigation a:active {
color: #FFF;
background-color: #003366;
}
ul#Navigationrechts li.first {
margin-top:200px;
}
#graphicfieldtop {float:left;position:relative;left:34px;width:529;height:205;}
</style>
</head>
<body>
<div id="root">
<!--<div id="navbarleft"> testtext-->
<ul id="Navigation">
<li class="first"><a href="">Einführung in CSS-basierte Layouts</a></li>
<li><a href="">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="">CSS-basierte Navigationsleisten</a></li>
<li><a href="">CSS-Browserweichen</a></li>
</ul>
<div id="graphicfieldtop"><img src="" alt="Top-Image" width="529" height="205" /></div>
<!--</div>-->
<ul id="Navigationrechts">
<li class="first">Einführung in CSS-basierte Layouts</li>
<li>Mehrspaltige CSS-basierte Layouts</li>
<li>Fixe Bereiche mit CSS-basierten Layouts</li>
<li>CSS-basierte
Navigationsleisten</li>
<li>CSS-Browserweichen</li>
</ul>
</div>
</body>
</html>
-
Hi,
Folgender Code wird im IE7 (im Gegensatz zu Mozilla Firefox) nicht so angezeigt, wie ich mich das wünsche. Die linke und rechte Navigationsleiste sollten parallel vom oberen zum unteren Rand des root-layers verlaufen.
Abgesehen von ein paar Fehlern im CSS - Angabe der Einheiten vergessen, validieren hilft - ist hier
ul#Navigationrechts {
margin: 0 0 1em 780px;das margin-left etwas zu viel - mit ein paar Pixeln weniger klappt's.
(Und der Bezeichner #Navigationrechts ist auch ungeschickt gewaehlt - eine ID oder Klasse sollte nicht nach der *derzeit* gewuenschten Darstellung benannt werden.)
MfG ChrisB
-
Hallo,
(Und der Bezeichner #Navigationrechts ist auch ungeschickt gewaehlt - eine ID oder Klasse sollte nicht nach der *derzeit* gewuenschten Darstellung benannt werden.)
... sondern nach der semantischen Funktion - so wie 'Navi-Neuigkeiten', Navi-Archiv, 'Inhalt', 'logo', 'Hauptmenü' etc.
Wenn ich mir diese zusätzliche Anmerkung erlauben darf.
Gruß, Nils
--
Bookmarks-
Vielen Dank für die Hilfe und die Hinweise! Werd ich mir alles zu Herzen nehmen.
Grüße,
Christopher.Hallo,
(Und der Bezeichner #Navigationrechts ist auch ungeschickt gewaehlt - eine ID oder Klasse sollte nicht nach der *derzeit* gewuenschten Darstellung benannt werden.)
... sondern nach der semantischen Funktion - so wie 'Navi-Neuigkeiten', Navi-Archiv, 'Inhalt', 'logo', 'Hauptmenü' etc.
Wenn ich mir diese zusätzliche Anmerkung erlauben darf.
Gruß, Nils
-
-