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 ... - 13 Dez 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
WIe kann ich Datum ausblenden?
in "html xml - Hilfe für das Erstellen einer Homepage"
0 20.10.2017 10:02 von Kevinkk
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



Besucher : 5409889    Heute : 1335     Gestern : 1958     Online : 34     13.12.2017    23:51      1 Besucher in den letzten 60 Sekunden        
alle 60.00 Sekunden ein neuer Besucher
Die letzten 30 Referrer :

1 22:56 - google.de/search - hefeweizenglas der kopf tut weh
2 17:53 - bing.com/search - kostenlose weihnachtslieder zum kopieren
3 15:22 - bing.com/search - flugverfolgung erfahrungen forum
4 14:49 - google.com/search - content
5 14:48 - google.com/search - content
6 14:45 - google.com/search - content
7 14:34 - google.com/search - content
8 10:17 - google.com/search - content
9 10:15 - sm.de/ - dienstweihnachtsbaum-verordnung für beamte
10 8:23 - google.com/search - content
11 7:30 - google.com/search - content
12 7:25 - google.com/search - content
13 23:13 - google.com/search - content
14 22:22 - google.de/search - windows patchday dezember 2017
15 20:16 - google.com/search - content
16 18:52 - google.com/search - content
17 17:13 - google.com/search - content
18 14:15 - https://google.at/search - heimlich handy orten kostenlos
19 13:58 - bing.com/search - webseite erstellen anfänger
20 12:21 - google.com/search - content
21 23:07 - google.com/search - content
22 23:06 - google.com/search - content
23 22:25 - google.com/search - content
24 22:24 - google.com/search - content
25 22:00 - google.com/search - content
26 21:01 - bing.com/search - outlook 2016 hotmail problem
27 17:31 - google.com/search - content
28 17:06 - google.com/search - content
29 16:56 - google.com/search - content
30 16:55 - google.com/search - content

Nach oben