Ankündigung

Einklappen
Keine Ankündigung bisher.

Horizontale Navbar - Paar Fragen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Horizontale Navbar - Paar Fragen

    HeyHo,

    ich habe ein Paar Fragen zu meiner Navbar.

    Erst einmal mein Code: (Jede Seite ist unter dem Body-Tag mit einem wrapper versehen)

    nav.html
    Code:
    <nav id="nav-top">
        <ul>
            <li><a href="index.php">News</a></li>
            <li><a href="tools.php">Tools</a></li>
                <ul>
                    <li><a href="calc.php">Calculator</a></li>
                </ul>
        </ul>
    </nav>
    CSS
    Code:
    * {
      margin:   0;
      padding:  0;
    }
    
    #wrapper {
      width:    980px;
      position: relative;
      margin:   0 auto;
    }
    
    header, nav, footer, section {
      display: block;
    }
    
    /* NAV Top */
    
    #nav-top {
      font-family: Bitter, serif;
      background: #00421c;
      height: 40px;
      line-height: 40px;
      border-bottom: solid 1px #003215;
      color: #FFF;
      font-size: 1.3em;
      text-transform: uppercase;
      text-decoration: none;
      text-align: center;
      text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
    }
    
    #nav-top ul {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
    }
    
    #nav-top ul ul {
      display: none;
    }
    
    #nav-top ul li {
      position: relative;
      height: 40px;
      float: left;
      border-right: 2px solid #003215;
      width: 120px;
    }
    
    #nav-top ul li a {
      color: #FFF;
      text-decoration: none;
      display: block;
    }
    
    #nav-top li:hover {
      background: #003215;
    }
    Screen (display:none auskommentiert zum Verständnis): Bild

    #1
    Die einzelnen Nav-Punkte haben eine feste Breite von 120px. Wie bekomme ich es nun hin, dass wenn der Text länger ist (siehe Bild), sich der Text automatisch anpasst?

    #2
    Der Punkt "Calculator" soll ein Unterpunkt (drop-down Menü) von "Tools" sein.

    Dazu habe ich über "#nav-top ul ul" das "display: none" gesetzt.

    Aber egal wo ich nun ein "hover" setzte und den "display: block", es wird mir nichts angezeigt.

    Wie bekomme ich nun ein drop-down Menü hin, welches sich direkt unter dem Hauptpunkt befindet und gleichgroß ist sowie das sich der Text anpasst (soll nicht aus den 120px herausragen)?

    #3
    Der Hauptpunkt "Tools" selber soll nicht anklickbar sein bzw. keine Funktion haben. Ist nicht anklickbar möglich, wenn ja wie?
    Keine Funktion schätze ich mal einfach mit href="#" ?

  • #2
    Die einzelnen Nav-Punkte haben eine feste Breite von 120px. Wie bekomme ich es nun hin, dass wenn der Text länger ist (siehe Bild), sich der Text automatisch anpasst?
    Die CSS-Eigenschaft text-overflow ist sicherlich ein guter Ausgangspunkt. Nutze z. B. die Konstante ellipsis, um zu langen Text automatisch mit "..." abkürzen zu lassen:
    Code:
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    Ansonsten darfst du eben nicht mit fester Breite arbeiten. Vielleicht erfüllt es den Zweck, statt dessen min-width (und ggf. margin/padding) zu nutzen?

    #2 sollte eher Thema eigener Recherche sein. CSS Navigation wurde bereits in unzähligen Tutorials abgehandelt.

    #3 Indem du einfach den Text nicht in ein <a>-Tag einbettest?!

    Kommentar

    Lädt...
    X