Hintergrundbild in Liste positionieren

seelefant · #1 (**permalink**) 09.07.2008, 17:59

Für ein neues Projekt muss ich ein Hintergrundbild mittig rechts in die Naviliste integrieren.
Leider weiß ich üüüüüberhaupt nicht wie das geht. Für Rat bin ich sehr dankbar.
Liebe Grüße
Seelefant

Peter Klein · #2 (**permalink**) 09.07.2008, 18:00

Bitte ein Onlinebeispiel der Seite zeigen oder zumindest den Code!!

seelefant · #3 (**permalink**) 09.07.2008, 18:13

Genaugenommen gibt es noch keinen Code, weil ich keine Ahnung habe, was ich da reinschreiben soll

Aber grundsätzlich sieht das so aus:
#shopnavi li.active {
margin: 2px 0 2px 10px;
padding: 5px;
list-style-type: none;
width: 200px;
display: block;
text-align: left;
color: %schrifthell%;
background: %shopnavihgliactive% url(modix-datadir/pfeil_horz.gif) right;
}

Das Projekt ist noch in den ganz kalten Anfängen - schaut noch nicht so toll aus und ist von den Farben noch nicht durchdacht (soll der Kunde später selber ändern können: - My Own Shop Waidhofen Shop Artikel Artikel

Peter Klein · #4 (**permalink**) 09.07.2008, 18:17

Also es gibt eine Funktion um Code einzufügen im Editor.

Normalerweise is mit Pseudo-Code nix anzufangen.

Meinst du diese Grafii mit den Pfeilen?

seelefant · #5 (**permalink**) 09.07.2008, 18:22

"pfeil_horz.gif" ist die Grafik. In der Liste soll nur EIN Pfeil sein

Er soll sich nicht wiederholen, was ich normalerweise mir no-repeat lösen würde. Aber wo erscheint dann der Pfeil??? Er muss eine feste Position haben.
Wie schreibe ich das?

Paul Kleinhans · #6 (**permalink**) 09.07.2008, 18:25

Meinst du sowas?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument</title>
<style type="text/css">
* {
	border: none;
	margin: 0;
	padding: 0;
}
html {
	font-size: 125%;
	overflow-y: scroll;
}
body {
	background: #fafafa;
	font: 50% Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	text-align: center;
}
#wrapper {
	margin: 15px auto;
	text-align: left;
	width: 950px;
}
#mainnav {
	width:30em;
	background:#039;
	color:#fff;
}
#mainnav h2 {
	padding:1em 0 0 1em;
	font-size:1.2em;
}
#mainnav ul {
	list-style:none;
	padding:1em;
}
#mainnav ul li {
	margin-bottom:.2em;
	padding:.2em;
	font-size:1.2em;
	background: #05b url(pfeil_horz.gif) no-repeat 70% center;
}
#mainnav ul li a {
	color:#fff;
	text-decoration:none;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="mainnav">
    <h2>Blaupunkt</h2>
    <ul>
      <li><a href="#">Navigationssysteme</a></li>
      <li><a href="#">Autoradios</a></li>
      <li><a href="#">Fahrzeugzubehör</a></li>
      <li><a href="#">Thule Zubehör</a></li>
    </ul>
  </div>
</div>
<!--#wrapper-->
</body>
</html>

Peter Klein · #7 (**permalink**) 09.07.2008, 18:27

also wenn er unten ausgerichtet sein soll würd ich es so machen:

Code:

li a:hover {
background: #222 url(pfeil_horz.gif) no-repeat bottom center;
color: #79222d;
}

So ist er bei mir unten in der Mitte. Natürlich die Angaben anpassen.

Und wenn er oben sein soll einfach das bottom gegen top austauschen.

Falls noch Fragen offen sind, weisste ja, melden

seelefant · #8 (**permalink**) 09.07.2008, 18:38

Vielen Dank Paul, das genau habe ich gebraucht! Der Pfeil sitzt!

Frage: Warum schreibst Du "ul li" und "ul li a" ?

Paul Kleinhans · #9 (**permalink**) 09.07.2008, 18:45

Zitat:

Zitat von seelefant

Frage: Warum schreibst Du "ul li" und "ul li a" ?

Mit "#mainnav ul li a" spreche ich alle Links in einer li in der ul an, die sich im div #mainnav befinden.
Mit "#mainnav ul li" spreche ich alle li in der ul an, die sich im div #mainnav befinden.

Peter Klein · #10 (**permalink**) 09.07.2008, 18:49

Wenn man nichts spezielles möchte reicht es auch nur alle Links anzusprechen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Über Hintergrundbild positionieren sinnvoll?	Ria	CSS	6	02.03.2011 16:02
Text auf Bild in Liste positionieren?	cyprus	CSS	15	19.10.2007 00:40
Liste mit list-style-type + hintergrundbild	Cromo	CSS	10	04.10.2006 18:03
Liste (inline) Umbruch erzeugen	Steakfred	CSS	3	09.05.2006 12:27
eingabefeld in horizontaler liste rechts positionieren	moreconcept	CSS	2	16.02.2006 16:29