Listen gestalten!

Status
Nicht offen für weitere Antworten.
A

alloisxp

Mitglied
Hallo!

Ich habe folgende Liste:

Code: 
<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 :(
 
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

Code: 
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:

Code: 
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?
 
Zuletzt bearbeitet:
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:

Code: 
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.
 
Zuletzt bearbeitet:
Ok, nochmal zur Verdeutlichung:

Ich habe folgenden (kompletten) code:

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 ?
 
Notiere das Wort "Test" in einem Block-Element und weise diesem die CSS-Eigenschaft float:left zu.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück