✔ Verschiedene Schriftgrössen horizontal oben ausrichten

[sra]

Hallo alle

Nachdem ihr mir letztes mal schon so gut helfen konntet, hoffe ich nun ein weiteres mal auf euer Fachwissen

Ich habe ein horizontales Menu, das ich mit vertical-align:top und padding-top:20px in einer Zelle (<td>) positioniere. Den gerade aktiven Menupunkt stelle ich in anderer Farbe und anderer Schriftgrösse dar, damit er schön hervorgehoben ist.

Mein Problem ist nun, dass das Menu sich am unteren Rand des aktiven (grösseren) Textes ausrichtet und nicht oben. Man sollte vom oberen "Rand" des Menupunktes (reiner Text) eine horizontale Linie ziehen können, und die anderen Menupunkte, obwohl nicht aktiv und daher von kleinerer Schrift, sollten auch an dieser Linie auserichtet sein. Ich hoffe ihr wisst wie ich das meine

Mit Ausrichten alleine geht es anscheinend nicht. Gibt es eine andere Möglichkeit? Im Photoshop würde ich den Effekt hinkriegen, indem ich eine "Grundlinienverschiebung" von -5px auf den aktiven Text legen würde. Gibt es etwas vergleichbares in CSS oder kann ich mir diese Idee abschminken?

Danke für eure Zeit
Gruss
sra

 

[Maik]

Hi,

könntest du uns mal einen Einblick in den Quellcode (HTML + CSS) gewähren?

 

[sra]

Hier der HTML Teil des Menus:

<div class="TopMenuItem">
	<span id="invtopmenu-Home" class="MenuItem">
	<a href="http://montana-international.cms1.ch/Home/tabid/716/Default.aspx">Home</a></span> 
</div>

und hier das css dazu:

.hdrMenu {
	height: 82px;
	color: #124E86;
	font-family: Arial Black, Helvetica, Sans-Serif;
	font-size:11pt;
	vertical-align: top;
	padding-top: 35px;
	padding-left: 25px;
}

dazu muss man vielleicht noch sagen, dass der obere (HTML) Code in einer Tabelle - in einem TD ist, das class="hdrMenu" gesetzt hat. Im Span Tag ist dann nur noch die Schriftgrösse drin.

//EDIT

Ich konnte das Problem lösen, indem ich das div und die spans alle position:relative gesetzt habe und dann bei currentItem top:7px angab.