CSS: horizontal zentrieren

[markus lemcke]

hallo,

habe folgendes probiert:
<pre>
.Kasten{font-size:110%;font-family:Verdana, Arial, Helvetica,
sans-serif; color:white; background-color:#6098ff; width:80%;
border-style:solid;border-color:black;border-width:1; align:center}

...
div class="Kasten" align="center">
Besuch der Schule für Mode und industrielle Fertigungstechnik
/div>
</pre>

"kasten" soll horizontal in der mitte des Browserfensters sein, klappt aber nicht!

wie geht es richtig?

Gruß

Markus

[Falk Prüfer]

Hallo Markus,

man möge mich korrigieren und eines besseren belehren (da ich selbst an einer anderen Lösung interessiert bin , aber das verticalen zentrieren klappt vernünftig (und sicher) nur mit einer &lt;table&gt;<br>
&lt;table style="width:100%;height:100%;vertical-align:middle;"&gt;
&lt;tr&gt;&lt;td&gt;Das sollte jetzt vertical zentriert sein&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

Gruß Fal

[markus lemcke]

hi Falk,

ich wollte jetzt style-sheets-freak werden!
aber ich fürchte du hast recht, habe in meinem css-buch auch nichts gefunden! d.h. also, dass auf tabellen als "hilfsmittel" für das design, trotz css nicht verzichtet werden kann?

Gruß

Marku

[shadows]

Also ich habe die erfahrung gemacht, das eine anständige Positionierung nur mit Tabellen möglich ist. Die schwachsinnigen leute, die in so einem Rat sitzen und sich gedanken über tandarts machen, etc. sind vollig realitätsfremd.
Da soll die Seite gut für Behinderte interpretierbar sein, das aber das layout format manchmal von einem Designer pixelgenau vorgegeben wird das scheint die leute dann nicht zu interressieren. Beides lässt sich nach meiner erfahrung jedenfalls nicht unter den Hut bringen. Wenn jemand besseres weiß dann mir bitte bescheit geben. (Dann aber auch sagen wie es gemacht wird.) Ich würde ja gerne was behinderten gerecht programmieren, nur würden die Vorgaben wiederum das Design total zerstöhren, an das ich GEBUNDEN bin. Und in unserer heutigen Zeit ist ja leider Aussehen wichtiger als Funktion. Was ich schon für ein sch**** programmieren sollte, nur weils besser ausgesehen hat... (kopfschüttel). Das das ganze u.a. von der Logik (benutzerführung) völlig fürn A**** war, hat keinen interessiert

[markus lemcke]

Tach Shadows!

obwohl ich großer verfechter von barrierefreien webdesign und software bin, halte auch ich gewisse richtlinien für schwachsinn!
und das mit den tabellen wird nicht so heiß gegessen wie es gekocht wird. ich habe persönlichen kontakt zu blinden und die haben grundsätzlich nichts gegen tabellen, nur gegen <b>verschachtelte</b> Tabellen!
also eine ganz normale designtabelle aus optischen gründen ist in ordnung!

ich beschäftige mich gerade mit postionierung über css und da könntest die glatten wände hoch gehen! jeder browser kocht sein eigenes süppchen!

wenn du dich an diese richtlinien http://www.marlem-software.de/behindirh.html hälst und sie zu 80-90% erfüllst bist in sachen barrierefreiheit fein raus *augenzwinker*

meiner meinung nach darf es nicht darum gehen, den webprogrammierern felsbrocken zwischen den beine zu werfen, sondern es geht darum, um auf die probleme von menschen mit behinderungen aufmerksam zu machen!

bei vielen behinderten (ist bei mir auch so) läuft die hauptkommunikation übers internet und da ist es halt ärgerlich,
wenn ne seite wegen schlechter farbwahl oder fehlenden alt-tags oder anderes nicht "gelesen" werden kann!

Gruß

Marku

[Lars Kerschbaum]

Hier die Lösung für

CSS: horizontal zentrieren

CSS-Code:
#container { position:absolute; left:50%; top:1px; width:992px; margin-left:-496px; padding:0px; border:0px; }

XHTML-Code:
div id="container"
/div
(mit den Klammern drum herum, die man hier nicht einfach setzen kann, weil sonst der code geparst wird. - so ein nerv.)



Funktioniert mit allen Browsern!

Greetings Lar

[Falk Prüfer]

Hallo,

ein <b>position:absolute</b> ist aber nicht immer so doll Warum nicht ein einfaches <b>text-align:center;</b> ??

[Erik Raetz]

Hi, text-align:center geht laut Definition eigentlich nur bei Inline-Elementen, der IE kann es trotzdem.

Mozilla und Opera bedienen sich dagegen dem Margin, stellt man margin-left und right auf auto und für die Box eine Breite ein, so wird sie zentriert.

Hier der Code:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Die rote Box&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
#box {
width:200px;
margin:0 auto;
background:red;
color:white;
}
//--&gt;
&lt;/style&gt;

&lt;!--[if gte IE 5.0]&gt;
&lt;style type="text/css"&gt;
body {
text-align:center;
}
#box {
text-align:left;
}
&lt;/style&gt;
&lt;![endif]--&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="box"&gt;Lorem Ipsum.&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt