HTML Box als Taskleiste erstellen

...komplette Frage anzeigen

5 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.

Arbeite mit prozent Angaben width="100%"

das ist nicht so genau wie pixel ;)

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

Probiers mal so :)

0
@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

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.

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
@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

Du kannst so fragen auf html.de stellen da bekommst du auch richtige antworten. und stell die frage mal bitte besser ich verstehe nähmlich nicht ganz was du meinst.

LG.Dave

okay mach ich das nächste Mal ;) und ich meine so eine Navigation wie bei Google.de. Also das die Box vom linken Bildschirmrand bis zum rechten geht auch wenn man herauszoomt. Hoffe es ist verständlich.

0
@TimstaBeam

ok, das geht dann doch wieder nicht so einfach. da musst du die breitenangabe der navi weglassen. dann wirds aber nur so breit wie das elternelement wrapper. am besten lässt du für den wrapper auch die breitenangabe weg. ist aber alles schwierig, da ich hier net sehen kann wies letztendlich aussehen soll.

0
@TimstaBeam

Okay ich habe jetzt verstanden was du meinst. Guck dir den code von google.de mal an dann siest du schon genug. :) Wenn du es aber nicht endziffern kannst stel die frage einfach in fachforen html.de administrador.de usw. http://de.selfhtml.org/ da kannst du nochmal die grundlagen durchgehen wenn das noch nicht so richtig sitzt LG.Dave

0

Was möchtest Du wissen?