[CSS] Problem mit navi

Dieses Thema im Forum "Webdesign" wurde erstellt von White_Angel, 28. April 2010 .

Schlagworte:
  1. 28. April 2010
    Problem mit navi

    Hi,

    also ich bin grad dabei meine navileiste auszurichten, komme da aber auf so paar probleme
    und zwar erstmal zu den buttons =>
    mit "a: hover" sollen die leuchten(also durch anderes bild ersetzt) wenn man mit der maus drüber fährt
    und dazu noch sollen die ganze buttons hintereinander in einer zeile stehen... da hab ich grad son problem mit....

    am meisten hänge ich am hover... z.b. schon bei der eintellung hier unten zeigt der mir garkeinen button mehr an.. setze ich die postion auf absolute muss ich hover wegmachen und display auch entfernen.... das verwirrt mich grad echt ^^

    ich hab das ganze auch ohne hover probiert
    das schaut dann so aus (position: absolute und display entfenrt)
    klick

    so soll es aber aussehen
    klick

    CSS CODE
    Code:
    #navibar {
     float: left;
     
     height: 52px;
     width: 950px;
     margin-top: 243px;}
    
    
    
    /* NAVIBAR */
    a#news { background: url(images/news.jpg) no-repeat;height: 52px;width: 88px; display: block; }
    a#news:hover{background: url(images/news_on.jpg) no-repeat;}
    
    HTML-CODE
    Code:
    <html>
    <head>
    <title></title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    
    
    </head>
    <body>
    <div id="content">
    <div id="navibar">
    <a href="#" id="news"></a>
    <a href="#" id="about"></a>
    ...
    
    </div>
    
    <div id="ncontent">
    
    </div>
    
    
    
    
    
    
    </div>
    
    </body>
    </html>
    
     
  2. 28. April 2010
    AW: Problem mit navi

    Jetzt auf die schnelle:
    Definier IMMER link, visited, hover, active. (In dieser Reihenfolge)
    {} reicht.
     
  3. 28. April 2010
    AW: Problem mit navi

    wie genau ?

    eig brauch ich ja nur den normalen link und hover mehr nicht deswegen
     
  4. 29. April 2010
    AW: Problem mit navi

    Dein CSS ist auch nicht wirklich strukturiert bzw. aufgeräumt.

    Schau dir das mal an (bezüglich Reihenfolge).

    :hover: Mouseover-Effekt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
     
  5. 4. Mai 2010
    AW: Problem mit navi

    habs immer noch net so hingekriegt -.-
    sodass es in der reihe steht, der zeigt mir die buttons garnet mehr an
     
  6. 11. Mai 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Problem mit navi

    Code:
    #navibar {
     float: left;
     height: 52px;
     width: 950px;
     margin-top: 243px;
    }
    
     #navibar ul {
     height: 52px;
     width: 950px;
     }
    
     #navibar ul li {
     display:inline;
     float:left;
     list-style-type:none;
     }
     
     #navibar ul li a {
     text-indent: -9999px; 
     display:block;
     height:52px;
     line-height:52px;
     }
     
    /* NAVIBAR */
    #news { background: url(images/news.jpg) center top no-repeat;width: 88px; }
    #about { background: url(images/about.jpg) center top no-repeat;width: 88px; }
    #impressum { background: url(images/impressum.jpg) center top no-repeat;width: 88px; }
    
    #navibar a:hover{background-position: center bottom;}
    
    HTML:
    <div id="navibar">
     <ul>
     <li><a href="#" title="News" id="news">News</a></li>
     <li><a href="#" title="About" id="about">About</a></li>
     <li><a href="#" title="Impressum" id="impressum">Impressum</a></li>
     </ul>
    </div>
    
    So sollten dann deine Grafiken aussehen, sie enthalten dann beide Zustände.

    Bild



    Irgendwie sollte es so stimmen ^^

    Bei fragen kannst ja schreiben - eventuell via PN.
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.