WebWork Magazin - Webseiten erstellen lassen, Online Medien, html

Webhoster, Webhosting Provider und Domain registrieren

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik


Homepage und Webhosting-Forum

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !


Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » CSS: ul li navigation - Problem mit dem Einrücken » Antworten
Benutzername:
Passwort: Passwort vergessen?
Inhalt der Nachricht: Fett | Kursiv | Unterstrichen | Link | Bild | Smiley | Zitat | Zentriert | Quellcode| Kleiner Text
Optionen: Emailbenachrichtigung bei Antworten
 

Die letzten 5 Postings in diesem Thema » Alle anzeigen
von elster
ich habe den Fehler gefunden: es fehlte das position: absolute; für das nav ul { ... }


@Diskus
ein Listenpunkt schließt seine Unterpunkte immer ein:
1: 
2: 
3: 
4: 
5: 
6: 
7:
 ...<li><a href="5" title="U2">U2</a>
     <ul>
       <li><a href="6" title="U2a">U2a</a></li>
       <li><a href="7" title="U2b">U2b</a></li>
     </ul>
   </li>
    <li><a href="8" title="U3">U3</a></li>...
also </li> hinters </ul>

lG. elster
von Diskus
Hallo Elster.
Ich weiß nicht, ob ich deine Frage richtig verstehe, aber bei Listen (ul) wird nichts 'aufgeklappt'. Dazu verwendet man DropDown-Felder.
Wenn ich es so eingebe:
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20:
<nav>
 <ul>
  <li><a href="1" title="W1">W1</a></li>
  <li><a href="2" title="W2">W2</a></li>
  <li><a title="U0" href="3">U0</a></li>
       <ul>
           <li><a href="4" title="U1">U1</a></li>
           <li><a href="5" title="U2">U2</a></li>
                <ul>
                    <li><a href="6" title="U2a">U2a</a></li>
                    <li><a href="7" title="U2b">U2b</a></li>
                </ul>
           <li><a href="8" title="U3">U3</a></li>
           <li><a href="9" title="U4">U4</a></li>
       </ul>
  <li><a href="10" title="W8">W8</a></li>
  <li><a href="11" title="W9">W9</a></li>
  <li><a href="12" title="W10">W10</a></li>
 </ul>
</nav>

wird kein Leerraum angezeigt.
Allerdings hast du bei 'padding' sehr hohe Werte eingetragen, was die Ansicht schon etwas 'verzerrt'.
Gruß
Diskus
von elster
wenn per hover untergeordnete Elemente aufgeklappt werden, erzeugen sie entsprechend ihrer Breite in der übergeordneten Zeile eine Leerraum. Wie kann oder wie würdet ihr das verhindern - ohne Javascript.

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22:
<nav>        
 <ul>            
 <li><a href="1" title="W1">W1</a></li>            
 <li><a href="2" title="W2">W2</a></li>            
 <li><a href="U0">U0</a>                
    <ul>                     
        <li><a href="">U1</a></li>                     
        <li><a href="" title="U2">U2</a>                        
    <ul>                             
        <li><a href="" title="U2a">U2a</a></li>                           
        <li><a href="" title="U2b">U2b</a></li>  
      </ul>                 
    </li>                    
    <li><a href="" title="U3">U3</a></li>                   
    <li><a href="" title="U4">U4</a></li>     
      </ul>         
    </li>           
    <li><a href="" title="W8">W8</a></li>     
    <li><a href="" title="W9">W9</a></li>      
    <li><a href="" title="W10">W10</a></li>    
    </ul>  
  </nav> 


1: 
2: 
3: 
4: 
5: 
6:
li a {	background-color:yellow;  	 display: inline-block;     text-align: center;     padding: 14px 16px;     text-decoration: none; } 
 li a:hover {  background-color: red; } 
 nav ul {  border:0px solid red;      list-style-type: none;     margin: 0;     padding: 0;  }  
nav ul li {  float: left;     }  
nav ul li ul {  display: none; }  
nav ul li:hover > ul { display: block;  	}


eli

Nach oben