zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Inhalt von Block-Elementen vertikal ausrichten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.07.2005, 12:41
Eks Eks ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2005
Beiträge: 3
Eks befindet sich auf einem aufstrebenden Ast
Standard Inhalt von Block-Elementen vertikal ausrichten

Hallo zusammen,

mir stellt sich folgendes Problem:
Ich möchte einen Link erstellen, welcher eine Höhe von 100% hat.
Nun soll der Linktext in dem Block-Element vertikal ausgerichtet werden (vertikal zentrieren).
Da die Höhe des Links variiert, kann ich dieses Problem nicht mit einem Padding lösen.
Leider funktioniert »vertical-align:middle« nur in Inline-Elementen und damit ich dem Link eine Höhe von 100% geben kann, muss ich diesen als »display:block« setzen.
Hier ein Beispiel, wo der Text noch vertikal ausgerichtet werden soll:
http://www.pro66.de/test/block_link.htm

Hier der entsprechende Code:
Code:
<style type="text/css">
BODY {
	padding: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
}
TABLE {
	width: 300px;
	height: 100px;
	margin: 0;
	padding: 0;
	border: 0;
}
TD {
	width: 100%;
	height: 100%;
}
A {
	display: block;
	width: 100%;
	height: 100%;
	padding-left: 10px;
	text-decoration: underline;
	font-weight: bold;
	color: #000;
}
A:hover {
	background-color: #7992B9;
	color: #FFF;
}
</style>
<table cellspacing="0">
	<tr>
		<td>Test Link</td>
	</tr>
</table>
Vielen Dank
Gruß
Eks
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.07.2005, 13:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Benutze mal die Suchfunktion des Forums oder scroll einfach ein bisschen runter. Dieses Thema ist gerade in den letzen Tagen öfters besprochen worden.

Robin
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.07.2005, 14:23
Eks Eks ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2005
Beiträge: 3
Eks befindet sich auf einem aufstrebenden Ast
Standard

Leider habe ich in der Suche nicht gefunden, außer Tipps mit »line-height«, die mir nichts bringen, da die Höhe 100% betragen soll, da sie variiert.
Mit einer »line-height« würde ich mich ja wie mit dem »padding« wieder festlegen, da das »line-height« ja nicht automatisch so hoch wird, wie die Zelle, in welcher der Link steht.

Ich suche also nur eine »vertical-align«-Lösung für Block-Elemente!

Gruß
Eks
Mit Zitat antworten
  #4 (permalink)  
Alt 19.07.2005, 15:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Helfen die Links unter http://www.xhtmlforum.de/viewtopic.php?t=4924 nicht weiter?

Ansonsten gilt bei CSS: Es gibt keine eingebaute Standard-Möglichkeit Elemente vertikal zu zentrieren, man kann nur durch diverse "Tricks" es so aus sehen als ob. Gerade bei Elementen dessen Höhe nicht bekannt ist, ist es äußerst schwierig.

Im Zweifelsfall gibt es immer die (alte) Möglichkeit eine einzellige Tabelle zu verwenden. Das ist ja "nur" strukturell unsauber, hat aber keine Zugänglichkeitsprobleme.

Oder wenn Dir der IE nicht so wichtig ist: Dem umgebenden Element "display: table-cell" geben und dann "funktioniert" auch vertical-align. Dem IE könnte man dann z.B. mit JavaScript und einem Expression auf die Sprünge helfen...

EDIT: Eine Google-Suche hat folgens zutage gebracht: http://www.jakpsatweb.cz/css/css-ver...-solution.html

Robin
Mit Zitat antworten
  #5 (permalink)  
Alt 19.07.2005, 16:13
Eks Eks ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2005
Beiträge: 3
Eks befindet sich auf einem aufstrebenden Ast
Standard

Das mit dem »table-cell« ist ne gute Idee. Für den IE funktioniert ja »inline-block«. Das hat den selben Effekt. Dann bräuchte ich halt nur zwei verschiedene Stylesheets.
Vielen Dank nochmal.

Gruß
Eks
Mit Zitat antworten
  #6 (permalink)  
Alt 20.07.2005, 10:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Eks
Für den IE funktioniert ja »inline-block«.
Seit wann? In welcher Version des IE? Habe ich etwas verpasst?



.
__________________
</ulle>
Mit Zitat antworten
  #7 (permalink)  
Alt 20.07.2005, 12:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von ulle
Zitat:
Zitat von Eks
Für den IE funktioniert ja »inline-block«.
Seit wann? In welcher Version des IE? Habe ich etwas verpasst?
Seit 5.5: http://msdn.microsoft.com/workshop/a...es/display.asp

Aber ich habe mich noch nicht näher damit beschäftigt, deshalb kann ich nicht sagen warum vertical-align darin "funktioniert", obwohl es nicht sollte...

Robin
Mit Zitat antworten
  #8 (permalink)  
Alt 20.07.2005, 13:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von RoToRa
Aber ich habe mich noch nicht näher damit beschäftigt, deshalb kann ich nicht sagen warum vertical-align darin "funktioniert", obwohl es nicht sollte...
Also bei mir funktioniert nichts dergleichen im IE6, hast Du ein Beispiel wie es bei Dir funktioniert......
__________________
</ulle>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
sidebar fixieren? florianhwm CSS 1 29.05.2009 17:23
div container vertikal unten ausrichten zitronenbaum CSS 4 24.05.2006 11:47
Div vertikal nach unten ausrichten emil CSS 2 12.08.2005 20:35
Inhalt ohne Tab. mittig horizontal u. vertikal ausrichten? otoo (X)HTML 9 06.08.2004 21:23
Fläche horizontal und vertikal ausrichten? Sukkulent (X)HTML 2 17.06.2004 21:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:29 Uhr.