Menu Frage

[partyspezial]

hallo,

ich bin ein css anfänger :

Wie kann ich in CSS so ein Menu machen?

http://www.evoteq.de/menu.gif

vielen dank schonmal

 

[Maik]

Zunächst benötigst du eine entsprechende Hintergrundgrafik für die Navigation-Links, der Rest wäre dann ein CSS-Listenmenü.

 

[partyspezial]

ok danke,

aber wie bekomme ich es hin, dass immer ein 1 pixel frei ist, bei manchen buttons, also das es genau so aussieht wie auf dem bild? dafür brauche ich ja 2 arten von menuhintergründen.

1 = ohne rand
2 = mit 2 rändern, jeweils 1 pixel weis

vllt kann mir einer helfen / komme damit noch nicht so zurecht

lg

 

[Maik]

Hab dir mal schnell ein Beispiel gestrickt und hänge es hier als ZIP-Datei an

 

[partyspezial]

hey,

vielen dank, habs verstanden.

schönen abend noch,

gruss

 

[partyspezial]

mh hab noch ein problem:

#nav{
	height:29px;
	width : 881px;
	position:absolute;
	left:6px;
	top:35px;
        margin: 0;
        padding: 0;
}

das habe ich noch in meiner css datei ... und in diesem container, habe ich die liste drin, jedoch zeigt er die nicht an.

was tun? :>

 

[Maik]

Ich hab das mal rekonstruiert, und bei mir wird das Listenmenü in dem DIV-Container angezeigt, wenn auch der rechte Menüpunkt nach unten rutscht, da die DIV-Breite für das Menü nicht ausreicht (6*147px = 882px).

Zudem muß eine ID in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben werden. In meinem Beispiel hatte ich ja schon die ID #nav genutzt, weshalb nun eine der beiden umbenannt werden muß.

Und bitte beachte in deinen Beiträgen die Netiquette bzgl. der Groß- und Kleinschreibung.

 

[partyspezial]

Jetzt wird es angezeigt. Doch wenn ich mir das im Firefox anschaue, dann hat die Liste einen Abstand von dem nav Container! Im Internetexplorer zeigt er es richtig an, aber im Firefox hat er einen Abstand zur oberen Seite des Containers.

Und das Menu fängt nicht ganz links an, d.h. link ist auch ein Abstand zum Container.

Wieso ist das so?

mfg

 

[Maik]

Auch das kann ich nicht bestätigen. Das Listenmenü besitzt in keinem mir zur Verfügung stehenden Browser einen Abstand zum DIV-Container.

Vielleicht solltest du hier mal den kompletten Quellcode (HTML + CSS) posten, denn an meinem erstellten Beispiel und deinem gezeigten CSS-Codeschnipsel liegt es wohl nicht, da alle margin- und padding-Angaben auf "0" gesetzt sind.

 

[partyspezial]

#nav{
	height:29px;
	width : 881px;
	position:absolute;
	left:6px;
	top:35px;
    margin-left : auto;
    margin-right : auto;
}
ul#menu li {
display:inline;
}

ul#menu li a:link, ul#menu li a:visited {
display:block;
float:left;
width:147px;
height: 29px;
line-height: 29px;
color: #fff;
text-align: center;
text-decoration: none;
font-weight: bold;
}

ul#menu li a.links:link, ul#menu li a.links:visited {
background: url(../images/links_aussen.png) no-repeat;
}

ul#menu li a.rechts:link, ul#menu li a.rechts:visited {
background: url(../images/rechts_aussen.png) no-repeat;
}

HTML:

<div id="nav">
<?php include("menu.php"); ?>
</div>

menu.php ist dann die liste