[CSS] Horizontale Navigationen untereinander und hover-effekt

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

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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):

    [​IMG]

    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. Anzeige
  3. #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.
     

  4. Videos zum Thema
Die Seite wird geladen...
Similar Threads - CSS Horizontale Navigationen
  1. Antworten:
    0
    Aufrufe:
    1.396
  2. Antworten:
    3
    Aufrufe:
    1.336
  3. [CSS] Horizontale Menubar

    generals007 , 15. Oktober 2010 , im Forum: Webdesign
    Antworten:
    8
    Aufrufe:
    790
  4. [CSS] Horizontales Fly Out Menu

    Stegaa , 11. Juni 2010 , im Forum: Webdesign
    Antworten:
    4
    Aufrufe:
    667
  5. Antworten:
    2
    Aufrufe:
    2.554