Navigation über dem Header umändern

[Traiceheart]

Hallo alle miteinander
Also ich habe mal hier wenn ich mich nicht irre einen Thread gefunden wie man die Navigation über dem Header so umändern kann:
http://www.abload.de/img/navigationhwugu.png

Wie man die Navigation über dem Header anbringt weiß,aber nicht wie man sie so umändern.
In der Suche habe ich vielen eingegeben: Header+Navigation,Navigation etc... nichts kam dabei raus.

Noch dazu sagte mir ein Kumpel das sich der Code davon angeblich geändert haben sollte,deswegen frage ich ja,ansonsten würde ich ja weiter suchen,ich würde es nähmlich gerne in meinem Forum mit einbringen.

Lg,
Traiceheart

[Günther]

Hallo,

du hast deine Navibuttons ja schon mit CSS gestaltet:

Code:

.mainmenu {
  background-color: #E0DAB1;
  border: 1px dotted white;
  border-radius: 60px 7px 60px 7px;
  color: #C5B6A3;
  padding: 3px 9px 3px 3px;
}

Deshalb sehen sie derzeit so aus:


Kannst du dir vorstellen, dass die Buttons, wenn du Hintergrundfarbe, border-radius etc. änderst und einen entsprechenden (ev. negativen) margin-Wert sowie Schrifteigenschaften bestimmst, dann ganz einfach so aussehen?


Das ist doch kein großer Unterschied zu deiner aktuellen Navi-Gestaltung: Du musst nur den Code etwas anpassen und dann noch die Abstände/Schrift verändern, dann sieht sie doch schon wie auf deinem Screenshot aus.

Liebe Grüße
Günther

[Traiceheart]

Hey,Günther,
oh ich hatte vergessen dir zu sagen von welchen Forum ich sprece,tut mir leid,also da meine user sich einen Forenumzug wünschten musste ich nun ein neues Forum erstellen,dies werde ich auch gleich durch das alte ersetzen,es ist dieses hier: http://sweetpainofwolves.secretstories.org/forum

So und jetzt zu meinem Problem:Okay also den CSS Code habe ich jetzt angepasst,nur was ich noch nicht so perfekt hinbekomme ist,dass diese runden boxen in einander verlaufen,so wie auf dem screen,ich bekomme es nur so hin wie es halt in dem forum jetzt angezeigt ist.(Es wird nicht über den header gesetzt sondern noch halb drauf und es verläuft nicht ineinander und die Navigation bleibt nciht über dem header obwohl ich vorhin das navifix rausnahm.)

Lg.

[Günther]

Trägst du diese Forenadresse bitte auch in dein Profil ein? Danke.

Du bist schon auf einem guten Weg mit deinem aktuellen CSS.
Zum "Ineinander-Überlaufen" hatte ich dir schon einen Tipp gegeben:

Kannst du dir vorstellen, dass die Buttons, wenn du Hintergrundfarbe, border-radius etc. änderst und einen entsprechenden (ev. negativen) margin-Wert sowie Schrifteigenschaften bestimmst, dann ganz einfach so aussehen?

Zuerst mal solltest du die fixierte Navigation noch etwas nach unten setzen, damit sie oben nicht abgeschnitten dargestellt wird (und daraus den opacity-Wert entfernen):

#navifix {
height: 0;
left: 0;
position: fixed;
top: 20px;
width: 100%;
z-index: 50;
}

Danach erstellst du in der Navibutton-Zuweisung noch den negativen margin-Wert, von dem ich gesprochen habe, passt das padding nochmal an und fügst dann hier außerdem die opacity hinzu, etwa so:

.mainmenu {
background-color: #FFFFFF;
border-radius: 20px 20px 0 0;
font-size: 17px;
margin: -10px;
opacity: 0.8;
padding: 15px;
}

Dann würde sie so aussehen:


Ich denke, das bekommst du gut hin, oder?

Übrigens, wenn die Navi nicht mitscrollen soll, dann musst du bei der Position nur "fixed" durch "absolute" ersetzen:

#navifix {
height: 0;
left: 0;
position: absolute;
top: 20px;
width: 100%;
z-index: 50;
}

[Traiceheart]

Danke dir Günther,vielen lieben dank!
Ich habs hinbekommen!!
Ich muss jetzt nur noch versuchen,diese Navigation über dem header anzubringen
Du bist echt spitze in deinem Job

Somit kann hier geschlossen werden.
Schönen Abend noch!

Lg

[Günther]

Das freut mich, gern geschehen.

Dir ebenfalls noch einen angenehmen Abend.
-closed-