CSS Elemente Frage

#0
15.05.2006, 00:10
Member

Beiträge: 42
#1 hi an alle,
kann jemand hier diesen CSS Code erklären.
ich habe diesen CSS Code im internet gefunden.
code :

Code

ul  {
width: 70pt;
background: #eee;
list-style: none;
}

ul ul  {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
Aber meine Frage ist : wenn ich erstes " ul " & zweites "ul ul " zusammenfasse also zu einem. dann geht nicht. Der Code besteht drauf dass es so ist.

Was ist der Unterschied zwischen ersten & zweiten
eigentlich die beiden sind ja gleich oder ?

übrigens hier handelt es sich um ein drop down menu !


MfG
- shanxp -
__________
: Learn first how to learn :
http://urpcware.blogspot.com
Seitenanfang Seitenende
15.05.2006, 05:05
Member
Avatar Xeper

Beiträge: 5291
#2

Zitat

Was ist der Unterschied zwischen ersten & zweiten
eigentlich die beiden sind ja gleich oder ?
Um das Element ul in einem anderen ul Element anzusprechen.
das parent/child prinzip halt, allerdings auch wenn der css code selbst theoretisch korrekt ist - so ist er doch Praktisch falsch.
Denn ich glaube nicht das sich ein doppel <ul> validieren läßt.
Also inkorrekter (x)html code.

Zitat

Aber meine Frage ist : wenn ich erstes " ul " & zweites "ul ul " zusammenfasse also zu einem. dann geht nicht. Der Code besteht drauf dass es so ist.
siehe oben.

Btw.: wäre schlauer wenn du deinen eigenen code schreiben würdest ;)

Ps.: Wenn du noch mehr solcher Fragen hast schlage ich vor du besuchst mal #css@IRCnet
__________
E-Mail: therion at ninth-art dot de
IRC: megatherion @ Freenode
Seitenanfang Seitenende
15.05.2006, 19:23
Member

Themenstarter

Beiträge: 42
#3 hi danke ür deine Antwort
hier ist der komplette Code

--------------------------------------

<head>
<style type="text/css">
li {position: relative;}

ul {
width: 70pt;
background: #eee;
list-style: none;
}

+++++++++++ diese untere Zeile bitte erklären !! warum zwei mal "ul "
wenn ich ein ul raus nehme dann verschindet alles vom Fenster !!
+++++++++++++++++++++++++++++
ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

#menu li { list-style-image: url('arrow.gif') ;
position: relative;
}
li > ul {
display: none;
}

li:hover > ul {
display: block;
}

</style>
</head>

<body >
<div id="menu" >
<ul>
<li><a href="#">Heading 1</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
</ul>
</li>

<li><a href="#">Heading 2</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
</ul>
</li>
<li><a href="#">Heading 3</a>
<ul>
<li><a href="#">Subitem 4</a></li>
<li><a href="#">Subitem 5</a></li>
<li><a href="#">Subitem 6</a></li>
</ul>
</li>
</ul>
</div>

</body>

</html>

-----------------------------------------
__________
: Learn first how to learn :
http://urpcware.blogspot.com
Seitenanfang Seitenende
15.05.2006, 21:34
Member
Avatar Xeper

Beiträge: 5291
#4

Zitat

+++++++++++ diese untere Zeile bitte erklären !! warum zwei mal "ul "
wenn ich ein ul raus nehme dann verschindet alles vom Fenster !!
+++++++++++++++++++++++++++++
Hab ich doch schon erklärt:
Weil du ein <ul> in einem <ul> ansprechen willst.
Siehe:

Code

<ul>
<li><a href="#">Heading 1</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
</ul>
</li>
....
Aber wie gesagt ob das valid ist bezweifle ich stark - aber sicher bin ich mir nicht.
__________
E-Mail: therion at ninth-art dot de
IRC: megatherion @ Freenode
Seitenanfang Seitenende
15.05.2006, 21:42
Member

Themenstarter

Beiträge: 42
#5 hi danke,

aber wie wär es wenn ich so machen würde
<ul> --------------- > 1
<li><a href="#">Heading 1</a>
<ul> ----------------------> 2
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a>
<ul> ----------------------> 3
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
</ul>
</li>
</ul>
</li>


Jetzt habe ja Verschachtlung also 3 <ul>
muss ich dann am CSS code ändern ? oder wie gehts ?
danke

</ul>
</li>
__________
: Learn first how to learn :
http://urpcware.blogspot.com
Seitenanfang Seitenende
15.05.2006, 21:46
Member
Avatar Xeper

Beiträge: 5291
#6

Zitat

Jetzt habe ja Verschachtlung also 3 <ul>
muss ich dann am CSS code ändern ? oder wie gehts ?
danke
Naja dann halt ul ul ul { ... }

Die Frage ist nur ob man das will und ob das auf allen Browsern so reibungslos funktioniert.
__________
E-Mail: therion at ninth-art dot de
IRC: megatherion @ Freenode
Seitenanfang Seitenende
15.05.2006, 21:49
Member

Themenstarter

Beiträge: 42
#7 ok danke ich werd gleich ausprobiern
__________
: Learn first how to learn :
http://urpcware.blogspot.com
Seitenanfang Seitenende