<div> tag mit css zentriert ausrichten? Einstellungen

[tom1205]

Hallo!

Kann ich einen <div> tag welcher nicht die ganze seitenbreite ausfüllt mit hilfe von einem css code zetriert ausrichten?
Ich bekomms nur links oder rechts hin! Aber nie zenriert!

Oder gibts eine andere möglichkeit es zentriert auszurichten?

Gruß
Thomas

[saschapi]

Ich vermute du willst den kompletten Inhalt deiner Seite zentrieren?

1. Ansatz:

QUELLTEXT

#dein-div {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}

2. Ansatz:

QUELLTEXT

#dein-div {
width: 800px;
margin-left: auto;
margin-right: auto;
}

3. Ansatz (v. Olaf; s.u.)

QUELLTEXT

body{
text-align:center;
}
#dein-div {
width: 800px;
margin:0 auto;
text-align:left; /* kam dazu */
}

[edit]Ich würde den ersten Ansatz benutzen, denn ich meine beim zweiten gab es in einem älterne Browser probleme. Geschacksache kommt natürlich auch noch dazu...[edit]
ich würde doch eher den dritten Ansatz nutzen. Ist netter und hat nicht den von andi weiter unten erwähnten Fehler das bei kleinen Fenstern der Inhalt links raus läuft.

[smail]

Also ich bevorzuge die 2. Variante! Ich denke, mittlerweile können das auch alle relevanten Browser, sogar der IE 6 schafft das schon.
Ich bin der Meinung, dass man irgendwann nicht mehr auf "alte" Browser wie IE 5.5 Rücksicht nehmen sollte, weil das die saubere Programmierung - gerade bei älteren IE Bugs - erheblich behindert.

Hier mal eine Übersicht über die Marktanteile.

[saschapi]

Ich bin der Meinung, dass man irgendwann nicht mehr auf "alte" Browser wie IE 5.5 Rücksicht nehmen sollte, weil das die saubere Programmierung - gerade bei älteren IE Bugs - erheblich behindert.

Das sehe ich nicht so!
Zumal dann nicht wenn es eine saubere Lösung gibt, die auch noch bis IE5 funktioniert.
Und wenn genau in den 1.5 % (DAS IST JA WOHL NOCH RIESIG VIEL) der User "auf die man keine Rücksicht nehmen muss" ein potentieller Kunde der Seite steckt?

Zugegeben bei dieser Geschichte mag es noch mal egal sein ob die Seite linksbündig hängt oder zentriert, aber beim nächsten mal ist es dann vielleicht der Warenkorb der nicht angezeigt wird

Muss ja jeder selber wissen was er braucht, aber ich habe für meine Kunden schon den Anspruch, dass auf möglichst ALLEN Browsern läuft und wenn nicht 100%ig so wie ich es für aktuelle Browser plane, dann doch da wo es geht...

Für ältere IE Bugs gibt es übrigens Conditional Comments, dann ist da gar nix schwierig und braucht auch keine CSS Hacks. Und die meisten Sachen kann man schon dadurch ausschließen, dass man ordentlich und organisiert arbeitet (z.B. die Boxmodelfehler durch gute Verwendung von Margin/Padding).

ABER... Webdesign ist ja keine Demokratie und deshalb muss auch jeder nach seiner Facon selig werden und wissen was er für sich und seine Kunden verantworten kann.

[amk]

naja Sascha man muss es echt nicht übertreiben. an den IE 5.5 sollte man schon noch denken - da gebe ich dir recht. es laufen gewiss noch genug alte windoofs kisten und sowas ... aber der <=5.0er interessiert mich mitlerweile nicht mehr ...

"Und wenn genau in den 1.5 % (DAS IST JA WOHL NOCH RIESIG VIEL) der User "auf die man keine Rücksicht nehmen muss" ein potentieller Kunde der Seite steckt? "

naja naja ... irgendwann gibt es auch keine ersatzteile mehr für 20jahre alte autos. kein ersatzteilhersteller sagt sich, weil einmal in 3 jahren ne anfrage kommt, baue ich dieses oder jenes weiter. das ist nicht wirtschaftlich, geht einfach nicht.

auch die darstellung der medien als solches (werbung, tv allgemein) kann heute nicht so rüberkommen wie vor 20 jahren, nur weil vielleicht 1% potentieller kunden 1987 stehen geblieben ist.

wer nicht mit der zeit geht, geht mit der zeit. egal ob kunde oder dienstleister.

an was man auch denken sollte: alte technologie mit seiner arbeit zu unterstützen bedeutet auch irgendwo eine stagnation der entwicklung zu fördern. wer braucht schon einen neuen webbrowser wenn doch die neusten websites noch mit dem alten laufen?! gerade bei der ver-bug-ten geschichte der browser wäre es doch ein segen, wenn man langsam mal auf endlose testes, workarounds und hacks verzichten könnte.

[smail]

Sascha, versteh mich nicht falsch: Wo es mit akzeptablen Aufwand möglich ist, bin ich immer für Abwärtskompatibilität zu haben. Nur würde ich mir heute (anders als noch vor 1-2 Jahren) kein Bein mehr für den IE 5 ausreißen.

Man kann zwar keinen User "erziehen", aber vielleicht setzt ja irgendwann mal das Umdenken ein, auf neuere Browser umzusteigen, wenn immer mehr Seiten unschön aussehen...
Irgendwann gibt es einfach den Punkt, an dem man sich von den Altlasten verabschieden MUSS, über den Zeitpunkt kann man sicher streiten... vielleicht müssen es nicht 1,5% sein.



Apropos Warenkorb und Onlineshopping:
Laut der ard/zdf-Onlinestudie (bzw. direkter download) von 2006 nutzen nur rund 12% überhaupt Online-Shopping, bei Buch- und CD Bestellungen sind es gar nur 8%. Dies reduziert die kaufkräftige Kundengruppe bei rund 40 Mio Internet-Nutzern Anfang 2007 in Deutschland (und ich denke, das ist für viele hier die Hauptzielgruppe) auf ca. 4 Mio.
Nehmen wir weiterhin eine Gleichverteilung der Browsernutzung an, kommen wir bei 1,5% auf rund 60.000 IE 5 Nutzer. Immerhin eine noch beachtliche Zahl - das stimmt schon.

Andererseits würde ich den Online-Shoppern eine gewisse Technik-Affinität zusprechen wollen - und gerade diese geht wahrscheinlich den Nutzern des IE 5 ab (sonst hätten sie sicher den Browser mal aktualisiert), was die reale Nutzerzahl noch weiter reduzieren dürfte.

Ich frage mich wirklich, wer die typischen IE 5 Nutzer sind... Leider kenne ich dazu keine Statistik

Insgesamt sehe ich daher die "Gefahr" potenziell verlorener Online-Käufer als durchaus vertretbar an.

gerade bei der ver-bug-ten geschichte der browser wäre es doch ein segen, wenn man langsam mal auf endlose testes, workarounds und hacks verzichten könnte.

Da stimme ich Dir voll und ganz zu!!! Lasst uns einfach von einer bessern Browserwelt träumen, in der man keine Hacks oder Sonderbehandlungen mehr braucht!

[Olaf]

Puh, der arme Thomas

Ergänzung zum Vorschlag 2:

QUELLTEXT

body{
text-align:center;
}
#dein-div {
width: 800px;
margin:0 auto;
text-align:left; /* kam dazu */
}

IMHO läuft das in IE > 4, vielleicht sogar da

EDIT, puh das war knapp, das muss für den DIV natürlich wieder korrigert werden...

[saschapi]

Nun ja, wie ich erwähnt... Das ist so ein Thema wo es einfach keine "richtige" Meinung gibt.

Ich gebe Euch ja völlig Recht. Ganz meine Meinung. Aber ich wüßte einfach nicht warum ich ABSICHTLICH von 3 (Danke Olaf für die 3. Lösung ) Lösungen ausgerechnet die nehmen sollte die in einem alten Browser nicht so anzeigt wie ich das haben will. Das ist IMHO ähnlich seltsam wie diese super coolen "to cool for IE" Batches die man gelegentlich in Blogs sieht.
Das erinnert sehr stark an die Zeit des ersten Browserkrieges wo alle der Meinung waren sie könnten durch "Netscape-Banner" zugepflasterte Webseiten zeigen welchen Browser die Leute nutzen sollten und den Webdesignern die reale Situation letztlich egal war. Damals konnte man sicherlich auch nicht von mehr als Meinungen sprechen (und ich war da auch dabei).

Irgendwann gibt es einfach den Punkt, an dem man sich von den Altlasten verabschieden MUSS, über den Zeitpunkt kann man sicher streiten... vielleicht müssen es nicht 1,5% sein.

Es kommt sicherlich auf die Zielgruppe an und ich mag mit meinen ehrenamtlichen, fundraising und kirchen Kunden vielleicht etwas übervorsichtig sein. Auch sind meine Seiten nicht alle 1:1 unter IE 5 und 5.5 lauffähig.
Aber ich habe dennoch beide hier und teste bei den entsprechneden Seiten (s.oben) darunter.

Wir wollen doch nicht streiten... Auch nicht über den richtigen Zeitpunkt. Und das ist vermutlich eine nicht ganz so konsensfähige Sache wie ob man jetzt Javascript Events in onclick oder href setzt (stichwort: Funktionalität trotz abgeschaltetem JS). Deshalb:

OK, erzieht ihr mal die Internetnutzer um und irgendwann häng ich dann meine IE 5+'s an den Nagel (wie cool wäre es eigentlich wenn die 1,5% nur so Leute wie ich sind, die ihre Seiten damit testen und in wirklichkeite keiner mehr so einen Browser hat . Aber keine Sorge, ich kenne alleine zwei Menschen mit dem IE 5.5)

Man kann zwar keinen User "erziehen", aber vielleicht setzt ja irgendwann mal das Umdenken ein, auf neuere Browser umzusteigen, wenn immer mehr Seiten unschön aussehen...

Das kann ich allerdings wirklich nicht verstehen... Da kann ich nur sagen: NÖ!

[andi]

1. Ansatz:

QUELLTEXT

#dein-div {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}

dir ist aber auch klar, dass bei dieser variante bei einem browserfenster kleiner als 800px die website links abgeschnitten wird und somit (meist) unbrauchbar wird?
mag zwar bei 800 pixel breite noch unproblematisch sein, aber sobald er eine breitere seitenbreite haben möchte und benutzer mit kleineren auflösung die seite betreten gibts probleme.

mein lösungsweg ist wie jener von olaf:

für alle modernen browser und ie6 im standard-modus:

QUELLTEXT

#dein-div {
margin: 0 auto;
width: 800px
}

für ie 5+ per cc:

QUELLTEXT

body {
text-align: center;
}

#dein-div {
text-align: left
}

gruss andi

[saschapi]

dir ist aber auch klar, dass bei dieser variante bei einem browserfenster kleiner als 800px die website links abgeschnitten wird und somit (meist) unbrauchbar wird?

Das war jetzt die erste konstruktive Kritik daran... auf die ich schon gewartet hatte
Stischwort CC ist genau richtig...
Ich benutze auch ständig andere Lösungswege je nach Bedarf, Zielgruppe und Seite.

Wie so oft gibt es mehrere Wege zum Ziel... ist wie im OS (rechtsklick vs. Keyboardshortcuts).

[andi]

Das war jetzt die erste konstruktive Kritik daran... auf die ich schon gewartet hatte

sorry, konnte nicht früher, bin erst aufgestanden :-)

naja, von der flexibilität gibts noch einen zweiten kritikpunkt. willst du mal schnell die breite der seite ändern, müsst du mehr als nur die breite ändern. fällt zwar nicht so ins gewicht aber sollte auch noch erwähnt werden.

mir persönlich fallen keine nachteile von margin: 0 auto und zusätzlichem cc ein.

ansonsten gebe ich dir recht. viele wege führen zum ziel, man sollte einen anderen ansatz nicht gleich verschreien.



gruss andi

[saschapi]

mir persönlich fallen keine nachteile von margin: 0 auto und zusätzlichem cc ein.

Mir auch nicht, ändere also meine Empfehlung auch auf diese Variante... Meine Standardlösung ist viel zu hin und her gewurschtelt (warum Fenstergrößen abfangen?).

[saschapi]

sorry, konnte nicht früher, bin erst aufgestanden :-)

Puh, der arme Thomas wink.gif

Da Thomas hier neu im Forum ist wird er sicherlich, wenn er aufgstanden ist, etwas überrascht sein ob der ausführlichen und für ihne hoffentlich ergebnisreichen Diskussion.

Hoffentlich wollte er überhaupt das erfragen, was wir hier so ausführlich abgewägt haben

[STam]

kleiner OT Nachtrag:

Ich frage mich wirklich, wer die typischen IE 5 Nutzer sind...

Antwort: ca 60% der kleiner und mittelständischen Betriebe in der EU und den Ostblock-Staaten!
Bei Großbetrieben/Konzernen herscht noch der IE5.5 vor. Vielmals in IT-Umgebungen die durch TS/Citrix
geprägt sind besteht eine Affinität zum alten und ein allgemeiner Update Vorbehalt (Kosten/Aufwand, Schulung).

Das sind keine kleinen Benutzergruppen, zumal es sich in da auch um Entscheider handeln kann,
die in ihrem Arbeitsumfelnd sozusagen gebunden sind an diese (alten) Technologien.

Sumasumarum sollte es mE auch ausschlaggebend sein wen ich mit einer Präsenz im Internet erreichen will

Gruß

[amk]

für europa:

IE 6.x - 50,86
IE 7.x - 25,87
Firefox 1.x - 6,09
Firefox 2.x - 8,25
Mozilla - 5,11
AppleWebKit - 1,63
Opera 8 - 0,85
IE 5.x - 0,61

"Für seine regelmäßigen Browser-Analysen wertet ADTECH die Banneranfragen aus ganz Europa an den eigenen Adserver aus. Die vorliegenden Daten wurden für die Monate November 2006 bis Februar 2007 auf 4.000 Websites erhoben. Zur Auswertung kamen Milliarden von Banneranfragen, die vom Browser des Users an den Adserver übergeben und von diesem für die Bannerlieferung ausgewertet werden."

und die zahlen kann ich so in etwa bestätigen wenn ich mir die stats meines kunden NBK ansehe, mit zugriffen aus allen möglichen ländern ... also weltweit.

und klar ist die zielgruppe sehr wichtig!
wenn ich eine site vorwiegend für osteuropa oder schwellenländer etc. mache ist klar das ich mich nochmal an den IE5.0 oder darunter erinner

[tom1205]

Hallo!

Danke für eure Hilfe!

Ich find auch eure Diskussion interessant! Ich bin, obwohl ich nie einen älteren Browser als IE6 benutzt habe, (bin erst 15) auch der Meinung dass eine Website auch abwärtskompitabel sein sollte! Sie muss ja nicht unbedingt 100%ig gleich ausgegeben werden!

Danke noch mal für die Hlfe!

Gruß Thomas