CSS Positioning will anders als ich das will (mit display: table)

lordg2009 · 18. Dezember 2013

Hi

Gestalte gerade eine html Seite mit CSS

Habe ein Layout mit header, 3 spalten und footer.

Code:

<div id="header"></div>
<div id="wrapper">
    <div id="nav">
    </div>
    <div id="content">
    </div>
    <div id="right">
    </div>
</div>
<div id="footer"></div>

div#wrapper {
    display: table;
}
div#nav, div#content, div#right {
    display: table-cell;
}

Hat alles super geklappt, aber wenn ich jetzt im content div ein padding einstelle, oder floate, dann verschiebt es mir das menü in der linken Spalte nach unten. Was mache ich falsch?

Daaron · 18. Dezember 2013

display:table; ist halt ein Fall für sich... Setz entweder auf den Klassiker mit Float, oder auf die CSS3-Version mit Flexbox-Layout. Können zwar nur moderne Browser, dafür ist da wirklich endgeiler Scheiß möglich.

lordg2009 · 18. Dezember 2013

flexbox habe ich mir noch nicht angeschaut.

Das Problem beim floaten ist, das die Seitenspalten einen eigenen Hintergund haben sollen und er geht dann immer nicht bis zum footer, wenn zB der content Teil länger ist.

Suxxess · 18. Dezember 2013

Erstmal etwas zum Visualisieren.

PHP:

<html>
<head>
<title></title>
<style type="text/css">
<!--
  div#wrapper {
    display: table;
    }
    div#nav, div#content, div#right {
    display: table-cell;
    }
-->
</style>

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    <div id="header" style="border: 5px solid #FAD614; background-color:#1BFE03;">Head</div>
    <div id="wrapper" style="border: 5px solid #FAD614; background-color:#F73513;" >Wrapper
    <div id="nav" style="border: 5px solid #FAD614; background-color:#340CF0;">Nav</div>
    <div id="content" style="border: 5px solid #FAD614; background-color:#FD00D3;">Content</div>
    <div id="right" style="border: 5px solid #FAD614; background-color:#73C5EA;">right</div></div>
    <div id="footer" style="border: 5px solid #FAD614; background-color:#EA888E">Footer</div>
</body>
</html>

Ich würde auch auf float setzen und die Höhen und Breiten in Prozenz angeben, z.B. Nav = 30% und rechts = 70%

lordg2009 · 19. Dezember 2013

Sry für die Visualisierung, habe das ganze improvisiert, da meine Seite viel größer ist. Ich wollte die Seite nur für mich benutzen, also habe ich mich für die flex-box entschieden. Läuft echt super easy:

PHP:

div#wrapper {
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: justify;
	-webkit-box-align: stretch;
}
div#nav, div#right {
    width: 180px;
}
div#content {
    -webkit-box-flex: 1
}

Ergibt ein 3spaltiges Layout mit flexiblem content und fixen Seitenspalten. Aber nun gibt es ein neues Problem:
Ich bekomme den Inhalt der linken Spalte nicht von runtergeschoben. Egal, ob ich für die Navigationsliste ein padding, ein margin, oder das gleiche für die <li> - Elemente probiere, es klebt immer an der Decke. Werde es mal mit einem vorgeschobenem <div> mit fester Höhe probieren, erscheint mir aber wenig Elegant.

Ergänzung (19. Dezember 2013)

So, sobald noch ein Element darüber erscheint, werden die Abstände nach oben angezeigt. Wenn ich als ein <div> Element mit der Höhe 0.01em darüber lege, so bekomme ich meinen gewünschten Abstand. Elegant ist es allerdings nicht und ich weiß nicht, was ich da falsch mache.

Ergänzung (19. Dezember 2013)

Es lag am margin-collapse.
Ein overflow:auto hat das Problem behoben.

Danke euch

Daaron · 19. Dezember 2013

display: -webkit-box; <- das ist die falsche, die veraltete Notation.
Die korrekte, und von quasi allen neuen Browsern unterstütze Notation ist einfach nur "display:flex;". Im schlimmsten Fall heißt es "display:-ms-flex;" bzw. halt -webkit-flex, -o-flex oder -moz-flex.

Kleiner Zaubertrick für Flex: Flex-Elemente kann man "ordnen". Ok, dein Projekt ist nur für den Eigenbedarf, du wirst auf SEO wohl scheißen. Aber falls mal jemand hier vorbei kommt und mehr will wird er die Info interessant finden:
- Suchmaschinentechnisch ist der Inhalt, der am weitesten oben steht (nach <header>), am relevantesten
- klassisches Float-System wäre aber "links-rechts-content", ungeordnetes Flex wäre "links-content-rechts", genau wie "display:table"
- also schreiben wir einfach "content-links-rechts" im HTML-Code und geben Content eine spätere Ordnungszahl innerhalb des Flex als Links, aber noch vor Rechts. Für Smartphones will man evtl. wieder Links (Navi) - Content - Rechts haben, da ändert man die Ordnungszahlen per Mediaquery wieder.

Siehe z.B.: https://developer.mozilla.org/en-US/docs/Web/CSS/order

lordg2009 · 19. Dezember 2013

hm, ich nutze chrome und ohne -webkit klappt es bei mir nicht

Daaron · 19. Dezember 2013

Wahrscheinlich haust du die Legacy-Notation sowie die korrekte wild durcheinander. Nimm ausschließlich die korrekte Notation.
"display: flex;" funktioniert garantiert, ich verwende es doch bei einigen Projekten. Außerdem hindert dich nichts daran, mehrfache Definitionen einzutragen.

lordg2009 · 19. Dezember 2013

Hm, das wundert mich nun aber doch

Chrome sagt mir, dass die aktuelle Version installiert ist.

Manche Eigenschaften, wie 'border-radius' funktionieren ohne '-webkit', aber z.B. '-webkit-linear-gradient' hat in all meinen Übungen ausschließlich mit dem '-webkit' - Präfix funktioniert.

Daaron · 19. Dezember 2013

Kann durchaus sein, dass der linear-gradient noch als "experimental" eingestuft wird und nur mit Präfix funzt... aber display:flex funktioniert z.B. in Chromium 31 wunderbar, und auch in älteren Versionen gings... Ich nutz Flex seit gut nem halben Jahr in verschiedenen Kundenprojekten, aber jeweils natürlich mit nem notdürftigen Fallback für IE8 bzw., für IE9, auf Legacy-Flexbox

außerdem sagte ich ja:
display:flex;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;

Problem gelöst.

Suche

lordg2009

Lt. Commander

Daaron

Fleet Admiral

lordg2009

Lt. Commander

Suxxess

Admiral

lordg2009

Lt. Commander

Daaron

Fleet Admiral

lordg2009

Lt. Commander

Daaron

Fleet Admiral

lordg2009

Lt. Commander

Daaron

Fleet Admiral

Ähnliche Themen