Element mit unbestimmter Breite horizontal zentrieren
Adriana Mikolaskova Nautsch
- css
Hallo,
kann mir bitte jemand schreiben, wie ich ein Block-Element horizontal zentrieren kann, wenn ich seine Breite nicht festlegen will?
(margin-left:auto, margin-right:auto wird 0, wenn ich keine Breitenangabe mache)
Danke und Gruss
Adriana Mikolaskova Nautsch
falls meine Beschreibung unklar ist, hier der Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<style type="text/css">
#footer{
border: 3px dotted #dedede;
}
#test {
border: 3px dotted #ff0000;
margin-left:auto;
margin-right:auto;
}
</style>
<head>
<title> </title>
</head>
<body>
<div id="footer">
<div id="test">testtext wird später durch mehrzeilige Elemente ersetzt</div>
</div>
</body>
</html>
Hallo Adriana.
kann mir bitte jemand schreiben, wie ich ein Block-Element horizontal zentrieren kann, wenn ich seine Breite nicht festlegen will?
(margin-left:auto, margin-right:auto wird 0, wenn ich keine Breitenangabe mache)
Du musst eine Breitenangabe machen. Wozu soll auch ein Rand gebildet werden, wenn das Element über die volle Breite geht?
Einen schönen Samstag noch.
Gruß, Ashura
Hallo Ashura,
danke!- vielleicht habe ich mein Problem zu sehr vereinfacht. Du hast natürlich Recht, dass ich eine Breitenangabe machen muss. Vielleicht ist der Aufbau völlig absurd, aber ich würde gerne einen Footer in eine Seite setzen, der horizontal zentriert drei div-Elemente mit mehrzeiligem Inhalt enthält. Die Breite letzterer div-Elemente möchte ich nicht festlegen.
Wie kann ich sie trotzdem zentrieren? (mit text-align:center hab ich es nicht geschafft...)
Auch Dir schönen Samstag und Gruss
Adriana Mikolaskova Nautsch
Ich habe diese Frage schon mal im Forum gestellt, aber keine Antwort bekommen (vermutlich weil zu kompliziert?- deshalb habe ich jetzt auch das Beispiel vereinfacht) http://forum.de.selfhtml.org/archiv/2005/7/t112276/
Hallo Adriana.
Vielleicht ist der Aufbau völlig absurd, aber ich würde gerne einen Footer in eine Seite setzen, der horizontal zentriert drei div-Elemente mit mehrzeiligem Inhalt enthält. Die Breite letzterer div-Elemente möchte ich nicht festlegen.
Hierfür würde ich drei per float formatierte Elemente in ein gruppierendes div-Elemente stecken, welches als eigentlicher Footer fungiert. Doch zentrieren ließen sich diese dadurch nicht.
Also habe ich dich richtig verstanden, dass die drei (div-)Elemente untereinander sich gegenseitig zentrieren sollen?
+---------------------------------------+
| +---+ +---+ +---+ |
|<---->| |<---->| |<---->| |<---->|
| +---+ +---+ +---+ |
+---------------------------------------+
Die mit <----> markierten Bereiche sollen also untereinander variabel sein?
Ich bezweifle, dass dies möglich ist.
Einen schönen Samstag noch.
Gruß, Ashura
Hallo Ashura,
Danke!
Also habe ich dich richtig verstanden, dass die drei (div-)Elemente untereinander sich gegenseitig zentrieren sollen?
+---------------------------------------+
| +---+ +---+ +---+ |
|<---->| |<---->| |<---->| |<---->|
| +---+ +---+ +---+ |
+---------------------------------------+Die mit <----> markierten Bereiche sollen also untereinander variabel sein?
nicht ganz: der Aufbau sieht in etwas so aus, wie von Dir skizziert, aber die drei div-Elemente sollen in der Mitte des gruppierenden Elementes sein.
Sie sollen unmittelbar nebeneinander sein, aber in der Mitte des gruppierenden Elementes.
+----------------------------------+
| +---++---++---+ |
|<------->| || || |<-------->|
| +---++---++---+ | +----------------------------------+
Es soll im Endeffekt gleich aussehen, wie wenn ich eine dreispaltige, mehrzeilige Tabelle auf der Seite zentriere. Da es sich aber um keine tabellarischen Daten handelt, wollte ich es mit divs umsetzen, habe aber eben das Problem, dass ich dann die Breite fest angeben müsste...
unten nochmals der Code (meines ersten Postings)
bald schönen Sonntag und Gruss
Adriana
Hallo Adriana.
Sie sollen unmittelbar nebeneinander sein, aber in der Mitte des gruppierenden Elementes.
+----------------------------------+
| +---++---++---+ |
|<------->| || || |<-------->|
| +---++---++---+ |
+----------------------------------+
Und was soll passieren, wenn der Inhalt der Blöcke Breiter als 1/3 ist?
Einen schönen Samstag noch.
Gruß, Ashura
Hallo Ashura,
Sie sollen unmittelbar nebeneinander sein, aber in der Mitte des gruppierenden Elementes.
+----------------------------------+
| +---++---++---+ |
|<------->| || || |<-------->|
| +---++---++---+ |
+----------------------------------+Und was soll passieren, wenn der Inhalt der Blöcke Breiter als 1/3 ist?
...vielleicht hab ich mich unklar ausgedrückt: es ist nicht wichtig, wie breit der Abstand von den drei div-Elementen zum Rand des gruppierenden Elements ist: die drei div-Elemente sollen im Zentrum sein, d.h. linker Abstand gleich wie rechter.
Deinen Vorschlag (mit 33%)habe ich auch schon ausprobiert und als Behelfs-Variante in Reserve, aber ich würde es lieber anders lösen, wenn möglich....
Gruss
Adriana
Hallo Adriana.
Und was soll passieren, wenn der Inhalt der Blöcke Breiter als 1/3 ist?
...vielleicht hab ich mich unklar ausgedrückt: es ist nicht wichtig, wie breit der Abstand von den drei div-Elementen zum Rand des gruppierenden Elements ist: die drei div-Elemente sollen im Zentrum sein, d.h. linker Abstand gleich wie rechter.
Das ist mir schon klar.
Aber egal wie du es anstellst, die Blöcke brechen um, wenn der Inhalt die maximale Breite von 1/3 überschreitet.
Darum fragte ich auch nach dem von dir gewünschten Verhalten in diesem Falle.
Deinen Vorschlag (mit 33%)habe ich auch schon ausprobiert und als Behelfs-Variante in Reserve, aber ich würde es lieber anders lösen, wenn möglich....
Ich weiß, schön ist sie nicht, aber momentan fällt auch mir nichts Besseres ein.
Einen schönen Sonntag noch.
Gruß, Ashura
nicht ganz: der Aufbau sieht in etwas so aus, wie von Dir skizziert, aber die drei div-Elemente sollen in der Mitte des gruppierenden Elementes sein.
Sie sollen unmittelbar nebeneinander sein, aber in der Mitte des gruppierenden Elementes.
+----------------------------------+
| +---++---++---+ |
|<------->| || || |<-------->|
| +---++---++---+ |
+----------------------------------+
Warum nicht so?
<div style="text-align:center">
<span> 1. Element </span>
<span style="margin:2px;"> 2. Element </span>
<span style="margin:2px;"> 3. Element </span>
</div>
Struppi.
Warum nicht so?
Weil es vorhin noch Block-Elemente mit unbekannter Breite waren.
Warum nicht so?
Weil es vorhin noch Block-Elemente mit unbekannter Breite waren.
Naja, da läßt sich ja was gegen machen:
<div style="text-align:center">
<div style="display:inline;"> 1. Element </div>
<div style="display:inline;margin:2px;"> 2. Element </div>
<div style="display:inline;"> 3. Element </div>
</div>
Struppi.
Hallo Struppi.
Warum nicht so?
Weil es vorhin noch Block-Elemente mit unbekannter Breite waren.
Naja, da läßt sich ja was gegen machen:
<div style="[code lang=css]text-align:center
">
<div style="display:inline;
"> 1. Element </div>
<div style="display:inline;margin:2px;
"> 2. Element </div>
<div style="display:inline;
"> 3. Element </div>
</div>[/code]
Bestünde aber noch immer die Frage, was passieren soll, wenn der Text breiter als 1/3 ist... (Hier wandern die folgenden Elemente natürlich auf die nächste Zeile.)
Einen schönen Montag noch.
Gruß, Ashura
Naja, da läßt sich ja was gegen machen:
<div style="[code lang=css]text-align:center
">
<div style="display:inline;
"> 1. Element </div>
<div style="display:inline;margin:2px;
"> 2. Element </div>
<div style="display:inline;
"> 3. Element </div>
</div>[/code]Bestünde aber noch immer die Frage, was passieren soll, wenn der Text breiter als 1/3 ist... (Hier wandern die folgenden Elemente natürlich auf die nächste Zeile.)
Soweit ich den Thread überschaut habe war bis jetzt nicht davon die Rede, das alle Breiche gleich breit sein sollen, oder?
Wenn ja dann ist float:left und width:33% doch eine gute Lösung.
Struppi.
Hallo Struppi.
Soweit ich den Thread überschaut habe war bis jetzt nicht davon die Rede, das alle Breiche gleich breit sein sollen, oder?
Wenn ja dann ist float:left und width:33% doch eine gute Lösung.
Sie möchte aber keine Breite angeben. Also wird der Inhalt wohl zwangsläufig immer umbrechen.
Einen schönen Montag noch.
Gruß, Ashura
Also ich finde die 33% (od eine andere Verteilung der Drittel) eine gute Lösung und verstehe nicht, warum sie unbedingt darauf verzichten möchte.
Was für einen Vorteil bringt das? Meiner Meinung nach eher Nachteile, weil früher oder später dadurch das Layout zerschossen wird. So ein Layout funktioniert eben nur mit Tabellen einwandfrei oder in Browsern (z.B. neuere Mozilla), die auch andere Elemente table-like darstellen können.
In diesem Falle würde ich einfach eine Tabelle verwenden Prozentwerte angeben oder zusätzlich etwas DOM-Javascript einsetzen...
Hallo Danny,
Also ich finde die 33% (od eine andere Verteilung der Drittel) eine gute Lösung und verstehe nicht, warum sie unbedingt darauf verzichten möchte.
Ich will nicht unbedingt drauf verzichten, aber mich hat's interessiert, ob es eine exakte Lösung gibt. Aber die Lösung mit den 33% ist schon gut brauchbar.
Was für einen Vorteil bringt das? Meiner Meinung nach eher Nachteile, weil früher oder später dadurch das Layout zerschossen wird. So ein Layout funktioniert eben nur mit Tabellen einwandfrei oder in Browsern (z.B. neuere Mozilla), die auch andere Elemente table-like darstellen können.
In diesem Falle würde ich einfach eine Tabelle verwenden Prozentwerte angeben oder zusätzlich etwas DOM-Javascript einsetzen...
Das Problem ist bei einer Website aufgetreten, die mit einem Tabellen-Layout aufgebaut ist und die ich auf möglichst konsequentes CSS-Layout umstellen möchte. An dieser Stelle war ich unsicher, ob ich das als Tabelle belassen, oder auch mit divs und css aufbauen soll. Mein vorläufiges Fazit ist, dass ich doch Breitenangaben mache, weil mir inzwischen auch die Nachteile meiner Vorstellung klar geworden sind...
Danke und Gruss
Adriana
Hi,
das funktioniert aber nur so lange, bis Du einen Zeilenumbruch drin hast... Dann kannst Du <span> od. <div style="display:inline"> vergessen, jedenfalls ohne zusätzliche Hacks.
MfG
Hallo Adriana.
Ich habe noch einmal etwas experimentiert und habe zwar eine Möglichkeit gefunden, doch zufriedenstellend ist sie noch nicht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Zentrierte Footer-Elemente</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
[code lang=css]html, body{margin:0;padding:0;height:100%;}
div#footer p{float:left;width:33%;border:1px dotted;text-align:center;}
div#footer p span{text-align:left;}
</style>
</head>
<body>
<div id="footer">
<p><span>Eine Menge Text zum Lesen, eine Menge Text zum Lesen</span></p>
<p><span>Eine Menge Text zum Lesen, eine Menge Text zum Lesen, eine Menge Text zum Lesen, eine Menge Text zum Lesen</span></p>
<p><span>Eine Menge Text zum Lesen, eine Menge Text zum Lesen</span></p>
</div>
</body>
</html>
[/code]
Ich wäre froh, wenn jemand eine bessere Lösung weiß.
Einen schönen Samstag noch.
Gruß, Ashura
Hallo Adriana,
mir ist leider auch keine einfache CSS-Lösung bekannt.
Etwas ähnliches hatte ich mal mit Javascript umgesetzt. Dabei liest man einfach die Maße der Bereiche aus und kann dann entsprechend flexibel zentrieren. Wäre das eine akzeptable Variante?
freundlichen Gruß
Danny