Zweispaltiges CSS Layout funktioniert nicht richtig

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Entwickler>Zweispaltiges CSS Layout funktioniert nicht richtig

dom_beta29.06.1121:25

Hallo!

Ich habe ein zweispaltiges CSS Layout erstellt allerdings funktioniert es nicht richtig.

Der Firefox zeigt die Seite richtig an, nur Safari und der Internet Explorer nicht.

Die Navigationsleiste ragt dort bei den zweien in die "rechte" Spalte rein.

Wo liegt der Fehler? Ich find den irgendwie nicht.

Vielen Dank!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="de">
<meta name="robots" content="index,follow">
<style type="text/css">

body {font-family:sans-serif}
ul  {float:left;  border:1px solid green}
li {list-style-type:none; border:1px solid red;}
a, a:link {display:block; text-align:center; text-decoration:none;   color:#000; background-color:#D9D9D9;
         border-top:1px solid #FFF; border-left:1px solid #FFF; border-right:1px solid black; border-bottom:1px solid black }


a:hover {color:#FFF; background-color:#696969; border-top:1px solid #000;  border-left:1px solid #000;
border-right:1px solid #FFF; border-bottom:1px solid #FFF}

#inhalt { width:850px; margin:auto; border:1px solid black;}

</style>
<title> Seite </title>
</head>
<body>

<ul>
    <li><a href="dd">Startseite</a></li>
    <li><a href="dd">Wir über uns</a></li>
    <li><a href="dd">Veranstaltungen</a></li>
    <li><a href="dd">Presse</a></li>
    <li><a href="dd">Gästebuch</a></li>
    <li><a href="dd">Kontakt</a></li>
    <li><a href="dd">kk</a></li>
</ul>

<div id="inhalt">
           <h1>Terminkalender</h1>
           <p>
<p> </p>
<h5>.</h5>
<p>......</p>
<p>....</p>
<p>....</p>
<p>...</p>
<h5>...</h5>

<p>... </p>
</div>
</body>
</html>

„...“

Kommentare

DerDieter29.06.1122:50

gefloatete Elemente sollten, wenn ich mich nicht sehr täusche, laut Spezifikation immer eine bekannte Breite haben. Wenn sie nicht implizit durch ihre Inhalte feststeht, solltest du der Navigation also eine explizite Breite per "width=" angeben.

Wenn du die Breite der Navigation also kennst, kannst du auf verschiedene Weise dafür sorgen, das #inhalt entsprechend weit vom linken Rand wegbleibt. Zum Beispiel, in dem du #inhalt in eine Schachtel packst und du dieser einen entsprechenden margin-left verpasst.

sierkb29.06.1123:03

Ohne jetzt die Validität des Markup und des CSS geprüft zu haben (ich gehe mal davon aus, dass Du die Validität sichergestellt hast):

Du hast Deinem Inhalt mitgeteilt, dass er zwar 850px breit sein soll, dass er aber die Ränder links, rechts, oben und unten automatisch gemäß der Fenstergröße anpassen soll. Und das tut er auch.

Du schreibst:
inhalt { width:850px; margin:auto; border:1px solid black;}

Test: mache mal Deine Browserfenster alle gleich groß (z.B. 1280x1024px) auf. Bzw. spiele mit der Größe des Browserfensters ein wenig herum, vergrößere und verkleinere es. Achte auf Deinen Inhalts-Block, was der macht, wie der sich verhält. Du merkst was?

Mit einem mal klappt's auch in Safari und IE, wenn das Browser-Fenster nur groß genug ist (nämlich mindestens 850px breit PLUS der Breite Deiner linken Navigation PLUS entsprechend definierter Abstände, Ränder und Rahmen.)

Solange Dein Inhalt ein margin-left: auto hat, wird er das auch umsetzen. Und zwar gemessen an dem Block-Element, in dem er sich befindet. Und er befindet sich innerhalb von <body>. Also orientiert sich der linke Rand Deines Inhalts-Divs am linken Rand des <body>s, und damit des Fensters, wenn Du <body> nicht selber einen Rand/Abstand mitgegeben hast. Und damit ist es Deinem Inhalts-Div im Grunde wurscht, ob Du da noch einen Navigations-Block stehen hast oder nicht -- es orientiert sich am linken Rand des Elternelements, also <body>s. Die auto-Eigenschaft sowohl in linker wie auch in rechter Richtung deiner Inhaltsbreite sorgt für eine eine mittige Positionierung, ist Dein Browserfenster groß genug aufgezogen, ragt da nix irgendwo rein, alles passt.

Du hast nun mehrere Möglichkeiten, je nachdem was Du erreichen willst.

Schau zum Beispiel mal, was sich ändert, wenn Du dem Inhalts-Div statt aller 4 Ränder ein auto mitgibst, zum Beispiel nur dem rechten Rand ein auto zugestehst (margin für oben und unten lasse ich jetzt mal weg, da erschließt sich mir nicht, wieso Du das da auf auto setzt):

#inhalt { width:850px; margin-left: 200px; margin-right:auto; border:1px solid black;}

Spiele jetzt mal mit dem Browserfenster rum, fasse es mit der Maus rechts unten an und mache es größer oder kleiner. Sowohl in Firefox als auch in Safari als auch in IE.

Du merkst was, Du merkst den Unterschied?

Alles weitere überlasse ich jetzt Dir, weil ich nicht genau weiß, was Du vorhast, da gäbe es jetzt gleich mehrere Möglichkeiten Abstände einzubauen und zu bewahren. Deshalb erstmal soviel zu diesem Punkt, möglicherweise reicht es Dir ja auch schon aus, wenn Du Deinem Inhalt einfach einen fest definierten linken Abstand mitgibst (sinnvoll wäre: Gesamtbreite des Navigationskastens + evtl. Abstand zum rechts daneben liegenden Inhalts-Block). Evtl. könntest Du auch dem linken Navigationsblock auch noch eine feste Breite mitgeben, damit der Browser noch eine Kenngröße mehr hat, um die Breite berechnen zu können, das scheint mir hier aber nicht unbedingt notwendig zu sein, das mit einem fest definierten linken margin für den Inhalts-Block reicht wohl schon aus, damit der Browser eine feste Basis zum Berechnen hat und nicht völlig frei in der Luft hängt.

sierkb29.06.1123:12

DerDieter:

Zum Beispiel, in dem du #inhalt in eine Schachtel packst und du dieser einen entsprechenden margin-left verpasst.

Inhalt ist bereits in einer Schachtel bzw. ist selber eine Schachtel, ist bereits ein div-Blocklevel-Element. Es nochmal in eine weitere Schachtel zu packen wäre redundant, wäre überflüssig, würde den Code nur unnötig aufblähen ohne jegliche semantische Mehraussage.

DerDieter30.06.1101:04

Die Schachtel sorgt dafür, dass das Verhalten erhalten bleibt, und gleichzeitig die Container nicht ineinanderfließen. Da ist nichts redundant, nichts überflüssig, und es wird auch nicht "aufgebläht".

#inhalt { width:850px; margin-left: 200px; margin-right:auto; border:1px solid black;}

Spiele jetzt mal mit dem Browserfenster rum, fasse es mit der Maus rechts unten an und mache es größer oder kleiner

was *ich* hier merke ist, dass sich das Verhalten von #inhalt damit völlig geändert hat. Es fließt nicht mehr in die Navigation, aber es zentriert auch nicht mehr. Wenn er so etwas wollte hätte sicher nicht die margins left/right auf "auto" gesetzt.

Es ist eine Lösung für Fundamentalisten, die einer fiktiven, selbst ausgedachten reinen Lehre folgen, aber sie widerspricht jedem Pragmatismus.

DerDieter30.06.1101:10

dom_beta: was ich vorhin nicht erwähnt hatte: der zusätzlichen Schachtel um #inhalt musst du eine Weite von 100% geben.

Bezüglich des Verhaltens von gefloateten Elementen schau dir mal dieses Tutorial an.

sierkb30.06.1101:32

was *ich* hier merke ist, dass sich das Verhalten von #inhalt damit völlig geändert hat. Es fließt nicht mehr in die Navigation

Genau Letzteres sollte ja auch erreicht werden.

aber es zentriert auch nicht mehr. Wenn er so etwas wollte hätte sicher nicht die margins left/right auf "auto" gesetzt.

Gegenfrage: zentriert zu was? Zentriert zum Gesamtdokument (das Inhalts-div befindet sich DOM-Baum-mäßig immer noch auf gleicher Kind-Höhe wie das <ul> der Navigation), so wie es bisher definiert ist? Oder zentriert zum verbliebenen Rest abzüglich der Breite der Navigation? In diesem Falle müsste er erstmal klar definieren, wo der Bereich für die Navigation anfängt und wo er aufhört. Und wo dann der Platz für alles andere weiter rechts anfängt und wo er aufhört. Und in dem dann zur Verfügung stehenden Bereich kann er dann zentrieren. margin: auto muss sich ja an irgendwelchen Grenzen orientieren. Im Moment kann es das nur anhand der äußeren Grenzen, gegeben durch <body>.
Wenn Du auf dieser Basis ein zusätzliches Blockelement (z.B. ein <div>) da umschließend einsetzen willst, das dann eine linke Grenze rechts der Navigation setzt, dann hättest Du wohl recht, dann habe ich Dich wohl etwas missverstanden.

Es ist eine Lösung für Fundamentalisten, die einer fiktiven, selbst ausgedachten reinen Lehre folgen, aber sie widerspricht jedem Pragmatismus.

Nanana, wer wird sich denn hier gleich ranzig werden und rumpöbeln wollen, hmm?

sierkb30.06.1109:37

Nachtrag:

In jedem Fall würde ich der <ul>-Liste wenigstens zu Test-Zwecken das implizierte padding mal wegnehmen und vorübergehend auf padding:0 setzen. Evtl. dessen Rand mit margin:0 ebenfalls auf Null setzen. Evtl. auch beim body den margin und das padding auf Null setzen. Wie gesagt: erstmnal nur zu Testzwecken, um eine saubere Ausgangslage beim Testen und Visualisieren zu haben. Ich markiere sie mal als kursiv. Die relevanten Änderungen markiere ich mal mit Fettdruck.

Außerdem noch 2 Lösungen, welche keinen zusätzlichen Wrapper in Form einer weiteren div-Box benötigen und Du Dein HTML-Markup nicht ändern musst, allerdings mit unterschiedlichem Ergebnis (ich weiß nicht, was Du beabsichtigst und was Dir wichtiger ist, Du musst entscheiden):

Variante 1:

ul {float:left; border:1px solid green; margin-right:10px;}
#inhalt { display:inline-block; width:850px; margin-left:auto; margin-right:auto; border:1px solid black;}

Variante 2:

body {font-family:sans-serif; border:1px solid black; min-width:1096px; margin:0; padding:0;}
ul {float:left; border:1px solid green; width:120px; padding:0;}
#inhalt { width:850px; margin-left:auto; margin-right:auto; border:1px solid black;}

inline-block

Die CSS2.1-Spezifikation bezüglich inline-block :

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

Zum selben Thema etwas ausführlicher die CSS3-Spezifikation (derzeit im Draft-Zustand) :

9.5. ‘Inline-block’ or floating, non-replaced elements

The used values of ‘margin-left’, ‘margin-right’, ‘margin-top’ and ‘margin-bottom’ are their computed values, except that a computed value of ‘auto’ gives a used value of 0.

The used value of ‘width’ is the computed value, unless that is ‘auto’, when used value is the shrink-to-fit width.

The used value of ‘height’ is the computed value, unless that is ‘auto’, when the used value is defined by “‘Auto’ heights for flow roots.”

For inline-block boxes, the margin box is used when calculating the height of the line box.

min-width:
Die CSS2.1-Spezifikation zum Thema min-width:

Variante 2 könnte für Dich evtl. diejenige sein, welche Deinem gewünschten Ergebnis am nächsten kommt.

Allerdings gibt es an der Lösung etwas, was ich selbst nach mehrmaligem Herumprobieren nicht ganz verstehe: der Wert von min-width:1096px; für das body-Element. Es müsste sich eigentlich zusammensetzen aus den Werten für die inhalt-Box (850px Breite + evtl. Rand (margin) + Polsterung (padding) + evtl. Rahmen (border)) und den Werten für die Navigationsliste (120px Breite + evtl. Rand (margin) + Polsterung (padding) + evtl. Rahmen (border)))
Also 850px + 2mal 1px border + 120px + 2mal 1px border: 974px.
Es ist aber für das body-Element anscheinend eine größere Breite erforderlich, um den Inhaltsblock sich neben den Navigationsblock zu schmiegen und da selbst bei beliebiger Verkleinerung des Browserfensters auch da zu belassen und bei größer aufgezogenem Fenster margin:auto wirken zu lassen.
Mir ist grad' nicht erklärlich, wo die zusätzlichen Pixel herkommen sollen, die da bei nüchterner Kalkulation 974px ergeben müssten, de facto aber ein Wert von 1096px für body notwendig sind.
Vielleicht habe ich da ja noch was übersehen, wo diese zusätzlich notwendigen Pixel für die Gesamtbreite des bodys herkommen (selbst wenn ich alle Ränder (border), Polsterungen (padding) und Ränder (margin) auf Null setze, bleibt ein mir grad' nicht erklärlicher Abstand bgzl. der Gesamtbreite von <body> beim beliebigen Verkleinern des Browserfenster), ich sehe es grad' nicht. Wo kommt also die offenbar notwendige Differenz von 122px her zwischen dem Wert 1096px und den kalkulatorisch sich viel eher erklärlichen und meiner Meinung nach sinnvollen 974px?

Vielleicht weiß DerDieter ja Bescheid und kann mich da wissender machen, was ich da grad' übersehe.

DerDieter30.06.1120:57

Wo kommt also die offenbar notwendige Differenz von 122px her zwischen dem Wert 1096px und den kalkulatorisch sich viel eher erklärlichen und meiner Meinung nach sinnvollen 974px?

Die 122px entsprechen exakt der Weite der ul (120px) plus 2px für ihre Border links und rechts.
"margin-left/right: auto" bedeutet ja, dass, wenn ungenutzter Platz vorhanden ist, dieser Platz gleichmässig links und rechts des Elements verteilt wird. Da #ul ja gefloatet ist, wird es aus der Berechnung rausgenommen. Wenn #inhalt also visuell genau an ul anstößt, ist da nicht etwa 0 px Platz (wie es aussieht), sondern tatsächlich noch 122px. Damit #inhalt also 122px von der linken Kante des Body entfernt stehen kann muss rechts ebenfalls 122px vorhanden sein, und dafür muss die min-width des body entsprechend groß sein.

Oder, um es kürzer zu formulieren: Wenn ul gefloatet ist, verhält sich #inhalt so, als existiere ul nicht.

sierkb30.06.1121:34

DerDieter

Die 122px entsprechen exakt der Weite der ul (120px) plus 2px für ihre Border links und rechts.

Das ist mir klar und unbestritten. Bloß das WARUM für den doppelten Wert hat sich mir nicht wirklich erschlossen, auch wenn ich sowas in der Richtung erahnt habe (weil's eben nicht irgendein Wert, sondern genau der doppelte Wert ist, den man da einberechnen muss). Nur, wo eben das Doppelte statt des einfachen Wertes herkommt, das hat sich mir nicht gleich erschlossen, das wollten meine Augen nicht sehen.

Damit #inhalt also 122px von der linken Kante des Body entfernt stehen kann muss rechts ebenfalls 122px vorhanden sein, und dafür muss die min-width des body entsprechend groß sein.

*Patsch!* *vordiestirnschlag*
DAS ist der entscheidende Hinweis, der mir gefehlt hat. DAS ist die Erklärung für den notwendigen doppelt zu nehmenden Wert für die mit min-width definierte Gesamtbreite: die rechte zu berücksichtigende Seite aufgrund der sich ergebenden Symmetrie durch margin: auto. Groschen gefallen. Logisch! Leuchtet mir jetzt komplett ein. Dass ich das nicht gleich selber erkannt habe... Danke fürs Beseitigen meiner Teilblindheit.

Pineapps08.07.1117:30

Also ich hatte ein ähnliches Problem, und habe dann meine Website in eine 760x(unbegrenzt) Box getan und dann bei der Box margin Auto eingestellt, Voraussetzung ist natürlich, das das Fenster mindestens 760x(ca)640 groß ist. Es Funktioniert sogar auf dem iPad...

„Click. Boom. Amazing! - Steve Jobs“

Zweispaltiges CSS Layout funktioniert nicht richtig

Kommentare

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.