Zur Navigation

<div>-Layer in CSS zentrieren [4]

31 Poly (Gast)

Auch ich möchte DANKE sagen :)
Was mir anfangs noch fehlte als ich diese Lösung probierte war die fest angegebene breite, doch als ich die Kommentare durchging wurde auch das erwähnt und es funktioniert nun. Meine erste DIV/CSS Seite ist nun also im aufbau :) (vorher immer mit tables)

Greetz
Poly

17.05.2007 00:39

32 White-Gandalf (Gast)

Noch ein Problem-Variante bzw. ein Detail, welches hier noch nicht beachtet wurde:

(Im folgenden sollen die Klassen-Namen die Bedeutungen der Elemente beschreiben...)

<div class="äußerer Rahmen" style="text-align: center">

<div class="positionier-rahmen" style="position:relative; margin: auto; width: auto">

<div class="basis-layer mit bild"><img src="irgendwas"></div>
<div class="overlay-layer" style="position:absolute; top: irgendwo; left: irgendwo"><img src="irgendein icon"/></div>

</div>

</div>

Hier möchte ich nun, daß der "positionier-rahmen" samt Inhalt im übergeordneten Container ("äußerer Rahmen") zentriert wird.

Das ist - wie es aussieht - unmöglich bei Anwendung aller hier soweit diskutierten Regeln (namentlich unter Verwendung von "margin: auto" und "text-align: center").

Wenn wir uns mal den Spaß machen, alles mit verschiedenfarbigen borders auszustatten, sehen wir nämlich, daß die "margin" überhaupt nicht vergeben wird: Der Container "positionier-rahmen" behält hartnäckig sein Null-Margins und sein 100% width bei.

Nur genau solche Elemente, die INNERHALB dieses Containers liegen und außerdem vom INLINE-Typ sind, ERSCHEINEN so, als ob sie korrekt mittig positioniert wären - weil sie offenbar die beiden Attribute "margin: auto" und "text-align: center" von den übergeordneten Ebenen erben.
DAS hat aber nichts mit dem Sinn des Attributs "margin" für das Element, AN DEM es definiert wird, zu tun.
Und leider auch nichts mit dem Sinn seiner Anwendung hier...

Also: Wenn man FÜR ein Element eine "margin" definiert, sollte man doch annehmen können, daß eben die "margin" DIESES Elements beeinflußt wird, oder? - Wobei der Fakt, daß die margin auf innere Elemente vererbt wird und diese dann gegebenenfalls zentriert erscheinen, mir vollkommen Schnuppe ist: Ich will nämlich, daß das "irgendein icon", welches in Bezug auf den nächst übergeordneten Layer mit "position" ungleich "static" bezogen positioniert wird, denselben Bezugspunkt wie das "irgendwas"-Bild hat.

Was bisher nicht gelingt.

DAS ändert sich, und zwar GENAU DANN, wenn die margins des "positionier-rahmen" NICHT MEHR "auto" sind, sondern IRGENDETWAS definiertes ODER wenn die "width" dieses Containers absolut vorgegeben wird.

DANN hat der Container "positionier-rahmen" plötzlich margins...

DAS aber wiederum stößt sich damit, daß ich vermeiden möchte, die Breite des inneren Bildes "irgendwas" korrekt angeben zu müssen.

Bzw. um etwas genauer zu sein: Ich möchte, daß die Leute, die die Vorlage anwenden und deren IQ zwar zum unerlaubten Installieren von Ballerspielen, nicht aber zum füllerfreien Aufbrechen eines Satzes in deutscher Sprache ausreicht, nicht gezwungen sind, die korrekte Breite jenes Bildes vorzugeben. (Oder um noch genauer zu sein: Meine Chefs möchten, daß ich jenen Leuten ermögliche, zu dumm dafür zu sein, und die Leute haben bisher tatsächlich bewiesen, daß sowas wie ne Bildbreite korrekt einzustellen für sie ungefähr das Niveau einer Doktorarbeit haben würde...)


Gibt es eine Idee, wie unter diesen Umständen korrektes Zentrieren erreicht werden kann?

02.08.2007 16:41

33 White-Gandalf

Um es besser nachvollziehen zu können:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="content-script-type" content="text/javascript">
	<meta http-equiv="content-style-type" content="text/css">
	<meta http-equiv="content-Language" content="de">
</head>
<body>

SOLL mit CSS (meilenweit daneben):
<div style="border: 1px solid black; text-align: center">
	<div style="border: 1px solid blue; margin: auto; width:auto; position: relative">
		<span style="border: 1px solid red; ">testtext<br/><br/>testtext<br/><br/>testtext<br/></span>
		<div style="position: absolute; top: 20px; left: 10px; ">Overlay-Text</div>
	</div>
</div>
<br/>
<br/>

IST mit CSS (mit Krücken korrekt - soweit die innere Breite bekannt wäre und korrekt angegeben werden könnte;
hier mal als Beispiel mit einem Restfehler):
<div style="border: 1px solid black; text-align: center">
	<div style="border: 1px solid blue; margin: auto; width: 100px; position: relative">
		<span style="border: 1px solid red; ">testtext<br/><br/>testtext<br/><br/>testtext<br/></span>
		<div style="position: absolute; top: 20px; left: 10px; ">Overlay-Text</div>
	</div>
</div>
<br/>
<br/>

IST mit TABLE (immer korrekt):
<table style="border: 1px solid black; border-spacing: 0; "><tr><td width="50%"></td><td style="padding: 0">
	<div style="border: 1px solid blue; position: relative">
		<span style="border: 1px solid red; ">testtext<br/><br/>testtext<br/><br/>testtext<br/></span>
		<div style="position: absolute; top: 20px; left: 10px; ">Overlay-Text</div>
	</div>
</td><td width="50%"></td></tr></table>
<br/>
<br/>

</body>
</html>

02.08.2007 17:27

34 White-Gandalf

Ach ja: Mit der Tabelle hat sich das Problem natürlich erstmal für mich erledigt.

Allerdings begegne ich immer wieder Leuten, die behaupten, man könne ganz auf Tabellen verzichten, während mir im Alltag immer wieder Dinge begegnen, die sich auf keinen Fall mit dem derzeitigen CSS2 erledigen lassen, mit Tabellen aber "schon immer" gingen.

Meine Frage in diesem Sinne bleibt also: KANN man hier die Tabelle (unter Einhaltung der Vorgaben meines Geldtranspirators) ersetzen?

02.08.2007 19:16

35 Jörg

Hallo White-Gandalf,

der auto Wert bei einem Blockelement enspricht per definitionem immer 100% - die Ränder erhalten dann automatisch nur noch 0%; in CSS 2.1 kann das entsprechende Element mit der Angabe display:inline-block aber dazu bewegt werden, sich in Bezug auf die Breite nicht mehr wie ein Blockelement zu verhalten. Opera und Konqueror setzen dies bereits um, Firefox aber wohl erst in Version 3, wie ich an anderer Stelle gelesen habe? Und beim IE muss man wohl auch noch warten...

Eine Möglichkeit, den width-Wert auf andere Weise an den Inhalt der Kindelemente anzupassen, kenne ich für die derzeitig gängigen Browser leider nicht, aber vielleicht weiß jemand anders noch eine Lösung

02.08.2007 21:22

36 Rudy

display:inline-block gibt es in Firefox schon, aber leider nur als propietäre Eigenschaft display: -moz-inline-box;
Auch wenn propietäres CSS (egal ob von MS oder Mozilla) bäh bäh ist, bietet Mozilla dieses wenigstens klar ausgezeichnet durch Prefixing - und viele dieser Extensions werden voraussichtlich in künftigen CSS-Versionen, klarerweise unter anderem Namen, zum Standard werden (wie z.B. auch die rounded corners, Teil der CSS3-Spezifikation).
In diesem konkreten Fall hier sehe ich das so: Opera und IE haben inline-block, dann macht es nicht viel aus, für den Firefox vorerst -moz-inline-box zu verwenden. Der Fx3 kommt bestimmt :)

Edit:
Zitat von Jörg
Und beim IE muss man wohl auch noch warten...
Ich glaube IE hat das schon, sogar allen voraus:

... this is provided by the CSS 2.0 inline-table or the CSS 2.1 inline-block display values. One or both is/are supported by IE5.5+, Opera5+, iCab and KHTML browsers (Safari, Konqueror). MS Internet Explorer first introduced inline-block as a proprietary extension in IE5.5.
Quelle

02.08.2007 21:59 | geändert: 02.08.2007 22:10

37 White-Gandalf

Danke für die Hilfe und Erläuterung!

Hmmm, also: Wenn ich diese Eigenschaft "display: -moz-inline-box;" im blau umrandeten Element einsetze (und mit Firefox 2.0.0.5++ betrachte), entsteht folgendes:

1. Die Wirkung von "position: relative" wird aufgehoben. (Das kann ich durch einen weiteren extra Rahmen kompensieren.)

2. Die Darstellung ist mit Fehlern behaftet: Border und mindestens eine Margin werden falsch berechnet/verarbeitet.

Beides (und letzteres insbesondere) sind Umstände, welche die CSS-Formulierung so noch nicht anwendbar erscheinen lassen.
Sehen wir in einem halben Jahr nochmal, was sich bis dahin geändert hat... Einschließlich Umstellungszeiträumen werden aber wohl noch mindestens gut 2 Jahre ins Land gehen, bevor in diesem Fall auf Tabellen verzichtet werden kann.

Der Umstand, daß verschiedene Browser verschiedene Maßnahmen erfordern, ist dagegen kein Hindernis: Darauf haben wir uns eh schon immer eingestellt, und das wird wohl wie's aussieht auch in alle Ewigkeit so bleiben.

03.08.2007 11:10

... 2 Jahre später ...

38 Natalie (Gast)

vergesst nicht mittels universalselektor, die browsereigene CSS auszuschalten!

* {margin: 0px; padding: 0px; border: 0px}

08.08.2009 13:46

... 1 Monat später ...

39 Firesheep

Ich ich hab ein Problem ich versuche Container mittig zu zentrieren so dass wenn man den Browser breiter oder schmaller macht zentriert bleibt bei den Header ist das der Zentriert ist , aber bei den anderen nicht

<html>
<title>Div Container </title>
<head>
<style type="text/css">

<!--


body{

}



#divHeader{
position: relative;
background-color: FFFF00;
height: 160;
width: 980;
text-align: center;
margin: auto auto;


}

#divNavi{
position: relative;
background-color: #FF0000;
height: 900;
width: 180;
margin: auto auto;
float: left;

}

#divcontent {
position: relative;
background-color: #4682b4;
height: 900;
width: 800;
margin: 0px 0px 0px 180px ;




}

#divfooter
{
position: relative;
background-color: #9acd32;
height: 60;
width: 980;
text-align: center;
float: left;

}



-->
</style>
</head>
<body>
<div style="margin:auto">
<div id="divHeader"><h1>Herzlich Willkommen</h1></div>
<div id="divNavi">
<p>Startseite</p>
<p>Programm</p>
<p>Stadtplan</p>
<p>Hintergrund</p>
<p>Kontakt</p>
</div>
<div id="divcontent">Guten Tag</div>
<div id="divfooter">Diese Seite ist mein versuch</div>
</div>
</body>
</html>

09.09.2009 08:31 | geändert: 09.09.2009 09:01

40 Jörg

Ich ich hab ein Problem ich versuche Container mittig zu zentrieren so dass wenn man den Browser breiter oder schmaller macht zentriert bleibt bei den Header ist das der flaa aber bei den anderen nicht

Den Satz habe ich nicht ganz verstanden?

Dem Codebeispiel zufolge möchtest du aber wohl erreichen, dass neben dem Header auch die anderen Seitenelemente zentriert werden?

Dazu musst du dem äußeren Container eine feste Breite geben:

<body>
<div style="margin:auto; width:980px">
<div id="divHeader"><h1>Herzlich Willkommen</h1></div>

09.09.2009 08:49