• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Menuleiste/Navigationsleiste

C

Cedi44

Neues Mitglied
hallo
Ich bin noch nicht so erfahren im html und css bereich.
zudem bin ich neu hier und habe gleich eine Frage:

ich habe den folgenden Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Home</title>


<style type="text/css">


body {
background-image:url url url(img/BG_HOME.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:center; padding:0px; }

}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
color: #900;
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
.white {
color: #000;
}

#cssmenu{ height:37px; display:block; padding:0; margin:20px auto; border:1px solid; border-radius:5px; }
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top, #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top, #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); }
#cssmenu{border-color:#1b313d;}
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#6696bd;}
#cssmenu > ul > li > a:hover{background:#436f93;}


</style>

</head>


<div id='cssmenu'>
<ul>
<li><a href="uebermich.html"><span>&Uuml;ber Mich</span></a></li>

<li><a href="Ausbildung-Job.html"><span>Job</span></a></li>

<li><a href="Gallery.html"><span>Gallery</span></a></li>

<li><a href="Skills.html"><span>Skills</span></a></li>

<li><a href="Contact.html"><span>Contact</span></a></li>


</ul>
</div>

<body background="img/BG_HOME.jpg">
</body>

</html>





Nun habe ich eine Wichtige Frage: Was muss ich verändern um meine Themen auf der Menuleiste in die Mitte zu bekommen und nicht nach links wie es momentan ist?
In Moment sieht es folgendermassen aus:

--> Bild im Anhang


eben wie gesagt will ich alles in die Mitte bekommen aber nur wie...?!

Vielen Dank für die Antwort :D

greez cedi44
 
Ein Bild kann ich zwar nicht sehen, aber du musst die Divs über margin zentrieren. Entweder ein Wrapper drum setzen oder jedes Element einzeln. Außerdem kommt dein Inhalt in den <body> und nicht davor.

Aufbau -->
Code: 
<!Doctype html>
<html>
<head>
</head>
<body>
<!-- Hier der Inhalt -->
</div>
</html>
 
@ NE4Y
vielen dank feur die rasche antwort. Ehm inhalt habe ich keinen da diese menuleiste als Homesite dienen soll inder ich nur einhintergrundbild habe...
kannst du mir diese Divs anstreichen? weil ich habe diesen code ja nicht selber geschrieben und komme noch nicht so draus wo was ist... Was
sehr nett wäre wenn du es mir direkt reinschreiben könntest ;D das wäre suuper :wink:)
das bild sollte jetzt da sein
 

Anhänge

  • menuleiste-Navigation.JPG
    menuleiste-Navigation.JPG
    16,3 KB · Aufrufe: 4
NE4Y schrieb:
Ein Bild kann ich zwar nicht sehen, aber du musst die Divs über margin zentrieren. Entweder ein Wrapper drum setzen oder jedes Element einzeln. Außerdem kommt dein Inhalt in den <body> und nicht davor.

Aufbau -->
Code: 
<!Doctype html>
<html>
<head>
</head>
<body>
<!-- Hier der Inhalt -->
</div>
</html>
Zum Vergrößern anklicken....


könntest du mir den code ergänzen damit alles in der mitte ist?;) das wäre super ;DD
 
Der Code von NE4Y sollte dir als Basis für deinen HTML-Code dienen. Das was Du ausgeben willst (also das Menü) muss zwischen <body> und </body>. Das wollte er damit sagen.

Und um das Menü zu zentrieren musst Du ihm eine feste Breite geben und "margin: 0 auto;".
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben