✔ Hintergrund für Listenelement

Status
Nicht offen für weitere Antworten.
A

ares99kk

Grünschnabel
Hallo,

ich habe ein Menü als Liste in HTML definiert. Die Eigenschaften werden via CSS zugewiesen. Ich möchte nun jedem Listenelement einen Hintergrund bestehend aus einem einfachen Strich geben, welcher hinter dem Link verläuft und durch die Schrift unterbrochen wird. Ungefähr so -----LINK-----. Der Inhalt (link) ist dynamisch und einfach Striche links und rechts an diesen setzten fällt somit aus! Ich habe versucht in mehreren Ebenen (div) zu arbeiten, aber die Positionierung nicht hinbekommen.

Hat jemand dazu eine Idee? Oder wurde so etwas schon einmal diskutiert?

Danke für die Hilfe...
 
Versuch mal folgendes:
HTML: 
[…]
<li><a href="[…]">Verweis</a></li>
[…]
Code: 
li {
	background:			url([…]) repeat-x;
	text-align:			center;
}
li a {
	margin:				0 auto;
	text-align:			left;
	background:			#fff;
}
 
Hallo Gumbo,

das könnte gehen. Allerdings wollte ich auf den Einsatz eines Hintergrundbildes verzichten und eine Linie via CSS ... !? anbringen. Oder habe ich Deine Antwort falsch verstanden?

...
 
Hallo!

Ich würde es so probieren:
HTML: 
<head>
<style type="text/css">
#div1 {
	top:0px;
	left:0px;
	position:absolute;
	width:600px;
	height:30px;
	background-color:#FF0000;
	z-index:0;
}
#div2 {
	top:0px;
	left:0px;
	position:absolute;
	width:600px;
	height:30px;
	z-index:1;
}
#div2 ul li {
	display:inline;
	padding-left:10px;
}
</style>
</head>
<body>
	<div id="div1"><hr></div>
	<div id="div2">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">Impressum</a></li>
		</ul>
	</div>
</body>

Das ist jetzt nur so ein Schnellschuß, das müsste man nochmal genauer anpassen (auch farblich ;) ). Aber ich denke, das Prinzip wird klar! :)

Gruss Bud
 
Vielen Dank ...soweit

dies hilft auf jeden Fall neue Denkansätze zu finden. Einen Nachtrag muß ich wohl machen. Es handelt sich um ein Vertikales Menü ...also in der Art:

-----Home----
---Kontakt---
-Impressum-

Die Schrifthöhe is variant, ebenso die Anzahl der Einträge ...es soll halt nicht so einfach sein ;)

Eine Idee war mit "text-decoration:line-through" zu arbeiten und eine Ebene höher den eigentlichen Text zu legen (für jedes Element). Leider habe ich dies nicht hinbekommen...

Wenn dies zur Ideenfindung hilft, freue ich mich auf weitere Antworten :)

Grüße
 
Wie bereits gesagt, ich hätte eine Hintergrundgrafik verwendet. Folgender Stylesheet wäre z. B. möglich:
Code: 
li {
	list-style-type:		none;
	width:				10em;
	margin:				0;
	padding:			0;
	background:			url(http://www.winzip.com/graphics/yellow-line-1.gif) repeat-x 0 50%;
	font-size:			2em;
	text-align:			center;
}
li a {
	margin:				0 auto;
	padding:			0 0.5em;
	text-align:			left;
	background:			#fff;
}
 
Guten Morgen,

nach vielem hin und her habe ich dann doch die Variante mit dem Hintergrundbild gewählt. So funktioniert es und die Umsetzung ist recht einfach ;) Ich versuche so wenig wie möglich Bilder in die Seite einzubauen... Falls nochmal jemand auf einen einfachen Weg stößt dies mit CSS zu lösen kann ich dies ja immer noch ändern. Unterdessen scheint mir allerdings der Aufwand hierfür nicht mehr gerechtfertigt...

Vielen Dank für die Hilfe
...bis die nächsten "Herausforderungen" anstehen :)

Grüße
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück