Kleines Positioinierungsproblem
GELight
- css
Frohe Ostern auch von mir nochmal an alle,
Ich hab mal ein kleines Problem, was mich gerade annervt, da sowas immer mehr Zeit kostet als das Erstellen einer reinen Technik... naja egal.
Ich hab mir eine kleine IconBar Klasse erstellt, welche einfach nur in einer Bar( DIV ) ein Icon +/oder eventuellen Text dazu anzeigt. Genau wie die IconBars von Win. Das Problem istmehr ein kleiner Schönheitsfehler, der mich stört.
http://gelight.de/01.gif ( Normal )
http://gelight.de/02.gif ( mit FireFox die Tabellenzellen zeigen lassen )
Ich habe also eine Tabelle verwendet um mein IconBild und meinen Text nebeneinander zu positionieren. Wie man aber sieht, klatscht er das Bild in der zelle an den oberen Rand. Üblicherweise wird aber bei Tabellen normalerweise der Inhalt immer schön vertikal MITTIG positioniert. Aus dem Grund habe auch eine Tabelle verwendet. ( Mit DIVs wird man da ja blöde irgendwie... :)
Wenn ich also das IconBild weg lasse, dann steht mein Text wunderbar mittig in der Höhe. Nehme ich es dazu, dann steht das Bild top-ausgerichtet und der Text "etwas" außermittig.
Wer kann mir da einen kleinen Tipp geben?
Ich hasse diese ekelhaften Darstellungen, wenn der Text auf der selben Grundlinie wie das Bild steht. Sieht einfach kacke aus... :)
Mario
Nachtrag:
Ich verwende den Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
.. und will diesen auch beibehalten, wenn es geht, da mein komplettes System und alle Klasse etc. auf diesem aufbauen.
Mario
Hallo Mario
Wenn ich also das IconBild weg lasse, dann steht mein Text wunderbar mittig in der Höhe. Nehme ich es dazu, dann steht das Bild top-ausgerichtet und der Text "etwas" außermittig.
Wer kann mir da einen kleinen Tipp geben?
Spiele mal mit den möglichen Angaben von [link:http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align]
für das IconBild selbst, oder gib ihm ein [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float:left]
, oder binde es nicht als img sondern als nicht wiederholtes passend positioniertes Hintergrundbild ein.
Auf Wiederlesen
Detlef