nicht angemeldet
CSS-Layout macht Probleme (Zentrierung)
Hallo Zusammen,
ich kann mir nicht erklären, wieso das unten folgende, sehr einfache Code-Schnipsel sich derart den Erwartungen widersprechend verhält.
Was ich erwarte: Eine Box, schwarz umrandet, die die ganze Breite des Browsers einnimmt. Darin eine Box mit roter Hintergrundfarbe, die die äussere Box vollständig füllt. In diesem roten Block wiederum - in der Mitte der Seite zentriert - drei Listenelemente, als Block gelb umrandet.
Weder Firefox noch der IE stellen das so dar. Am ehesten noch der IE, aber das ist vermutlich nur ein Bug ;-)
Im FF ist oberhalb und unterhalb der roten Box eine weiße freie Fläche, der gelb umrandete Block mit den Listenelementen ist linksbündig.
Im IE ist fast alles richtig, nur ist unterhalb des gelben Blockes eine freie Fläche entstanden.
Ich bin mittlerweile seit Stunden am recherchieren und probieren, vielleicht hat ja noch jemand eine Anregung.
Wichtig: mindestens der äussere Span und die ul-Aufzählungsliste müssen im HTML-Output erhalten bleiben, das div kann notfalls auch weg.
Ich danke Euch vielmals, Hans
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
#navigation {
border:1px solid #000;
width:100%;
display:block;
}
#navigation div {
background-color:red;
width:100%;
text-align:center;
}
#navigation div ul {
width:150px;
border:1px solid yellow;
}
//-->
</style>
</head>
<body>
<span id="navigation">
<div>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</div>
</span>
</body>
</html>
-
Hi,
ich kann mir nicht erklären, wieso das unten folgende, sehr einfache Code-Schnipsel sich derart den Erwartungen widersprechend verhält.
Der Codeschnippsel ist aber fehlerhaft.
span ist ein inline-Element und darf als solches keine Blockelemente wie div enthalten.
<html>
Doctype fehlt.
<head>
<title>test</title><style type="text/css">
<!--
#navigation {
border:1px solid #000;
width:100%;
display:block;Wenn Du ein Blocklevel-Element brauchst, dann benutz auch eins.
}
#navigation div {
background-color:red;
width:100%;
text-align:center;text-align:center kann die Liste nicht zentrieren, da sie kein inline-Element ist und text-align nur inline-Elemente beeinflußt.
}
<body>
<span id="navigation">
<div>s.o. - div in span nicht erlaubt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas,
Du hast mich gerettet, danke!
So sieht es jetzt aus und funktioniert:
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><head>
<title>test</title><style type="text/css">
<!--#navigation {
border:1px solid #000;
width:100%;
}#navigation div#inner {
background-color:red;
width:100%;
text-align:center;
}#navigation div ul {
margin:auto;
width:150px;
border:1px solid yellow;
}//-->
</style>
</head><body>
<div id="navigation">
<div id="inner">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</div>
</div>
</body>
</html>Wichtig waren vor allen Dingen die Hinweise, dass
a.) ein inline level Element kein block level Element enthalten darf
und
b.) Ein block level Element nicht mit text-align zentriert werden kann
Zu b.) habe ich mir dann http://www.thestyleworks.de/tut-art/centerblock.shtml angelesen.
Danke Dir nochmals, wünsche einen schönen Feierabend,
Hans-
Hans,
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Falschrum. Erst kommt der Doctype.
Gunnar--
"Nobody wins unless everybody wins." (Bruce Springsteen) -
Moin!
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">einen kleinen hinweis noch: <html> und doctype gehören vertauscht.
tschüssi
ichen-
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">einen kleinen hinweis noch: <html> und doctype gehören vertauscht.
ääh, ja! :-)
-
-
-
-
Moin!
füge deinem CSS noch hinzu:
body {
margin:0;
padding:0;
}<span id="navigation">
warum verwedest du hier nicht ein Blockelement (div)? das ist schwachfug hier span zu verwenden und im css anzugeben display:block; .
tschüssi
ichen-
Hallo ichen
füge deinem CSS noch hinzu:
body {
margin:0;
padding:0;
}Danke, aber das hat keinen Effekt. Dann ist zwar ausserhalb der schwarz umrandeten Box kein Rand, das ist aber nicht das Problem...
warum verwedest du hier nicht ein Blockelement (div)? das ist schwachfug hier span zu verwenden und im css anzugeben display:block; .
Das ist, weil ich (so gut wie) keinen Einfluss auf den (von einem Spezial-CMS) ausgegebenen HTML-Code habe. Meine Möglichkeiten beschränken sich fast ausschliesslich auf die Beeinflussung mittels CSS.
Danke aber trotzdem und viele Grüsse, Hans
-
Moin!
Danke, aber das hat keinen Effekt. Dann ist zwar ausserhalb der schwarz umrandeten Box kein Rand, das ist aber nicht das Problem...
was ist dein problem? der abstand unter der liste?
hier:
#navigation div ul {
width:150px;
border:1px solid yellow;
display:inline;
}tschüssi
ichen-
Hi ichen,
was ist dein problem? der abstand unter der liste?
hier:
Danke Dir. Ich habe die Lösung jetzt gefunden, guck mal hier: http://forum.de.selfhtml.org/?t=94353&m=571068
Schöne Grüsse!
Hans-
Moin!
Danke Dir. Ich habe die Lösung jetzt gefunden, guck mal hier: http://forum.de.selfhtml.org/?t=94353&m=571068
ja ich habe es leider erst gelesen nachdem ich gepostet hatte :-).
tschüssi
ichen
-
-
-
-