[JanBob]

Hallo zusammen!
Ich habe ein Problem mit einem Bild in einem div-Container.
Der Container liegt in einem Header-Container und beinhaltet ein horizontales Menu. Vorangestellt wird eine Grafik, die eigentlich linksbündig dargestellt werden soll. Der Firefox macht das auch ganz prima, nur der IE zickt rum (siehe Screenshot im Anhang!) 2 Pixel Abstand zum Container-Rand und das bei einer anderen Hintergrundfarbe sieht doof aus ^^

#header {
	position:absolute;
	z-index:5;
	top:0;
	width:100%;
	height:70px;
	background:#CC0000;
}

#topmenu {
	position:absolute;
	bottom:3px;
	right:3px;
	height:20px;
	background:#EFEFDE;
}

<div id="header"> <div id="topmenu"> <img src="fileadmin/images/kante-navi-oben.gif" alt=""> <ul> <li><a href="index.php?id=22" onfocus="blurLink(this);">AKTUELL</a></li> <li><a href="index.php?id=21" onfocus="blurLink(this);">TERMINE</a></li> <li><a href="index.php?id=20" onfocus="blurLink(this);">KONTAKT</a></li> <li><a href="index.php?id=19" onfocus="blurLink(this);">SUCHE</a></li> </ul> </div> </div>

Ein style="float:left;" im img-Tag bringt nicht das gewünschte Ergebnis. Auch Versuche mit margin/padding haben leider nichts gebracht...

Hat jemand einen Tipp für mich?

(im Anhang das Menu und die eigentliche Grafik)

[Armin]

Guten Morgen,

nur mal so als Tipp:
Das es sich ja als eine Hintergafik handelt (seh ich zumimdest so, da sie ja keine Aufgabe übernimmt), würde ich dir empfehlen diese auch als Hintergrundgafik einzubinden. Dann kannst du die Menuepunkte auch viel freier positionieren.

Armin

[JanBob]

Die Idee ist mir beim posten auch gekommen :D
Aber die Grafik hat sehr wohl eine Funktion, da der Headerbereich rot ist und das Menu #EFEFDE als Hintergrund hat. Die Grafik ist dieses Viertel-Rund und müsste als Hintergrund ein no-repeat bekommen. Vllt klappt es, wenn ich die Menu-Punkte dann ein wenig einrücke, sonst liegt der erste Menupunkt noch auf der Grafik...

Ich versuch es mal, danke für den Tipp!

Gruß
JanBob

[Armin]

Hi,

mit keiner Funktion meinte ich, das die nicht anklickbar sein muss.

Und von deinem CSS musst du noch ein wenig mehr veraten, wenn du es nicht als HG einbinden möchtest.

Armin

[JanBob]

Hallo Armin!
Stimmt, eine "Funktion" hat die Grafik nicht!

Hier also noch mal etwas genauer:

<div id="header"> <div id="logo">###LOGO###</div> <div id="fh_link">###FH_LINK###</div> <div id="fb_link">###FB_LINK###</div> <div id="prof">###PROF###</div> <div id="sprache">###SPRACHE###</div> <div id="topmenu">###MENU_OBEN###</div> </div>

Der Header hat 100% Breite, roten Hintergrund und ist 70Px hoch. Darin liegen einige Schriftzüge, ein Logo und eben das Top-Menu mit einer anderen Hintergrundfarbe. Das Topmenu liegt unten rechts in der Ecke vom Header und soll mit der Grafik beginnen. Die Links sind schwarz und wechseln mit einem einfachen Maus-Over auf rot.

#header {
	position:absolute;
	z-index:5;
	top:0;
	width:100%;
	height:70px;
	background:#CC0000;
}

#topmenu {
	background-image:url(images/kante-navi-oben.gif);
	background-repeat:no-repeat;
	position:absolute;
	bottom:3px;
	right:3px;
	height:20px;
}

#topmenu ul {
	margin:0;
	padding:0;
	list-style:none;
}

#topmenu li {
	float:left;
	display:block;
	position:relative;
	color:#000000;
	padding: 4px 15px 0 0;
	font: normal 12px Arial,Helvetica,Verdana,sans-serif;
	font-weight:bold;
}

#topmenu li a {
	text-decoration:none;
	color:#000000;
}

#topmenu li a:hover {
	color:#CC0000;
}

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10:

#Menu-oben einbinden MENU_OBEN = HMENU MENU_OBEN { special = directory special.value = 18 entryLevel = 1 wrap = <ul>|</ul> 1 = TMENU 1.NO.allWrap = <li>|</li> }

Wenn ich die Grafik als Hintergrund einbinde, wird sie von der Background-Color (#EFEFDE) des Containers überlagert. Wenn ich die Hintergrundfarbe rausnehme, sehe ich die Grafik wieder. Allerdings (was ich im oberen Post auch befürchtet habe), liegt der erste Menupunkt jetzt auf der Grafik

Sreen angefügt, Sorry für die Paint-Qualität, ich hab hier kein vernünftiges Prog dafür...

[Armin]

moin

das als css

#topmenu {
	background-image:url(images/kante-navi-oben.gif);
	background-repeat:no-repeat;
	position:absolute;
	bottom:3px;
	right:3px;
	height:20px;
	background-color: #EFEFDE;
	padding-left: 20px;
}

..un kein weiteres img in den <div id="topmenu">...</div> einfügen.

Sreen angefügt, Sorry für die Paint-Qualität, ich hab hier kein vernünftiges Prog dafür...

Mann kann es ja erkennen...;-)

Hab ein Bild angehangen, wie es nun bei mir aussieht.

Armin

[JanBob]

SUUUUUPER!

Dankeschön, Du hast mir einen wunderschönen Tag beschert
Was so ein kleines "padding-left" doch auslösen kann! Ich hab schon so viel rumprobiert, da hab ich wohl die Übersicht verloren!

Nochmals ein dickes Dankeschön und einen sonnigen Tag noch!

[Armin]

kein problem....hauptsache du hast einen wunderschönen Tag ;-)