#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): 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. + Multi-Zitat Zitieren
#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. + Multi-Zitat Zitieren