HTML Box als Taskleiste erstellen
Hallo, ich möchte die Navigation meiner Website wie in einer Taskleiste von Links nach rechts ausgefüllt haben. So ähnlich wie bei google.de. Was muss ich da machen? Habe schon die größe für den wrapper auf 920px gemacht. Geht das jetzt eigentlich noch, dass das navi dann noch größer wird?
4 Antworten
Ich habe hier mal etwas, wie es bei google zu sehen ist, zusammen geschrieben.
Hier der css Teil:
<style>
*{
padding:0px;
margin:0px;
}
#wrapper{
top:30px;
position:absolute;
width:980px;
left:50%;
margin-left:-490px;
background:#F1F1F1;
min-height:100%;
height:300%;
}
#menu{
position:absolute;
left:0px;
right:0px;
top:0px;
height:28px;
width:100% - 36px;
background: #2d2d2d;
padding-top:2px;
padding-left: 36px;
}
#menu ul li {
list-style: none;
color:#bbbbbb;
font-size:10pt;
font-family: Arial;
line-height: 27px;
padding: 0 8px;
display:inline;
font-weight:bold;
}
#menu ul li:hover{
color:white;
}
</style>
und der html Teil:
<div id="menu">
<ul>
<li>+Ich</li>
<li>Suche</li>
<li>Bilder</li>
<li>Maps</li>
<li>YouTube</li>
<li>News</li>
<li>Mail</li>
<li>Docs</li>
<li>Kalender</li>
<li>Mehr</li>
</ul>
</div>
<div id="wrapper"></div>
Ich hoffe ich kann dir helfen!
Der HTML code sieht ungefähr so aus:
<div class='navi_top'>
... Navigation
</div>
dass css ist folgendes wichtigen styles:
position: fixed;
width: 100%;
min-width: 980px;
ein height brauchst du nicht unbedingt. Die höhe regelt man meistens mit paddings. Wichtig ist auch, dass der Content Bereich der Webseite ein margin-top in der höhe der Navigation bekommt, da sonst Content und Navigation übereinander stehen.
klar geht das. dann machst du die navibreite "width:980px;" und das es nebeneinander steht bekommst du mit: "display: inline;" hin. dann noch ein schönes padding nach allen seiten der links, farblich nochetwas rumspielen und schon hast du ein schönes navi.
lg
tom
wenn du noch fragen hast, kannste mich gerne als freund adden und ich kann dir beim css ein bisschen unter die arme greifen.
mein TIP: Video"brain Lehrgänge. musst du mal nach googlen. die sind nicht teuer und einfach nur genial. damit hab ichs mir auch angeeignet.
du brauchst übrigens nicht zwingenderweise ienen wrapper. mach die navi auf bildschirmbreit und nimm für den content einfach die 920px; dann hast du die navi so breit wie das browserfenster und der inhalt ist dann 920px breit.
Arbeite mit prozent Angaben width="100%"
<div style="width:100%; height:30px;">
<div style="width:925px;">Inhalt</div>
</div>
Probiers mal so :)
Dann ist das Navi genauso breit wie der Rest. Ich möchte eine feste größe für den Inhalt, 920px, und ein Navi, dass den gesamten Bildschirm also von links nach rechts bedeckt.