Darstellung von background-images innerhalb eines <a> Elemetes

[HoschMOsch]

hallo,

kann mir jemand sagen wieso bei dem untenstehendem code die <a> Elemente im Menu beim IE genau 42px hoch sind und beim FF nur so hoch wie der Text des Menues ?

ich verstehe es gerade garnicht

PS: die background-imgages sind übrigens genau 42px hoch.

<div id="head">  
		<div id="mainmenu" style="background-image:url('mainnav-ac.jpg'); background-repeat:repeat-x;">  
			###MAINMENU###<a href="universal-vorlage.html">Menu 1</a>&nbsp;<a href="universal-vorlage.html">Menu2</a>  
		</div>  
		<div id="logo">  
			###LOGO###  
		</div>  
	</div>  

  
#head {  
	background-image:url('header.jpg');  
	background-repeat:no-repeat;  
	height:260px;  
	position:relative;  
	  
}  
  
#mainmenu {  
	position:absolute; top:182px; left:10px;  
	height:42px;  
	text-align:center;  
}  
  
#mainmenu a{  
	 background-image:url('mainnav-no.jpg');  
	 background-repeat:repeat-x;  
	 height:42px;  
	 text-decoration:none;  
	 text-align:center;  
	 font-size:14px;  
	 color:black;  
}  
  
#mainmenu a:hover{  
	 background-image:url('mainnav-ro.jpg');  
	 background-repeat:repeat-x;  
	 height:42px;  
	 text-decoration:none;  
	 text-align:center;  
	 font-size:14px;  
	 color:black;  
}  
  
#mainmenu a:active{  
	 background-image:url('mainnav-ac.jpg');  
	 background-repeat:repeat-x;  
	 height:42px;  
	 text-decoration:none;  
	 text-align:center;  
	 font-size:14px;  
	 color:white;  
}  

[Bobby]

Moin

das A-Element ist von Haus aus ein inline-Element und ist nur so hoch wie sein Inhalt. Setze das Element auf display:block und du kannst die Größe bestimmen.

Gruß Bobby

[HoschMOsch]

danke für die schnelle reaktion!

hab dein vorschlag gestest und es funktioniert ganz wunderbar. nur hab ich jetzt ein Folgeproblem.

wenn ich display:block; benutze dann kann ich auch kein horizontales menu damit gestallten oder? die eigenschaft erzeugt doch automatisch ein umbruch, sprich ich bekomme ein vertikales menu.

[Bobby]

Moin

wenn ich display:block; benutze dann kann ich auch kein horizontales menu damit gestallten oder? die eigenschaft erzeugt doch automatisch ein umbruch, sprich ich bekomme ein vertikales menu.

beschäftige dich mit der CSS-Eigenschaft float.

Du kannst auch probieren das A-Element display:inline-block zu setzen. Allerdings kenne ich die Auswirkungen auf die Höhe nicht.

Gruß Bobby

[ChrisB]

Hi,

beschäftige dich mit der CSS-Eigenschaft float.

Und wende diese auf die LI der Liste an, in die du deine Navigation verpackst.
Die Links innerhalb der LI können dann wieder display:block bekommen.

MfG ChrisB

[Gunnar Bittersmann]

@@HoschMOsch:

nuqneH

kann mir jemand sagen wieso bei dem untenstehendem code die <a> Elemente im Menu beim IE genau 42px hoch sind und beim FF nur so hoch wie der Text des Menues ?

Weil 'height' bei nicht ersetzten Inline-Elementen ('a' ist ein solches) nicht wirkt. [CSS2 §10.5]

Qapla'

PS: Du plenkst.

[HoschMOsch]

@@HoschMOsch:

nuqneH

gude

Weil 'height' bei nicht ersetzten Inline-Elementen ('a' ist ein solches) nicht wirkt. [CSS2 §10.5]

ermm. ein nicht ersetzten Inline Element ? raff ich nicht

Qapla'

PS: Du plenkst.

[ChrisB]

Hi,

Weil 'height' bei nicht ersetzten Inline-Elementen ('a' ist ein solches) nicht wirkt. [CSS2 §10.5]

ermm. ein nicht ersetzten Inline Element ? raff ich nicht

Dann gebe dir ab jetzt bitte etwas mehr Mühe, dich über Dinge, die dir noch nicht bekannt sind, zu informieren - als nur "raff ich nicht" von dir zu geben.

Google: was ist ein nicht ersetztes inline element? - zweiter Treffer erklärt, was *ersetzte* Inline-Elemente sind. Den Umkehrschluss bekommst du vielleicht selber hin.

Und bitte gewöhne dir einen vernünftigeren Zitierstil an. Hier im Thread zitierst du entweder gar nichts (was deine Antwort dann unverständlich dastehen lassen kann), oder aber zu viel, nämlich auch Begrüssung und Verabschiedung des Vorposters.

MfG ChrisB

[Gernot Back]

Hallo ChrisB,

Google: was ist ein nicht ersetztes inline element? - zweiter Treffer erklärt, was *ersetzte* Inline-Elemente sind. Den Umkehrschluss bekommst du vielleicht selber hin.

Du weißt, ich schätze dein Fachwissen und dein Engangement hier im Forum sehr, aber sei doch mal ein bisschen gnädiger mit jemandem, der hier noch nicht so lange postet!

Ich halte die Frage, ob man den Unterschied zwischen "replaced inline elements" und "non-replaced inline elements" kennt, bei HoschMoschs Problem auch eher für einen Nebenkriegsschauplatz; du wirst ihm ja nicht allen Ernstes empfehlen wollen, seine "non-replaced" A-Elemente durch "replaced inline-elements" wie BUTTON- oder verlinkte Blind-Gif-IMG-Elemente zu ersetzen, nur um zugewiesene Hintergrundbilder darin exakt positionieren und dimensionieren zu können!

Die Eigenschaft display:inline-block, die jedes Element sich so verhalten lässt wie ein "replaced inline-element", wird ja z.B. im Firefox auch erst ab Version 3 unterstützt und deshalb ist wie Bobby schon schreibt einfach ein Floaten-Lassen der betreffenden Elemente die erste Wahl.

Gruß Gernot

[Der Martin]

Hallo Chris,

Google: was ist ein nicht ersetztes inline element?

bitte vergiss nicht, dass die Reihenfolge (oder auch das Auftreten überhaupt) von Google-Suchtreffern sehr vom Herkunftsland der Anfrage, von den Client-Einstellungen (Accept, Accept-Language, evtl. vorhandenes Cookie mit Google-Präferenzen) und anscheinend sogar vom verwendeten UA selbst abhängt.

zweiter Treffer erklärt, was *ersetzte* Inline-Elemente sind.

Das ist bei mir z.B. erst der dritte Treffer nach http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap10.html und books.google.de/books?isbn=3897213869. Eine Angabe wie "zweiter Treffer" ist daher nicht allgemeingültig. Nur gut, dass du den Treffer, den du meintest, nochmal konkret verlinkt hast.

Und bitte gewöhne dir einen vernünftigeren Zitierstil an. Hier im Thread zitierst du entweder gar nichts (was deine Antwort dann unverständlich dastehen lassen kann), oder aber zu viel, nämlich auch Begrüssung und Verabschiedung des Vorposters.

ACK.

Ciao,
 Martin

[ChrisB]

Hi,

bitte vergiss nicht, dass die Reihenfolge (oder auch das Auftreten überhaupt) von Google-Suchtreffern sehr vom Herkunftsland der Anfrage, von den Client-Einstellungen (Accept, Accept-Language, evtl. vorhandenes Cookie mit Google-Präferenzen) und anscheinend sogar vom verwendeten UA selbst abhängt.

Deshalb schreibe ich ja auch nicht nur "x-ter Treffer", sondern verlinke diesen auch (auch schon deshalb, weil sich das sicher wieder mal ändert, wenn der Thread hier erst mal eine zeitlang im Archiv ist).
Und ich würde auch auf keinen Treffer derart bezug nehmen, der erst auf der 27. Ergebnisseite bei Google steht.

Ob er aber aktuell und beim jeweligen Nutzer erster, zweiter oder meinetwegen auch erst siebter oder achter Treffer ist, ist ziemlich unerheblich - zum erfolgreich Suchen gehört nicht nur, sinnvolle Suchbegriffe zu wählen (resp. finden), sondern auch, die Treffer selber dann noch mal auszuwerten. Und auch das muss jemand, der's noch nicht kann, lernen.

MfG ChrisB

[Gunnar Bittersmann]

@@HoschMOsch:

nuqneH

ermm. ein nicht ersetzten Inline Element ? raff ich nicht

Hm, da wollte ich es dir einfach machen und hab die deutsche Übersetzung verlinkt. Im Original* sind Erklärungen zu „inline-level elements“ und „replaced“ verlinkt. (In der Übersetzung zu finden in 9.2.2 bzw.  3.1.)

Qapla'

PS: Du plenkst immer noch.

* welches nicht mehr relevant ist, sondern Level 2 Revision 1 (CSS 2.1)