WebWork Magazin - Design, Gestaltung, Online Medien, html

Webhosting Provider Domain

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



Im Homepage und Webhosting-Forum --- CSS: ul li navigation - Problem mit dem Einrücken

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

Forum » html xml - Hilfe für das Erstellen einer Homepage » CSS: ul li navigation ... - 18 Okt 2017 Antworten
im Forum für Webhosting Homepage gefunden:
CSS: ul li navigation - Problem mit dem Einrücken
elster
Otto-Normal-Poster
Threadstarter




Beiträge: 61

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

  Profil   Editieren   Zitieren
Diskus
Pixelschubser




Beiträge: 2

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

  Profil   Editieren   Zitieren
elster
Otto-Normal-Poster
Threadstarter




Beiträge: 61

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

Diese Nachricht wurde geändert von: elster
  Profil   Editieren   Zitieren
 

Antworten


Forum » html xml - Hilfe für das Erstellen einer Homepage » CSS: ul li navigation ...

Aktuelle Beiträge zur Hilfe im Forum für Homepage - CSS: ul li navigation - Problem mit dem Einrücken im Forum Homepage Hosting AntwortenLetztes Posting
CSS: ul li navigation - Problem mit dem Einrücken
in "html xml - Hilfe für das Erstellen einer Homepage"
2 05.07.2017 15:12 von elster
Javascript: Im Inputfeld nur bestimmte Zeichen erlauben.
in "html xml - Hilfe für das Erstellen einer Homepage"
4 27.06.2017 18:10 von Diskus
Multiplier Your Bitcoins Pay 0.07 BTC get 10 BTC In 12 Hours
in "html xml - Hilfe für das Erstellen einer Homepage"
0 03.03.2017 11:16 von getbtcfast
HTML CSS Lernprogramme
in "html xml - Hilfe für das Erstellen einer Homepage"
5 25.02.2017 20:27 von Powerwalker
HTML Template aus Photoshop heraus?
in "html xml - Hilfe für das Erstellen einer Homepage"
1 16.06.2015 08:58 von Zeus
Positionieren in einer DIV-Box
in "html xml - Hilfe für das Erstellen einer Homepage"
0 02.06.2015 13:45 von Louie
Bilder in Seite
in "html xml - Hilfe für das Erstellen einer Homepage"
1 18.03.2015 10:57 von Kevinkk
Tool zum Strukturieren für Javascript-Consolen-Ausgabe gesucht
in "html xml - Hilfe für das Erstellen einer Homepage"
1 03.02.2015 17:42 von Webinator
Problem mit Zeichenverkettung in Javascript
in "html xml - Hilfe für das Erstellen einer Homepage"
2 31.03.2014 19:03 von raiserle
Online-Inhalte einholen, verarbeiten und Text in Word-Datei umändern.
in "html xml - Hilfe für das Erstellen einer Homepage"
3 03.10.2013 19:11 von Annaa
Tabelle mit Mannschaftslogos
in "html xml - Hilfe für das Erstellen einer Homepage"
1 03.10.2013 19:09 von Annaa
Frage zu UTF-8 Sonderzeichen für Handy
in "html xml - Hilfe für das Erstellen einer Homepage"
1 20.08.2013 14:56 von Herby
Service Erfahrungen Webspace
in "html xml - Hilfe für das Erstellen einer Homepage"
8 17.04.2013 21:16 von Bartolus



Besucher : 5326956    Heute : 377     Gestern : 1479     Online : 14     18.10.2017    7:37      1 Besucher in den letzten 60 Sekunden        
alle 60.00 Sekunden ein neuer Besucher
Die letzten 30 Referrer :

1 20:26 - google.de/search - playstation store wartungsarbeiten
2 12:27 - bing.com/search - text von homepage extrahieren
3 9:13 - bing.com/search - den Aufwand wäre uns ersparrt
4 19:22 - google.de/search - gmx login geht nicht forum
5 19:06 - google.com/search - content
6 18:56 - google.com/search - content
7 14:51 - bing.com/search - warum ist gmx nicht erreichbar
8 12:16 - google.de/search - gmx login probleme
9 19:38 - google.de/search - facebook Seitennamen viele zeilensprünge
10 19:42 - google.com/search - content
11 12:43 - bing.com/search - yahoo-mail probleme servicehotline
12 5:43 - bing.com/search - Bauservice, Hosten
13 18:39 - google.de/search - gibt es eine störung bei gmx
14 7:09 - bing.com/search - Ger
15 21:59 - bing.com/search - freenet email dienst gestört
16 21:12 - google.de/search - icuserver wildtierkamera befehle command
17 19:57 - bing.com/search - freenet störung
18 8:04 - bing.com/search - strato öffnet sich nicht
19 2:33 - bing.com/search - Fliesenleger, Nettgau
20 23:07 - bing.com/search - web dorado vorschaubilder unscharf
21 10:09 - google.com/search - content
22 7:25 - ask.com/web - Teichbau, Adamshoffnung
23 7:24 - ask.com/web - Teichbau, Adamshoffnung
24 19:23 - google.de/search - änderungen bei googlesuche 2017
25 13:22 - google.de/search - site pastebin com intext unitymedia
26 21:44 - google.de/search - tpm abkürzung porno
27 16:18 - bing.com/search - Teichbau, Nettgau
28 10:50 - google.de/search - wettbonus mit VPN schieben
29 10:44 - bing.com/search - Bauunternehmen, Adamshoffnung loc:DE
30 7:59 - bing.com/search - communicator strato

Nach oben