HTML Box als Taskleiste erstellen

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
trosen
15.03.2012, 15:10

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!
tWeuster
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
15.03.2012, 09:56

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.
tommy1976
14.03.2012, 22:52

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.
TimstaBeam 
Fragesteller
 14.03.2012, 22:55

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.

0
tommy1976  14.03.2012, 23:38
@TimstaBeam

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.

0
TitusPullo
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
14.03.2012, 22:51

Arbeite mit prozent Angaben width="100%"
Woher ich das weiß:Berufserfahrung – Leidenschaftlicher Webentwickler
Daveini  14.03.2012, 22:52

das ist nicht so genau wie pixel ;)

0
TitusPullo  14.03.2012, 22:59
@Daveini 
<div style="width:100%; height:30px;">
  <div style="width:925px;">Inhalt</div>
</div>

Probiers mal so :)

0
aurata  14.03.2012, 23:40
@Daveini

@daveini: wenn Navi-Bereich bildschirmfüllend sein sollte (die Breite), dann ist 100% Breite genau richtig. Wie viel Pixel jeweils Bildschirme der Nutzer haben, kann man doch gar nicht wissen ;-).

0