CSS Menu fixieren?

BlackBoSs · 01.11.2013

Hallo,

Wie kann ich mein CSS Links fixieren ... so das diese Menufläche bzw die obenstehende blaueleiste immer fix oben zu sehen ist wenn man nach unten scrollt.

Mit position:fixed hab ich es nicht geschafft?

Siehe Demo:

Bitte um Hilfe

Lg

Pixelverwender · 01.11.2013

AW: CSS Menu fixieren?

Schau mal hier: http://jsfiddle.net/HFjU6/1/
oder hier:
bzw. hier:

dn3d_fanboy · 01.11.2013

AW: CSS Menu fixieren?

Befindet sich das Menü in einem DIV-Container? Dann müsste der fixiert werden.

koenigsadler · 01.11.2013

AW: CSS Menu fixieren?

Die Verschachtelung stimmt nicht, deine Navigation wird Fixiert, allerdings schiebt sich der untere Content über deine Navigationsleiste.
Wenn du dein Navi über dem Header Div positionierst sollte es gehen, zur Not vergibst du einfach ein z-index. (z-index funktioniert nur in Verbindung mit einer Positionierung)

ein weiteres Problem in diesem Zusammenhang kann sein/werden, da deine ID "Content" ebenfalls die class "Wrapper" hat, die hat auch dein "nav". Das ist soweit kein Problem könnte aber eins werden, also im Auge behalten.

HTML:

</head>  
<body> 
<div class="wrapper">  
<nav> 
<ul>                 
<li><a href="#" class="active">Fachwerkstatt</a></li>                  
<li><a href="#">Unternehmen</a></li>                  
<li><a href="#">Reifen & Felgen</a></li>                  
<li><a href="#">Auto-Checks</a></li>                  
<li><a href="#">Gebrauchtwagen-Verkauf</a></li>                 
<li><a href="#">Kontakt</a></li>                  
<div style="clear:both;"></div>             
</ul>         
</nav> 
<div id="header"> 
<div class="wrapper" id="content"></div>

BlackBoSs · 01.11.2013

AW: CSS Menu fixieren?

Hallo,

ich danke erstmals für die Antworten.
Aber irgendwie komm ich nicht weiter. Auch wenn ich nav Tag über <div id="header"> verschiebe rutscht die blaue leiste nicht mit ?

Mit z-index bleiben zwar die links über dem body und beim scrollen rutschen sie auch mit .. aber die blaue leiste rutscht trotzdem nicht mit ...

und nach dem ich z-index eingefügt habe .. sind die links nach links gerutscht obwohl float left vergeben ist.

bin irgendwie durcheinander gekommen .. und hänge an so etwas -.-

koenigsadler · 01.11.2013

AW: CSS Menu fixieren?

Du musst die "nav" im "wrapper" lassen der Wrapper ist ja jetzt leer, dem Wrapper dann das Fixed verpassen.
Wenn die Nav im "Wrapper div" ist diesen Wrapper über der Header schieben nicht nur die "nav" alleine. In der Nav sind nur die Links, diese werden ja jetzt Fixiert. Aber der Blaue Balken ist die Wrapper class.

so in etwa:

HTML:

<body>
<div class="wrapper" style"position:fixed; top:0px;">
<nav>
<li>
</li>
</nav>
</div>
<Header>

BlackBoSs · 01.11.2013

AW: CSS Menu fixieren?

So geht es auch nicht irgendwie ...
So rutscht die ganze Seite nach Links und lasst sich nicht mehr bewegen ...

Boah ich zuck gleich aus

))

koenigsadler · 02.11.2013

AW: CSS Menu fixieren?

Ich zucke auch gleich aus

Du solltest deinen wrapper auch schliessen die fehlt mindestens ein </div>
ausserdem hast du immernoch allen andern IDs die klasse Wrapper angefügt.

unabhängig von allem sollte dein Html so ausehen:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Autohaus Glöckner</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<div class="wrapper">
<nav>
    <ul>
        <li><a href="#" class="active">Fachwerkstatt</a></li>
        <li><a href="#">Unternehmen</a></li>
        <li><a href="#">Reifen & Felgen</a></li>
        <li><a href="#">Auto-Checks</a></li>
        <li><a href="#">Gebrauchtwagen-Verkauf</a></li>
        <li><a href="#">Kontakt</a></li>
        <div style="clear:both;"></div>
     </ul>
 </nav>
 </div> 
<div id="header">  
<div id="content">
<div id="inhalt">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>
</div>
</div> 
</div>

deine css in etwa so:

HTML:

* {margin:0; padding:0;}

body{
background: url("../images/tasky_pattern.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.wrapper {
width:100%;
position:fixed;
top:0px;
background: rgb(109,179,242);
}

#header { 
height:40px; 
repeat-x: top; 
background:background: rgb(109,179,242); 
}

nav {
width:960px; 
height:40px;
margin-left: auto;
margin-right: auto; 
}

nav ul {list-style:none; position:absolute;}
nav ul li {float:left;}
nav ul li a {padding: 0 20px; text-decoration:none; line-height:40px; height:40px; min-width:30px; font-weight:bold; color:#FFF; display:block; font:Georgia, "Times New Roman", Times, serif; border-right:1px dashed #FFF;}



#content { width:100%; top:50px; height:100%; min-height:1000px;
margin-top:40px;}

#inhalt{
background:#666;
width:960px;
height:auto;
margin-left: auto;
margin-right: auto; 
}

Ich vermisse bei dir grundlegende Kentnisse was die ganze Webseite anbelangt ich empfehle dir dich nochmal damit auseinander zu setzen,das was ich da editier habe war wirklich grober mist, und allem Anschein nach aus irgend einem WYSIWYG Programm. Damit lässt sich kein gescheites Weblayout entwickeln.

dn3d_fanboy · 02.11.2013

AW: CSS Menu fixieren?

Wenn ich mir den Quellcode ansehe, ist der DIV-Container mit der Klasse "wrapper2" nicht geschlossen (</div> fehlt).

EDIT: Oh, da war koenigadler schneller...

BlackBoSs · 02.11.2013

AW: CSS Menu fixieren?

@ koenigsadler: Ich komme hoffentlich mit der Zeit hinein .. bin brav am üben

aber bei manchen dingen die mir neu sind bleibe ich halt hängen ... mit tutorials lesen kommt mal alleine auch nicht zu recht da man es auch in de praxis gut können muss ...

habe deinen code denn du da oben geschrieben hast 1zu1 eingefügt ... funktioniert tadellos.

hätte aber ein paar fragen wenn du es mir erlaubst ...

Frage 1: Hast du #content absichtlich hineingebaut damit du ein Abstand zwischen Inhalt und <nav> Tag hast?

Frage 2: Muss ich bei jeden Layout denn ich zentrieren will... den wrapper gleich als erstes schreiben und alles in diesem wrapper <div> rein schreiben ?

Frage 3 : Wie kann ich den Inhalt bereich nach innen mit padding versehen ? Wenn ich padding:10px; vergebe dann wird es breiter als 960px ... ich will padding nach innen haben und nicht nach außen ...

Frage 4: wäre ein mouseover submenu für diese menuleiste möglich mittels css? das ich z.b mit der maus drüber fahre und es ein submenu mit anderen links zu sehen ist ...

P.S. vielen dank für deine Geduld und Hilfe

@dn3d_fanboy: danke dir auch für dein bemühen und hilfe

dn3d_fanboy · 02.11.2013

AW: CSS Menu fixieren?

zu Frage 2) Es wäre auf jeden Fall sinnvoll einen Warpper um die ganze Seite zu bauen. Denn ist der zentriert, sind es alle weiteren DIVs darin auch.

Wenn du allerdings, wie du es vorher hattest, einen Header über die gesamte Bildscirmbreite haben willst, dann solltest du erst den Headerbereich erstellen und die Navigation darin zentrieren. Anschließend dann den Wrapper einfügen.

zu Frage 3) ziehe das padding von der Gesamtbreite ab. Z.B. hast du ein padding von 10px links und rechts ist die Breite des DIVs nicht 960px, sondern 940px.

koenigsadler · 02.11.2013

AW: CSS Menu fixieren?

Das mein Code funzt wusste ich, wenn du mal soweit bist schaffst du das auch in 5 minuten.

zu1. den #content hattest du schon - den #inhalt habe ich hinzugefügt mit 960px dort ist deine Text drin.
was ich gemacht habe ist, die class="wrapper" beim content zu löschen, vllt ist dir diese deshalb nicht aufgefallen

Aber, der #Content liegt in #Header welcher unterhalb deines #Wrappers liegt, in dem die #Nav liegt. Da der Code fließt, ordnet sich der #Header und somit der #Content (samt #Inhalt) unterhalb deines #Wrappers an. Das ist Verschachtelung.

zu2. du solltest bei jedem Inhalt eine eigene Id vergeben "wrapper" ist kein universal "dingens" du schreibst in dein html z-b id="mein-spezieles-pueppchen"
und sprichst diese ID dann im css an mit #mein-spezieles-püppchen{}an.
Du kannst auch verschieden IDs gleichzeitig ansprechen, in dem du sie in CSS mit einem Komma trennst z-B #mein-spezieles-püppchen, a{}. der Name einer ID sollte für jedes Element (div) einzigartig sein. Wenn du nun eine ID zentrieren willst, vergibst du margin-left:auto; margin-right:auto;!
damit positioniert sich das element automatisch mittig anhand der seiten seines Eltern elementes. Das ist schwer zu erklären für den anfang.

zu3. es gibt 2 allgemeine Methoden um Abstände zu bestimmen, Padding und Margin. mit Padding bezeichnet man den Innenabstand und mit Margin den Aussenabstand. (na leute besser kann mans glaube ich nicht sagen). lange rede...also, wenn du einem Objekt ein padding zuweisst musst du dies von der gesammt größe abziehen. In deinem Fall würde die Angabe Padding:10px; bedeuten das du die width auf 940px senken musst und von der Höhe musst du auch 20px abziehen, falls diese ein fester wert ist. Bei % Angaben brauchst du nichts abziehen.. (da sich das Padding auf link und rechts bezieht sowie auf oben und unten) Warum das so ist könnte ich dir auch noch erklären aber ich bin mittlerweile müde

zu4.
ja das ist möglich, dazu musst du allerdings ein wenig mehr Ahnung haben.
Im Grunde ist das mit simplem Hover möglich, bisschen Display-none hier, nen paar ul's und li's... Such dir was passendes bei Problemen findest du mich hier oder wo anderst

Ich helfe gerne, und vorallem, wenn man trotz Kritik so freundlich bleibt wie du. Geduld? ich? NIEMALS!