mittleres fenster / durchgehend
Björn
- css
Hallo,
kann mir jemand sagen wie ich ein layout wie dieses hier von der positionierung her hinbekommen kann?
es soll durchgehend 100% weite haben und mittig positioniert sein egal welche höhe es hat.
danke für tipps
B
sorry habe den linkvergessen
www.feinarbeiter.de/feinarbeiter/index.php
sorry habe den linkvergessen
www.feinarbeiter.de/feinarbeiter/index.php
Björn,
Und das schon wieder. Immer noch kein Link, lediglich ein Bruchstück eines URIs.
Hier ist ein Link: http://www.feinarbeiter.de/feinarbeiter/index.php
Und hier noch einer: http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden
Live long and prosper,
Gunnar
Hi Björn!
Mehr als im Quelltext steht, wirst du von uns auch nicht erfahren können.
Du bist bei _SELF_HTML.
MfG H☼psel
Mehr als im Quelltext steht, wirst du von uns auch nicht erfahren können.
Hopsel,
Aber hoffentlich doch! Im Quelltext erfährt er nämlich nur, wie man’s nicht macht: <center>
, verschachtelte Layouttabellen, …
Björn hatte ja schon CSS als Themenbereich gewählt, ich nehme mal an, er will wissen, wie das auch auf vernünftigem Wege zu erreichen ist.
Vertikale Zentrierung eines Blockelements geht genauso* wie horizontale mit foo {margin: auto;}
(und evtl.Angabe der Höhe). Dazu müssen die Elternelemente die Höhe 100% haben. Und wenn du denkst, body wäre das oberste Element, schau dir nochmal die Struktur im HTML-Code an.
Live long and prosper,
Gunnar
* unfähige Browser ausgeschlossen.
Hallo Gunnar.
Vertikale Zentrierung eines Blockelements geht genauso* wie horizontale mit
foo {margin: auto;}
(und evtl.Angabe der Höhe).
Kann ich nicht bestätigen.
Dazu müssen die Elternelemente die Höhe 100% haben. Und wenn du denkst, body wäre das oberste Element, schau dir nochmal die Struktur im HTML-Code an.
Habe ich.
* unfähige Browser ausgeschlossen.
Also zählen Opera 9, Fx 1.5 und Konqueror 3.3.2 zu den unfähigen Browsern?
Mein Versuch:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Vertically aligned?</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
[code lang=css]* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
div {
background:#09c;
height:20%;
margin:auto 0;
text-align:center;
}
</style>
</head>
<body>
<div>Vertically aligned?</div>
</body>
</html>[/code]
Einen schönen Donnerstag noch.
Gruß, Ashura
HI,
ok ich habe es jetzt so hinbekommen. Aber verstehen tue ich es nicht. Für mich ist das noch nicht logisch. Vielleicht kann mir jemand helfen was die erste <table> macht
<body>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%; font-family: Verdana; font-size: 1px;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="maintb">
<!--DWLayoutTable-->
<tr>
<td width="231" height="400"> </td>
</tr>
</table>
</td></tr>
</table>
</body>
.maintb {
width: 100%; height: 500px;
background-color: #FFFFFF;
}
Vielleicht kann mir jemand helfen was die erste <table> macht
Vertikale Zentrierung des Inhalts im td-Element: td {vertical-align: middle}
ist Default in Browsern.
Dummerweise gilt die Eigenschaft vertical-align nur für bestimmte Elemente. CSS2 §10.8
Auf diesem Weg lässt sich das vielleicht auch erreichen: display: table-cell
für das übergeordnete Element.
Live long and prosper,
Gunnar
Hallo Björn,
ok ich habe es jetzt so hinbekommen. Aber verstehen tue ich es nicht. Für mich ist das noch nicht logisch. Vielleicht kann mir jemand helfen was die erste <table> macht
die erste Tabelle bildet den Orientierungsrahmen für die zweite darin verschachtelte.
Vielleicht bringt dich dieses Beispiel auf einem andren Weg weiter.
Beste Grüsse
Richard
danke für eure Hilfe und beispiele. ich werde mir das morgen in ruhe mal zu gemüte führen. irgendwo ist da in meinem rechenzentruk ein denkfehler vorhanden.
take care
hi Gunnar,
ja genau darum ging es mir. die vertikale zentrierung kann ich mir leider nicht ableiten bzw. verstehen dafür ist mein css nich tief genug.
wenn ich dich richtig verstehe müssen die elternelemente 100% haben und werden adnn mit margin:auto zentriert?
ich verstehe es noch nicht ganz. im quelltext des links (wenn es dann ein link ist) finde ich keine margin zuweisung
sehr verwirrt
Björn
wenn ich dich richtig verstehe müssen die elternelemente 100% haben und werden adnn mit margin:auto zentriert?
Björn,
Nein, nicht die Elternelemente werden zentriert, sondern eben das, was zentriert werden soll, bekommt margin:auto. So dachte ich. Hab aber gerade keinen Browser zum Testen da und kann Ashuras Zweifel weder widerlegen noch bestätigen.
ich verstehe es noch nicht ganz. im quelltext des links (wenn es dann ein link ist) finde ich keine margin zuweisung
Eben. Da wurde es auch anders „gelöst“.
Live long and prosper,
Gunnar
Hi,
Nein, nicht die Elternelemente werden zentriert, sondern eben das, was zentriert werden soll, bekommt margin:auto. So dachte ich. Hab aber gerade keinen Browser zum Testen da und kann Ashuras Zweifel weder widerlegen noch bestätigen.
Spar's Dir. vertikale Zentrierung ist mit margin:auto nicht möglich. Deshalb ist es auch völlig Wurscht, ob Du ein Blockelement ohne voreingestellten margin horizonal über margin:auto oder margin:0 auto zentrierst.
was möglich ist - wenn die Elternelemente height:100% haben - ist z.B.:
height:60%; margin:20% auto;
freundliche Grüße
Ingo
Spar's Dir. vertikale Zentrierung ist mit margin:auto nicht möglich.
Danke, Ingo.
Ja, mein Fehler. In [CSS21 §10.3] ist nur die Rede von “If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”
Mit CSS 3 dürfte es irgendwann mal gehen: [CSS3-BOX §7].
Live long and prosper,
Gunnar
Hi,
Ja, mein Fehler. In [CSS21 §10.3] ist nur die Rede von “If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”
Natürlich. Warum sollte in einem Abschnitt, der sich mit "Calculating width and margins" beschäftigt, etwas über vertikale margins stehen?
Das steht natürlich unter "Calculating heights and margins" - also Abschnitt 10.6.
Mit CSS 3 dürfte es irgendwann mal gehen: [CSS3-BOX §7].
Unter Vergewaltigung der Schreibrichtung mag es dann in der Vertikalen gehen. Es geht aber nicht gleichzeitig für horizontal und vertikal.
Für positionierte Elemente wird dort auch nur auf ein CSS3-Modul verwiesen, zu dem noch nicht mal ein working draft veröffentlicht wurde ...
cu,
Andreas
Hi,
Vertikale Zentrierung eines Blockelements geht genauso* wie horizontale mit
foo {margin: auto;}
(und evtl.Angabe der Höhe).
Falsch.
Nachzulesen unter http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins
In fast allen Fällen bedeutet der Wert "auto" für margin-top bzw. margin-bottom, daß 0 verwendet wird.
Der einzige Fall, in dem das theoretisch funktionieren sollte, wäre:
Das Element ist absolut positioniert, top, bottom und height sind alle als nicht-auto angegeben, margin-top und margin-bottom sind auto.
IE macht's nicht. Opera 8.5 macht's nicht. Firefox 1.0.7 macht's nicht. Firefox 1.5RC2 macht's nicht. Konqueror 3.4.0 (unter Cygwin) macht's auch nicht.
Dazu müssen die Elternelemente die Höhe 100% haben.
Jedes Element hat exakt ein Elternelement. "die Elternelemente" ist also per se Unsinn.
"Vorfahrenelemente" wäre richtiger - aber bei absoluter Positionierung spielt sowieso nur das innerste Vorfahrenelement, dessen position nicht static ist, eine Rolle - also auch nur eins ;-)
cu,
Andreas