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 ... - 21 August 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 : 5244073    Heute : 636     Gestern : 1052     Online : 17     21.8.2017    14:12      2 Besucher in den letzten 60 Sekunden        
alle 30.00 Sekunden ein neuer Besucher
Die letzten 30 Referrer :

1 1:50 - bing.com/search - 49 Gesch
2 1:38 - bing.com/search - 49 Gesch
3 1:25 - bing.com/search - 49 Gesch
4 23:29 - bing.com/search - beispiel strato forum
5 18:09 - google.de/search - HTML Formulardaten versenden
6 15:55 - https://google.at/search - B
7 12:36 - https://qwant.com/ - theo aktivierungscode generator
8 10:57 - google.bg/search - skype funktioniert nicht mehr 2017
9 2:37 - bing.com/search - gmx störung
10 15:59 - sm.de/ - probleme bei outlook hotmail update
11 11:23 - bing.com/search - auf bestimmten strato server einloggen
12 20:42 - bing.com/search - gmx störung
13 15:34 - google.com/search - content
14 15:22 - google.com/search - content
15 15:20 - google.com/search - content
16 7:17 - bing.com/search - probleme posteingang mit web freemail 2017
17 4:35 - https://bing.com/search - hg bidopa
18 22:59 - bing.com/search - gmx keine mails schreiben möglich störung
19 23:34 - google.de/search - balken in der homepage
20 12:53 - de.search.yahoo.com/search - freemail die kostenlose e news
21 11:30 - astromenda.com/results.php - GMX Netzprobleme
22 22:07 - google.de/search - handy orten freundin
23 13:06 - bing.com/search - htmlcode formular absenden
24 12:30 - google.de/search - heimlich handy orten kostenlos
25 11:52 - bing.com/search - probleme hotmail konto 2017
26 11:27 - bing.com/search - stromverbrauch server pro jahr
27 18:19 - bing.com/search - gmx keine mails schreiben möglich störung
28 17:04 - google.com/search - content
29 17:03 - google.com/search - content
30 16:30 - google.com/search - content

Nach oben