# Listen gestalten!



## alloisxp (7. August 2006)

Hallo!

Ich habe folgende Liste:


```
<ul id="nav">

	<li>Test
		<ul>
			<li style="list-style-image: url('xerks.jpg')"><a href="">bla1</a></li>
			<li><a href="">bla2</a></li>
			<li><a href="">bla3</a></li>
			<li><a href="">bla4</a></li>
		</ul>
	</li>

</ul>
```

Wie man sieht habe ich versucht den Punkt "bla1" mit einem Bild zu unterlegen.

Über: 
<li style="list-style-image: url('xerks.jpg')"><a href="">bla1</a></li>
Leider jedoch funktioniert es so nicht 
Woran kann das liegen?
Ich wende es wohl irgendwie falsch an, hm aber leider kein funktionstüchtiges Beispiel gefunden


----------



## Maik (7. August 2006)

Die Formatierung des Bullet-Zeichens wird auf das ul-Element angewendet.

Siehe hierzu auch SELFHTML: Stylesheets / CSS-Eigenschaften / Listenformatierung / list-style-image.


----------



## alloisxp (7. August 2006)

Oh, ich sehe gerade, das ist ja leider gar nicht was ich suche 

Ich brauch eigentlich etwas wie ich die Liste mit nem Hintergrundbild versehe... nicht etwas wie ich diese Stichpunktegrafik verändere. 

Oh, ich ar wohl auf der falschen Spur... geht ja ganz normal wie sonst auch immer, da hat mir einer extra ne mail geschickt das man das anders macht und dann das naja... sorry 

Edit:
Aber eine sinnvolle Frage kann ich dann doch noch stellen!

Die Liste von oben ist noch aktuell.
Ich hab das dank diesem Forum hier als suckerfish Dropdown gebaut, blax scrollt sich also bei mouseover aus...

Nun ist es aber so das der Text in diesen Listen per PHP erzeugt wird und unterschiedlich lang sein kann.

ich habe eine extra css datei in der


```
ul {
  padding: 0;
  margin: 1;
  list-style: none;
  }

li {
  margin: 1;
  float: left;
  position: relative;
  width: 10em;
  }

li ul {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  }

li > ul {
	top: auto;
	left: auto;
	}

li:hover ul, li.over ul{ display: block; }
```

dies steht.

Denke das ist das entscheidende:


```
li {
  margin: 1;
  float: left;
  position: relative;
  width: 10em;
  }
```

Um die Breite geht es nämlich, ich möchte nämlich KEINE Zeilenumbrüche haben in der Liste, die Breite soll sich je nach längstem Text in der Liste anpassen.
Wenn ich nun aber die width einstellung weglasse dann stehen plötzlich alle Listenelemente nebeneinander anstatt untereinander 
Was natürlich nicht hinnehmbar ist 

Jemand eine Ahnung wie ich das richtig hinbekomme was ich will?


----------



## Maik (7. August 2006)

In diesem Fall kannst du dies mit der background-image-Eigenschaft  realisieren.


----------



## alloisxp (7. August 2006)

Ui jetzt hab ichs editiert und noch ne offene Frage drin, aber jemand hat noch druntergeschrieben zu der Frage davor, also wie gesagt:

Ich müsste wissen wie krieg ich die Breite an den (dynamischen) Text orientiert hin ohne das in dem suckerfishdropdown die Elemente nebeneinander stehen?
(mehr in meinem vorletzten Post)

Achja und noch ne Frage gleich:

Ich hab das jetzt so in einer Tabellenzeile:


```
Text Text2 ausklappbareListe
```

jetzt ist es nur so das er automatisch einen Zeilenmbruch einbaut also die Liste auf ne neue Zeile packt was ich nicht will.
Wie kann ich das verhindern. Habs schon mit float="left" versucht geht aber irgendwie nicht.


----------



## alloisxp (7. August 2006)

Ok, nochmal zur Verdeutlichung:

Ich habe folgenden (kompletten) code:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Suckerfish Dropdowns</title>

<style type="text/css">

body {
	font-family: arial, helvetica, serif;
}

ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}

li { /* all list items */
	float: left;
	position: relative;
	width: 10em;
}

li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
}

#content {
	clear: left;
}

</style>


<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

//-->
</script>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

Test
<ul id="nav">

	<li>Sunfishes
		<ul>
			<li><a href="">Blackbanded sunfish</a></li>
			<li><a href="">Shadow bass</a></li>
			<li><a href="">Ozark bass</a></li>
			<li><a href="">White crappie</a></li>
		</ul>
	</li>

	<li>Grunts
		<ul>
			<li><a href="">Smallmouth grunt</a></li>
			<li><a href="">Burrito</a></li>
			<li><a href="">Pigfish</a></li>
		</ul>
	</li>

</ul>

</body>

</html>
```

Seht ihr oben das Wörtchen "Test"?
Wie kriege ich es hin das Test auf einer Zeile neben Sunfishes und Grunts steht aber das Dropdownmenü noch funktioniert wie auf http://www.blacksphere.de/testdir/suckerfish.html ?


----------



## Maik (7. August 2006)

Notiere das Wort "Test" in einem Block-Element und weise diesem die CSS-Eigenschaft float:left zu.


----------

