Lexi Help
Partner
www.forumieren.com

Navigation über dem Header umändern

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt Navigation über dem Header umändern

Beitrag von Traiceheart am Do 21 März 2013 - 18:49

Hallo alle miteinander Wink
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

Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Navigation über dem Header umändern

Beitrag von Günther am Do 21 März 2013 - 18:54

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? Wink


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

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Navigation über dem Header umändern

Beitrag von Traiceheart am Do 21 März 2013 - 19:22

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.

Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Navigation über dem Header umändern

Beitrag von Günther am Do 21 März 2013 - 19:35

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

Du bist schon auf einem guten Weg mit deinem aktuellen CSS.
Zum "Ineinander-Überlaufen" hatte ich dir schon einen Tipp gegeben:
@Günther schrieb: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;
}

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Navigation über dem Header umändern

Beitrag von Traiceheart am Do 21 März 2013 - 19:47

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

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

Lg


Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Navigation über dem Header umändern

Beitrag von Günther am Do 21 März 2013 - 19:55

Das freut mich, gern geschehen. Smile

Dir ebenfalls noch einen angenehmen Abend. Smile
-closed-

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten