nicht angemeldet
Text in <div> vertikal zentrieren?
Hallo Leute,
vielleicht müssen mir ja nur die Augen geöffnet werden, und ich bin heute tatsächlich zu doof und sollte lieber Feierabend machen:
Aufgrund barrierefreier Richtlinien darf ich keine Tabelle benutzen, ich möchte nun in einem über eine CSS-Datei definierten Layer (<div>...</div> ) Text vertikal zentrieren, also so, wie es in Tabellenzellen mit "vertical-align: middle;" tadelos funktioniert, beim Layer streiken meine Browser aber - wo liegt mein Fehler oder wie ist es zu lösen? Bedingungen: barrierefrei (also ohne Tabellen als Stilmittel einzusetzen) und XHTML 1.0-konform:
Hier die Beschreibung des Layers in der CSS-Datei:
#Kundenzugang {
position: absolute;
width: 214px;
height: 44px;
top: 264px;
z-index: 2;
left: 0;
background-color: #FFCF31;
text-align: center;
vertical-align: middle;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
color: #336600;
background-image: url(../images/background_tiles.png)
}
...und hier die Layerdefinition im HTML-Bereich:
<div id="Kundenzugang">
Kundenzugang
</div>
Was mache ich falsch?
Vielen Dank!
Kim
-
Hallo Kim,
Aufgrund barrierefreier Richtlinien darf ich keine Tabelle benutzen,
Was hat denn das eine mit dem anderen zu tun?
ich möchte nun in einem über eine CSS-Datei definierten Layer (<div>...</div> ) Text vertikal zentrieren, also so, wie es in Tabellenzellen mit "vertical-align: middle;" tadelos funktioniert,
Geht nicht. Einizge Möglichkeit wäre evtl. ein zweites <div> noch da rein bringen und dieses zweite <div> genauso hoch wie den Inhalt machen und dann mittels position: absolute;, top: 50%; und margin-top: -Ypx; (wobei Y die halbe Höhe ist) in die Mitte zu bringen. Oder Du könntest display: table-cell; auf das <div> anwenden, was im IE nicht funktioniert.
Viele Grüße,
Christian-
Hi,
Geht nicht. Einizge Möglichkeit wäre evtl. ein zweites <div> noch da rein bringen und dieses zweite <div> genauso hoch wie den Inhalt machen und dann mittels position: absolute;
Hilfe! Gib doch bitte nicht so dumme Tips weiter.
line-height:44px; und der "Kundenzugang" ist vertikal zentriert.Andererseits habe ich unter dem Aspekt der Barrierefreiheit eine kritische Anmerkung bezüglich der absoluten Positionierung vermißt. Ist denn wirklich sichergestellt, daß es zu keinen Textüberlagerungen kommt? Auch nicht bei Schriftvergrößerung?
freundliche Grüße
Ingo
-
-
Hallo,
Aufgrund barrierefreier Richtlinien darf ich keine Tabelle benutzen,
Man kann die Richtlinien (WCAG, BITV) auch falsch verstehen.
Zumindest fuer tabellarische Daten sind Tabellen immer noch sinnvoll...Und wenn man z.B. die WCAG 1.0 genau liest, sieht man, dass
selbst Layout-Tabellen grundsaetzlich erlaubt sind.Und auch mit CSS-Layouts kann man Seiten machen,
die eine schlechte Accessibility und Usability haben...Fuer weitere Details durchsuche doch mal das </archiv/> nach
den Stichworten
molily Layout-Tabellen barrierefreiheit
;-)ich möchte nun in einem über eine CSS-Datei definierten Layer (<div>...</div> ) Text vertikal zentrieren, also so, wie es in Tabellenzellen mit "vertical-align: middle;" tadelos funktioniert, beim Layer streiken meine Browser aber
Zu Recht.
vertical-align ist nur fuer Inline-Elemente und Tabellenzellen definiert:
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align
Applies to: inline-level and 'table-cell' elementsDu koenntest versuchen, den DIV zu einem Inline-Element zu machen:
#kundenzugang { display:inline; vertical-align:middle; }
oder aber, ihn zu einer "Tabellenzelle" zu machen.
Wenn er in einem Element steht, das man zur "Tabelle" gemacht hat,
funktioniert das - zumindest in Mozilla:
http://www.tiptom.ch/homepage/bsp/divzentriert.html
MS IE bis 6.0 kann das offenbar selbst dann nicht, wenn
man drei DIVs verwendet ("Tabelle", "Zeile", "Zelle"):
http://www.tiptom.ch/homepage/bsp/divzentriert2.htmlGruesse,
Thomas
--
Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/ -
@ Thomas: SUPER! Vielen Dank für Deine ausführliche, professionelle Antwort und die darin investierte Zeit!
Mein Chef hat mich wohl zu sehr geimpft, Tabellen nicht benutzen zu dürfen.
Ich werde es a) beherzigen und b) weitersagen :-)Danke natürlich an Christian!
Schönes Wochenende!
Kim Schneider
Hallo Leute,
vielleicht müssen mir ja nur die Augen geöffnet werden, und ich bin heute tatsächlich zu doof und sollte lieber Feierabend machen:
Aufgrund barrierefreier Richtlinien darf ich keine Tabelle benutzen, ich möchte nun in einem über eine CSS-Datei definierten Layer (<div>...</div> ) Text vertikal zentrieren, also so, wie es in Tabellenzellen mit "vertical-align: middle;" tadelos funktioniert, beim Layer streiken meine Browser aber - wo liegt mein Fehler oder wie ist es zu lösen? Bedingungen: barrierefrei (also ohne Tabellen als Stilmittel einzusetzen) und XHTML 1.0-konform:
Hier die Beschreibung des Layers in der CSS-Datei:
#Kundenzugang {
position: absolute;
width: 214px;
height: 44px;
top: 264px;
z-index: 2;
left: 0;
background-color: #FFCF31;
text-align: center;
vertical-align: middle;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
color: #336600;
background-image: url(../images/background_tiles.png)
}...und hier die Layerdefinition im HTML-Bereich:
<div id="Kundenzugang">
Kundenzugang
</div>Was mache ich falsch?
Vielen Dank!
Kim