✔ Listenproblem

[viruss]

hi

ich versuche seit geraumer Zeit, eine Liste zu erstellen, die einerseits vertikal wie auch horizontal ist. also in etwa so:

Titel 1 Punkt 1.1
Punkt 1.2
Titel 2 Punkt 2.1
Punkt 2.2
usw...
(Die "Punkte" untereinander)

Code:

<div id="test">
    <ul>
      <li>Titel 1
        <ul>
          <li>Punkt 1.1</li>
          <li>Punkt 1.2</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>Titel 2
        <ul>
          <li>Punkt 2.1</li>
          <li>Punkt 2.2</li>
        </ul>
      </li>
    </ul>
</div>

Ich habe es mit display:inline bzw. float:left versucht, was allerdings nicht wie gewünscht funktioniert.
Eine (unschöne) Tabelle ist auch nicht möglich, da ich die "Punkte" ausblenden möchte (und danach via display:block wieder einblenden).
Vereinfacht ist meine Idee, den automatischen Zeilenumbruch "zwischen" <li> und <ul> zu unterbinden. Nur findet sich dazu nichts.

Hat jemand eine Idee?

danke im voraus

 

[Maik]

Hi,

wende hierfür dieses CSS auf die Listen an:

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

mfg Maik

 

[Maik]

da ich die "Punkte" ausblenden möchte (und danach via display:block wieder einblenden).

Nachtrag - Deine Vorstellung geht dann wohl in diese Richtung: http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

mfg Maik

 

[viruss]

hi

danke, aber da hast du mein Problem glaube ich etwas falsch verstanden:

Ich möchte, dass "Punkt 1.1" auf der gleichen Linie steht wie "Titel 1" bzw. das Gleiche für "Punkt 2.1" und "Titel 2"

Mit dem /CSS-)Style an sich habe ich keine Probleme.

ne idee?
greez

NAchtrag: EXAKT GENAU DAS! =)

 

[Maik]

Sorry, hab's erst nach dem Posten (richtig) gesehen, worauf es dir ankommt.

mfg Maik

 

[viruss]

easy danke dir viel mals!

könntest du mir evtl. noch sagen, was ich falsch gemacht habe?
ich heba gleich wie bei diesem Code den <li>-Elementen ein float:left..zugeordnet.was ich bis jetzt sehe ist bei deinem Code nicht viel anderes vorhanden, was die Ausrichtung der <li>-Elemente betrifft oder?

danke dir!
mfg

 

[Maik]

Wohlmöglich liegt's bei dir hieran:

<div id="test">
    <ul>
      <li>Titel 1
        <ul>
          <li>Punkt 1.1</li>
          <li>Punkt 1.2</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>Titel 2
        <ul>
          <li>Punkt 2.1</li>
          <li>Punkt 2.2</li>
        </ul>
      </li>
    </ul>
</div>

mfg Maik

 

[viruss]

ja...:-S
jetzt sollte es klappe...danke dir

mfg

 

[viruss]

noch ne frage: folgendes verstehe ich an deinem Code überhaupt nicht:

<!--//--><![CDATA[//><!--
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>

Zwecks Lernefekt würde ich den allerdings gerne verstehen...könntest du mir helfen?
Ich weiss nur, dass es sich um eine java-Funktion handelt, die beim "onmose" etwas ausführt...
könnte das nicht auch in PHP (Was ich viel besser verstehe) lösen?

thx

 

[Maik]

Das ist nicht mein Code

Dieses Javascript ist ausschließlich dem IE6 gewidmet, der den Selektor li:hover nicht interpretiert, mit dem die Untermenüs angezeigt werden.

Mit PHP kannst du das nicht ersatzweise lösen.

mfg Maik