Menü erstellen

[flashspys]

Hallo ich suche jemanden, der mir den ersten "Anschubser" zu nem Menü gibt, welches in einem absolut positioniertem nav element liegen soll.
Der nav Tag hat von mir folgenden CSS code bekommen:

nav {
    position: absolute;
    bottom: 0px;
    left: 120px;
    width: 1080px;
    height: 35px;


    background: linear-gradient(to bottom,  #939393 0%,#cccccc 100%);
}

Der ist dort auch ganz brav positioniert, genau da wo er soll.

Kommen wir zum Problemkind/Menü:

Hier ein kleines bildchen, von dem, was ich erreicht habe:



das Menü ist folgendermaßen aufgebaut:

<nav><ul><li><a></a></li><li>

usw.
erachte ich für sinnvoll..

Der CSS Code dazu:

nav ul {
	list-style-image: none;
}
nav ul li {
	padding: 8px 0px 9px 2px;
	
	border-bottom: 1px solid grey;
	border-top: 1px solid grey;
	border-right: 1px solid grey;
	
	display: table-cell;
}


nav ul li a {
	margin: 0px 46px;
	text-decoration: none;
}

folgende Sachen würde ich jedoch gerne noch erreichen. Man kann bis jetzt nur auf die Schrift klicken, und leider nicht auf das li Element. wie also ziehe ich das a element so groß, dass es mit dem li element an den Rändern bündig ist.

Zudem soll die breite wenn möglich dynamisch und in allen li elementen gleich sein.

Fände es sehr nett von euch, wenn ihr mir Tipps geben könntet, wie ich dort weitermachen könnte :)

 

[Zejo]

Zunächst einmal musst du margin und padding in das Element packen. Da a aber ein inlineelement ist, und es keinen margin-top und margin bottom hat, musst du es als Display: block definieren.

Dafür floatest du die Li-elemente mit float: left: Du könntest hier auch display: inline-block nehmen, aber dann musst du beim IE7 aufpassen, da er "inline-block" nicht kennt.

Nachdem der a-tag ein Blockelement ist, kannst du hier margin, padding usw. festlegen, somit kannst du auf den ganzen Button drücken und nicht nur auf die Schrift.

Damit die Rahmen nicht doppelt dargestellt werden wenn 2 a-tags aneinandertreffen, habe ich hier border und dann ein border-left: none genommen somit sieht man immer nur ein Rahmen links, das erste li-element hat nun natürlich auch kein Rahmen, dieses kannst du aber mit dem Pseudoelement first-child ansprechen und gibst ihm hier einfach explizit ein border-left 1px solid grey.

da du die Listenelemente gefloatet hast, musst du das nächste Element, z.B. ein inhalt-div oder container auf "clear: both" setzen, damit es nicht weiter gefloatet. wird.

Hab dir mal nur ein Beispiel hier, damit du siehst was ich meine:

nav {
   width: 80%;
   margin: auto;
}


nav ul {
     list-style-type: none;
}
nav ul li {
    float: left;



}


nav ul li a {
    width: 100px;
    display: block;
    margin: 0;
    padding: 8px 2px;
    border: 1px solid grey;
    border-left: none;
    text-align: center;
    text-decoration: none;
    color: grey;


}

nav ul li:first-child a {
    border-left: 1px solid grey;
}

#inhalt {
    clear: both;
}