[CSS] Horizontale Navigationen untereinander und hover-effekt

Dieses Thema im Forum "Webdesign" wurde erstellt von DonGeilo, 7. November 2013 .

  1. 7. November 2013
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Moin,
    ich habe mich daran gewagt, mir eine Homepage zu erstellen. Jetzt stecke ich das erste mal fest.
    Ich bin gerade dabei mir meine Startseite zu erstellen. Diese soll prinzipiell wie folgt aufgebaut sein (1 bis 7 sollen Navigationsbuttons sein):

    Bild

    Um die Sidebar und Footer habe ich mich noch nicht gekümmert, der Header steht.
    Als erstes wollte ich die Navigation fertig haben. Dafür habe ich mir drei unsortierte Listen erstellt (erste und zweite Liste mit je zwei Links, die dritte Liste mit drei Links). Per CSS wollte ich diese nun in diese Kachelform bringen (quasi drei horizontale Navis untereinander) inklusive hover-Effekt. Für die erste Liste haut das auch hin, jedoch nicht mit den beiden darunter (ich bekomme zwar die Kachelgrafik angezeit, jedoch ist es weder klickbar, noch mit hover versehen).

    Mit meinem kläglichen Grundwissen komme ich da nun nicht weiter. Ich kann nur rudimentäre Gedanken dazu äußern, aber evtl sind die totaler quark.

    Es scheint jedenfalls nicht zu funktionieren, wenn die Listen einfach untereinander liegen. Ich könnte mir vorstellen das ganze gangbar zu machen, indem man zwischen den unsortierten Listen div-container einfügt, welche dann per CSS insofern formatiert werden, dass zwischen den Listen eine Art Puffer ist (jedoch ohne optische Erscheinung). Liegts an "float"?

    Naja.. hier der wesentliche Code:

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" 
     xml: lang="de" lang="de">
    
     <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title>Seite</title>
     <link rel="stylesheet" type="text/css" href="style.css">
     </head> 
    
     <body>
     <div id="wrapper">
     <div id="header">
     <h1><a href="./">link</a></h1>
     </div>
     <ul id="navi">
     <li id="navi1"><a href="1.html" >a</a></li> 
     <li id="navi2"><a href="2.html" >b</a></li> 
     </ul> 
     <ul id="navii">
     <li id="navi3"><a href="3.html" >c</a></li> 
     <li id="navi4"><a href="4.html" >d</a></li> 
     </ul>
     <ul id="naviii">
     <li id="navi5"><a href="5.html" >e</a></li> 
     <li id="navi6"><a href="6.html" >f</a></li> 
     <li id="navi6"><a href="7.html" >g</a></li> 
     </ul>
     </div>
     
     </body>
     
    </html>
     
    
    Code:
    body {
     background-image: url(.../pad3.jpg);
     background-repeat: repeat;
     background-attachment: fixed;
    }
    
    #wrapper {
     width: 700px;
     height: 900px;
     margin: auto;
     background-color: #202020;
    }
    
    #header {
     height:200px;
     background:url(.../banner.jpg);
    }
    
    #header h1 {
     text-indent:-9999em;
     height:200px;
    }
    
    #header h1 a {
     height:200px;
     display:block
    }
    
    #navi {
     background:url(".../navi1.jpg") no-repeat;
     width: 467px;
     height: 234px;
     margin: 0;
     padding: 0;
    }
    
    #navi li, #navi a {
     height: 234px;
     display: block;
    }
    
    #navi li {
     float: left;
     list-style: none;
     display: inline;
     text-indent: -9999em;
    }
    
    #navi1 { width: 233px; }
    #navi2 { width: 234px; }
    
    #navi1 a:hover { background:url(".../navi1.jpg") 0px -233px no-repeat; }
    #navi2 a:hover { background:url(".../navi1.jpg") -233px -233px no-repeat; }
    
    #navii {
     background:url(".../navi2.jpg") no-repeat;
     width: 467px;
     height: 234px;
     margin: 0;
     padding: 0;
    }
    
    #navii li, #navi a {
     height: 234px;
     display: block;
    }
    
    #navii li {
     float: left;
     list-style: none;
     display: inline;
     text-indent: -9999em;
    }
    
    #navi3 { width: 233px; }
    #navi4 { width: 234px; }
    
    #navi3 a:hover { background:url(".../navi2.jpg") 0px -233px no-repeat; }
    #navi4 a:hover { background:url(".../navi2.jpg") -233px -233px no-repeat; }
    
    #naviii {
     background:url(".../navi3.jpg") no-repeat;
     width: 700px;
     height: 234px;
     margin: 0;
     padding: 0;
    }
    
    #naviii li, #navi a {
     height: 234px;
     display: block;
    }
    
    #naviii li {
     float: left;
     list-style: none;
     display: inline;
     text-indent: -9999em;
    }
    
    #navi5 { width: 233px; }
    #navi6 { width: 233px; }
    #navi7 { width: 234px; }
    
    #navi5 a:hover { background:url(".../navi3.jpg") 0px -233px no-repeat; }
    #navi6 a:hover { background:url(".../navi3.jpg") -233px -233px no-repeat; }
    #navi7 a:hover { background:url(".../navi3.jpg") -466px -233px no-repeat; }

    //EDIT

    Ich Depp.. habs gefunden.. ich sollte genauer schauen, wenn ich kopiere/einfüge und anpasse..

    Ich lass den Thread offen, falls weitere Fragen auftauchen.
     
  2. 7. November 2013
    AW: [CSS] Horizontale Navigationen untereinander und hover-effekt

    generell solltest du es wohl so aufbauen:

    HTML:
    <div id="container for align center">
    <div id="head"></div>
    <div id="box1,2,3,4 + sidebar">
     <div id="1,2,3,4" float:left>
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     </div>
     <div id="sidebar" float:right></div>
    </div>
    <div id="box5,6,7">
     <div>5</div>
     <div>6</div>
     <div>7</div>
    </div>
    <div id="foot"></div>
    </div>
    
    die inneren boxen auch jeweils floaten und die width festlegen.
     
  3. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.