CSS: div horizontal auf seite platzieren

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

18.04.2004 - 12:28

Hey,

Sicher die ärgere deppenfrage, aber egal

Folgendes habe ich:

Code: PHP

.box{
border: 1px solid grey;
background-color: #E0E0E0;
text-align: center;
margin: 5px;
padding:2px;
}

mit <div class="box"> wird das ganze eingebaut.
Ich hätte gerne, dass sich dieses <div> dann so verhält wie <div class="box" align="center">

Gibt es dafür einen entsprechenden css befehl, oder geht es einfach nicht?

*tia*

Christoph

Bearbeitet von Maehmann am 18.04.2004, 12:52

mat

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25429

18.04.2004 - 12:33

ähm..

css -> text-align: center
html -> align="center"

also sollte dein "code" passen

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

18.04.2004 - 12:42

Mit text-align: center richtet er aber nicht den ganzen div block aus sondern den text im div block.

Ich hät gern, dass der ganze block mittig steht (wenn er nur 70% breit ist zB) ... solang er 100% Breite hat, ist es ja egal.

flaimo

ILFTKYS

Registered: Dec 2001
Location: ask a ninja
Posts: 872

18.04.2004 - 12:48

Code: PHP

#mybox {
    width: 400px;
    margin-right: auto;
    margin-left: auto;
    background: red;
}

Code: PHP

<div id="mybox">
    Hello World
</div>

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

18.04.2004 - 12:51

BIG THX ... genau das wars

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

18.04.2004 - 12:54

ah, darn, an margin:auto; hatte ich auch schon lang nicht mehr gedacht

, hab's bis jetzt dann immer mit tables gelöst

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

18.04.2004 - 12:58

Zitat von Spikx
hab's bis jetzt dann immer mit tables gelöst

hrhr ... me too ... aber ich hab mir vorgenommen auf meinen neuen Seiten keine tables mehr zu verwenden ... und dann hat man halt solche troubles

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4457

18.04.2004 - 14:36

FYI: margin: auto geht nicht < IE 6

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

18.04.2004 - 15:12

Zitat von Rektal
FYI: margin: auto geht nicht < IE 6

thx ... hast du eine lösung die auch mit IE5 funktioniert?
Wenn nicht, machts auch nichts, da es für einen internen Bereich verwendet wird und da alle IE6 oder Moz. verwenden.

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4457

18.04.2004 - 19:25

Sicher. IE < 6 macht den Fehler, bei text-align: center; Block-Elemte zu zentrieren. Du musst nur beruecksichtigen, dass text-align vererbt wird. Ultimativ sieht ein X-Browser Code dann so aus:

CSS:

Code:

.ie-center {
  text-align: center;
}
.center {
  margin: auto;
  text-align: left;
}

HTML:

Code:

<div class="ie-center">
  <div class="center">
    content
  </div>
</div>

Es gibt leut' die meckern, weil es redundanter Markup ist. Naja, schon wahr. Nur im vergleich, welche Redundanz frueher mit Tables getrieben wurde, ist das eine Muecke ...

Bearbeitet von Rektal am 18.04.2004, 19:27

Maehmann

OC Addicted

Registered: Aug 2002
Location: Vienna
Posts: 1110

19.04.2004 - 21:55

okidoki ... thx!

Ezekiel

OC Addicted

Registered: Jun 2001
Location: na
Posts: 3329

19.04.2004 - 22:00

was ist redunanz :confused:

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

19.04.2004 - 22:05

Redundanz: mehr als eigentlich notwendig

Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	18.04.2004 - 12:28 Hey, Sicher die ärgere deppenfrage, aber egal Folgendes habe ich: Code: PHP `.box{ border: 1px solid grey; background-color: #E0E0E0; text-align: center; margin: 5px; padding:2px; }` mit <div class="box"> wird das ganze eingebaut. Ich hätte gerne, dass sich dieses <div> dann so verhält wie <div class="box" align="center"> Gibt es dafür einen entsprechenden css befehl, oder geht es einfach nicht? tia Christoph Bearbeitet von Maehmann am 18.04.2004, 12:52
mat Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25429	18.04.2004 - 12:33 ähm.. css -> text-align: center html -> align="center" also sollte dein "code" passen
Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	18.04.2004 - 12:42 Mit text-align: center richtet er aber nicht den ganzen div block aus sondern den text im div block. Ich hät gern, dass der ganze block mittig steht (wenn er nur 70% breit ist zB) ... solang er 100% Breite hat, ist es ja egal.
flaimo ILFTKYS Registered: Dec 2001 Location: ask a ninja Posts: 872	18.04.2004 - 12:48 Code: PHP `#mybox { width: 400px; margin-right: auto; margin-left: auto; background: red; }` Code: PHP `<div id="mybox"> Hello World </div>`
Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	18.04.2004 - 12:51 BIG THX ... genau das wars
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	18.04.2004 - 12:54 ah, darn, an margin:auto; hatte ich auch schon lang nicht mehr gedacht , hab's bis jetzt dann immer mit tables gelöst
Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	18.04.2004 - 12:58 Zitat von Spikx hab's bis jetzt dann immer mit tables gelöst hrhr ... me too ... aber ich hab mir vorgenommen auf meinen neuen Seiten keine tables mehr zu verwenden ... und dann hat man halt solche troubles
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4457	18.04.2004 - 14:36 FYI: margin: auto geht nicht < IE 6
Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	18.04.2004 - 15:12 Zitat von Rektal FYI: margin: auto geht nicht < IE 6 thx ... hast du eine lösung die auch mit IE5 funktioniert? Wenn nicht, machts auch nichts, da es für einen internen Bereich verwendet wird und da alle IE6 oder Moz. verwenden.
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4457	18.04.2004 - 19:25 Sicher. IE < 6 macht den Fehler, bei text-align: center; Block-Elemte zu zentrieren. Du musst nur beruecksichtigen, dass text-align vererbt wird. Ultimativ sieht ein X-Browser Code dann so aus: CSS: Code: `.ie-center { text-align: center; } .center { margin: auto; text-align: left; }` HTML: Code: `<div class="ie-center"> <div class="center"> content </div> </div>` Es gibt leut' die meckern, weil es redundanter Markup ist. Naja, schon wahr. Nur im vergleich, welche Redundanz frueher mit Tables getrieben wurde, ist das eine Muecke ... Bearbeitet von Rektal am 18.04.2004, 19:27
Maehmann OC Addicted Registered: Aug 2002 Location: Vienna Posts: 1110	19.04.2004 - 21:55 okidoki ... thx!
Ezekiel OC Addicted Registered: Jun 2001 Location: na Posts: 3329	19.04.2004 - 22:00 was ist redunanz
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	19.04.2004 - 22:05 Redundanz: mehr als eigentlich notwendig

CSS: div horizontal auf seite platzieren

Forum Index > Software > Coding Stuff

Maehmann

mat

Maehmann

flaimo

Maehmann

Spikx

Maehmann

Rektal

Maehmann

Rektal

Maehmann

Ezekiel

Spikx