30.10.2025, 16:46
Sprache ändern
Registrieren
Anmelden
Sie sind nicht angemeldet.
infinite
God
[erledigt] css: wie zwei divs zentrieren?
Dienstag, 10. Februar 2009, 22:25
nabend,
ansich ne einfache sache: ich hab zwei divs, die nebeneinander sind in ein container div gepackt und moechte das ganze jetzt horizontal zentrieren - soweit, sogut - im netz gibt es ja zahlreiche tools dafuer inkl IE hacks, aber komischerweise haben die alle keinen effekt
die divs sind nur mehr oder weniger zentriert, aber ein stueck zu weit links.
hier mal mein css:
total ist der container div, menu der linke und content der rechte. kann mir jemand verraten wie ich das ganze jetz zentriert bekomme?
danke,
messi
ansich ne einfache sache: ich hab zwei divs, die nebeneinander sind in ein container div gepackt und moechte das ganze jetzt horizontal zentrieren - soweit, sogut - im netz gibt es ja zahlreiche tools dafuer inkl IE hacks, aber komischerweise haben die alle keinen effekt
die divs sind nur mehr oder weniger zentriert, aber ein stueck zu weit links.hier mal mein css:
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
#total {
background: url(../img/bg.jpg) repeat-y;
margin: 0 auto;
width:980px;
}
#menu {
background: url(../img/logo_menu.jpg) 50% 0 no-repeat;
float: left;
font-size: 1.0em;
margin: 10px 0 0 0;
padding: 160px 10px 5px 10px;
text-align: left;
width: 200px;
color: #5b2300;
}
#content {
background-color: #5b2300;
color: #caa078;
float: left;
font-size: 0.9em;
font-style: normal;
margin-left: 0px;
padding: 10px;
width: 650px;
}
|
total ist der container div, menu der linke und content der rechte. kann mir jemand verraten wie ich das ganze jetz zentriert bekomme?
danke,
messi
cuto8
Full Member
RE: css: wie zwei divs zentrieren?
Mittwoch, 11. Februar 2009, 09:37
Wenn die html-Datei so aussieht:total ist der container div, menu der linke und content der rechte. kann mir jemand verraten wie ich das ganze jetz zentriert bekomme?
|
|
Quellcode |
1 2 3 4 |
<div id='total'> <div id='menu'>...</div> <div id='content'>...</div> </div> |
...sollte das so in deiner CSS-Datei aussehen:
|
|
Quellcode |
1 2 3 4 5 |
div#total{
...
margin:0 auto 0 auto;
...
}
|
infinite
God
Mittwoch, 11. Februar 2009, 10:00
jo:
http://boombule.com/test/example.html
http://boombule.com/test/style/style.css
danke,
infinite
edit: grad getestet cuto8 - leider keine veraenderung
http://boombule.com/test/example.html
http://boombule.com/test/style/style.css
danke,
infinite
edit: grad getestet cuto8 - leider keine veraenderung
Ani
God
Mittwoch, 11. Februar 2009, 13:13
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#total {
margin: 0 auto;
width:980px;
border:1px solid red;
}
#menu {
float: left;
font-size: 1.0em;
text-align: left;
width: 200px;
}
#content {
background-color: #5b2300;
color: #caa078;
font-size: 0.9em;
font-style: normal;
margin-left:200px;
}
|
so, bitte.
musst nur die Hintergrund Bilder wieder einbinden
das ganze läuft aber nicht im IE 6...
wennde das auch brauchst musste nochmal was sagen
crushcoder
God
Mittwoch, 11. Februar 2009, 14:21
die divs sind nur mehr oder weniger zentriert, aber ein stueck zu weit links.
width: 200px
+
width: 650px
macht zusammen 850px, nicht 980px.
#total ist mittig zentriert, aber die divs darin liegen links an #total an.
Mach #total kleiner, oder die Summe der beiden divs gleich der Breite von #total, und die divs sind mittig.
Gott hat die Welt ja nur in sieben Tagen erschaffen können, weil es keine installierte Basis gab.
Y0Gi
God
Mittwoch, 11. Februar 2009, 15:12
Wenn `margin: 0 auto;` zur horizontalen Zentrierung funktionieren soll, muss das Elternelement (in diesem Fall wohl `body`) `text-align: center;` haben.
Wenn ich deine Paddings addiere, komme ich auch auf 890px
Anbei noch ein paar Gratis-CSS-Tipps, weil mein Code-Styleguide-Artikel immer noch auf Halde liegt:
* CSS-Eigentschaften immer alphabetisch sortieren. So weiß man bspw. am Anfang einer längeren Definition, dass kein Rahmen (border) mehr kommt, wenn er nicht in den ersten Zeilen definiert wurde. Man weiß so auch einfach immer, was wo hin gehört und muss nicht erst überlegen, wo es besser hinpasst, wenn man etwa anfängt, Attribute von innen nach außen oder hinten nach vorne in Bezug auf die Darstellung zu sortieren.
* Bei zusammengesetzten Attributen, dessen Werte über die Position nicht im Uhrzeigersinn Seiten (top, right, bottom, left) bezeichnen (background, border, font-family etc.), die Attribute nach dem Namen der enthaltenen Attribute sortieren (z.B. border-color, border-style, border-width).
Und ja, ich vermute, dass du zumindest die erste Regel "normalerweise" auch befolgst, aber ich kenn dich doch
Wenn ich deine Paddings addiere, komme ich auch auf 890px
Anbei noch ein paar Gratis-CSS-Tipps, weil mein Code-Styleguide-Artikel immer noch auf Halde liegt:
* CSS-Eigentschaften immer alphabetisch sortieren. So weiß man bspw. am Anfang einer längeren Definition, dass kein Rahmen (border) mehr kommt, wenn er nicht in den ersten Zeilen definiert wurde. Man weiß so auch einfach immer, was wo hin gehört und muss nicht erst überlegen, wo es besser hinpasst, wenn man etwa anfängt, Attribute von innen nach außen oder hinten nach vorne in Bezug auf die Darstellung zu sortieren.
* Bei zusammengesetzten Attributen, dessen Werte über die Position nicht im Uhrzeigersinn Seiten (top, right, bottom, left) bezeichnen (background, border, font-family etc.), die Attribute nach dem Namen der enthaltenen Attribute sortieren (z.B. border-color, border-style, border-width).
Und ja, ich vermute, dass du zumindest die erste Regel "normalerweise" auch befolgst, aber ich kenn dich doch
infinite
God
Mittwoch, 11. Februar 2009, 15:31
oh man, in der tat, mit 890px klappts eins a.. danke!
und danke auch fuer die style tips jochen, ich bin einfach faul, aber das muss ich dir glaub ich ned sagen
und gleich noch ne frage, hab ein weiteres problem mit IE6:
http://boombule.com/test/example2.html
http://boombule.com/test/example3.html
im ff und ie7 ist alles ok, im ie6 gibt es jedoch folgendes problem: wenn der erste text nicht laenger als die hoehe des bildes ist, ist der abstand zwischen dem text/bild und dem neuen hellbraunen div zu klein. (example2). ist der text laenger als das bild, dann stimmt der abstand (example3)
wie kriege ich es hin, dass der abstand zwischen erstem text/bild <-> hellbrauner div & hellbrauner div <-> zweiter text/bild exakt gleich ist?
infinite
und danke auch fuer die style tips jochen, ich bin einfach faul, aber das muss ich dir glaub ich ned sagen
und gleich noch ne frage, hab ein weiteres problem mit IE6:
http://boombule.com/test/example2.html
http://boombule.com/test/example3.html
im ff und ie7 ist alles ok, im ie6 gibt es jedoch folgendes problem: wenn der erste text nicht laenger als die hoehe des bildes ist, ist der abstand zwischen dem text/bild und dem neuen hellbraunen div zu klein. (example2). ist der text laenger als das bild, dann stimmt der abstand (example3)
wie kriege ich es hin, dass der abstand zwischen erstem text/bild <-> hellbrauner div & hellbrauner div <-> zweiter text/bild exakt gleich ist?
infinite
crushcoder
God
Mittwoch, 11. Februar 2009, 15:55
Pah, paddings, ich wollte ja nicht gleich die Lösung geben, aber auf den richtigen Lösungsweg hinweisen *rausred*
Ins Blaue geschossen:
Du hast am p neben dem Bild ein margin-bottom angegeben. Solang das p kürzer als das Bild ist, kommt das garnicht zum tragen.
Ich würde dem div#kasten das als margin-top geben.
*rausred*Ins Blaue geschossen:
Du hast am p neben dem Bild ein margin-bottom angegeben. Solang das p kürzer als das Bild ist, kommt das garnicht zum tragen.
Ich würde dem div#kasten das als margin-top geben.
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »crushcoder« (11. Februar 2009, 15:59)
Gott hat die Welt ja nur in sieben Tagen erschaffen können, weil es keine installierte Basis gab.
TrOuble
God
Mittwoch, 11. Februar 2009, 19:18
Wenn `margin: 0 auto;` zur horizontalen Zentrierung funktionieren soll, muss das Elternelement (in diesem Fall wohl `body`) `text-align: center;` haben.
Quatsch. Wie kommst du denn da rauf? Einzige Voraussetzung ist, dass das Element welches zentriert werden soll eine Breitenangabe besitzt.
Gruß TrOuble
scorpionking
Senior Member
Mittwoch, 11. Februar 2009, 19:22
Quatsch. Wie kommst du denn da rauf? Einzige Voraussetzung ist, dass das Element welches zentriert werden soll eine Breitenangabe besitzt.
Wenn's mit dem IE auch funktionieren soll, ist das sehr wohl nötig. Der IE ignoriert das margin:auto zur Zentrierung nämlich fröhlich...
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »scorpionking« (11. Februar 2009, 19:23)
Zitat von »Die Insel (Film)«
"Was ist Gott?"
"Wenn du dir etwas unbedingt wünschst, und du schließt die Augen und bittest darum, ist Gott der Kerl, der dich ignoriert!"
TrOuble
God
Mittwoch, 11. Februar 2009, 19:34
Quatsch. Wie kommst du denn da rauf? Einzige Voraussetzung ist, dass das Element welches zentriert werden soll eine Breitenangabe besitzt.
Wenn's mit dem IE auch funktionieren soll, ist das sehr wohl nötig. Der IE ignoriert das margin:auto zur Zentrierung nämlich fröhlich...
Hier der Beweis:
http://simplyray.de/tmp/
Funktioniert einwandfrei im IE 6, IE 7, IE 8 beta 2 ... und komm mir jetzt NICHT mit dem IE 5.5!
Also wer auf den Browser noch optimiert hat den Schuss nicht mehr gehört. Der wird bei w3schools.com nicht mal mehr gelistet
Gruß TrOuble
scorpionking
Senior Member
Mittwoch, 11. Februar 2009, 19:53
Hier der Beweis:
http://simplyray.de/tmp/
Funktioniert einwandfrei im IE 6, IE 7, IE 8 beta 2 ... und komm mir jetzt NICHT mit dem IE 5.5!
Also wer auf den Browser noch optimiert hat den Schuss nicht mehr gehört. Der wird bei w3schools.com nicht mal mehr gelistet
Gruß TrOuble
Hm, bei selfhtml steht's halt anders drin (http://de.selfhtml.org/css/layouts/mehrspaltige.htm, kurz vor "Dreispaltige Layouts"), aber wenn's auch so funktioniert, passt's ja...
"Was ist Gott?"
"Wenn du dir etwas unbedingt wünschst, und du schließt die Augen und bittest darum, ist Gott der Kerl, der dich ignoriert!"
TrOuble
God
Mittwoch, 11. Februar 2009, 19:55
Hier der Beweis:
http://simplyray.de/tmp/
Funktioniert einwandfrei im IE 6, IE 7, IE 8 beta 2 ... und komm mir jetzt NICHT mit dem IE 5.5!
Also wer auf den Browser noch optimiert hat den Schuss nicht mehr gehört. Der wird bei w3schools.com nicht mal mehr gelistet
Gruß TrOuble
Hm, bei selfhtml steht's halt anders drin (http://de.selfhtml.org/css/layouts/mehrspaltige.htm, kurz vor "Dreispaltige Layouts"), aber wenn's auch so funktioniert, passt's ja...
Ja. Stimmt ja auch so _eigentlich_
Also damit der IE 5.5 das korrekt anzeigt wird text-align:center auf dem parent-elemnt benötigt. Aber mal ehrlich: die Zeile kann man sich getrost sparen 
Ähnliche Themen
-
Software, allgemein »-
CSS - DIV vertikal zentrieren
(29. August 2008, 17:41)
-
- Software, allgemein »
-
[erledigt] merkwuerdiges css problem
(26. August 2008, 23:57)
-
- Software, allgemein »
-
Web: zentrieren
(6. September 2004, 23:53)
-
- Software, allgemein »
-
Wie Listen in Html zentrieren?
(30. Oktober 2003, 18:29)