Vollständige Version anzeigen : [CSS] Horizontale Navigationen untereinander und hover-effekt


DonGeilo
07.11.2013, 09:30

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):

;;0;xup~in/exec/ximg;php?fid=20132889

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1;0 Strict//DE"
";;;w3~org/TR/xhtml1/DTD/xhtml1-strict;dtd">

<html xmlns=";;;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>



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.

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
raid-rush
07.11.2013, 16:27

generell solltest du es wohl so aufbauen:


<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.


Ähnliche Themen zu [CSS] Horizontale Navigationen untereinander und hover-effekt
  • wie macht man diesen Karamell-Effekt/Lila-Effekt?
    hi, schaut euch mal die ersten paar fotos an auf der seite damit ihr wisst was ich meine: (;blog;thaeger~com/2010/06/22/retro-grunge-art/) alle fotos haben irgendwie einen Karamell/Lila/Blau stich. ich find solche bilder total geil die so einen style haben. deswegen wollte ich mal fragen ob einer [...]

  • Navigationen-Pack zum Download(!)
    Hab das Thema mal im richtigen Thread angelegt: Showthread Php 7270852 / Download - RR:Suche (;board;raidrush~ws/showthread;php?p=7270852) [...]

  • [JavaScript] Hover-Effekt für Bilder
    Huhu! Ich möchte gerne für meine Bildergallerie diese hover-funkion haben. Hat jemand eine idee oder einen link wo so etwas beschrieben wird wie man so etwas realisiert? Free Photoshop Brushes, Photoshop Patterns and Textures | Fbrushes (;fbrushes~com/) [...]

  • [CSS] Bild hover effekt
    Hallo, wie kann ich es am besten in CSS umsetzen, das ich wenn ich über ein Bild gehe, das ein anderen Bild kommt, also wie so nen Hover Effekt. Oder kann ich das auch einfach im Html machen ? Also zB Wenn ich auf einen Button klicke dann aus Button1;jpg, Button2;jpg wird. danke [...]



raid-rush.ws | Imprint & Contact pr