Sticky Header - Zentrieren

dstarship · #1 (**permalink**) 16.06.2014, 19:56

Moin,

ich hab ein kleines Problem mit der Zentrierung meines Sticky-Headers. Ich habe ihn zwar zentriert bekommen, doch leider bleibt er an der linken Seite kleben wenn ich das Browserfenster kleiner ziehe.

Ich habe bereits versucht ihn über:

HTML-Code:

  position: absolute;
    left: 50%;
    width: 1280px;
    margin-left: -640px;

zu zentrieren, jedoch muss ich dann einen margin top Wert eingeben, der dafür sorgt das sich wenn ich mich im Wordpress Admin Bereich befinde sich der Header hinter das Admin Panel schiebt.

Gibt es noch eine andere Variante den Header zu zentrieren?
Den Width Wert muss ich nutzen um den Header zu beschränken. Der Schatten zieht sich sonst über die gesamte Breite der Webseite.

Seite: LINK

THX

Toro · #2 (**permalink**) 16.06.2014, 23:34

Code:

#header {
   position: relative;
   width: 1280px;
   margin: 0 auto;
   padding: 0;
}

Bei mei 'margin' kannst Du z.B. '2px auto' einsetzen, dann hat es oben und unten je 2px Platz, oder kannst '2px auto 0 auto' einsetzen, dann hat es nur oben 2px platz. Wenn das ganze ein Hintergrund-Bild hat, kannst Du es mit 'padding' (im #header) hin und her schieben, sonst mit margin des Hintergrunds, nicht des #headers. Falls Du Text da drinne hast solltest du auf jeden Fall den padding im #header beachten.

edit: Mein code ist für CSS, nicht für HtML wie bei Dir oben steht

K.Roland · #3 (**permalink**) 17.06.2014, 00:24

Zitat:

Zitat von dstarship

Moin,

...doch leider bleibt er an der linken Seite kleben wenn ich das Browserfenster kleiner ziehe.

ds.windrad-online.de/
#8%20(Zeile%202264) #8

Code:

}
#header-sticky.sticky-header .sticky-shadow {
    margin-left: auto;
    margin-right: auto;
    width: 1280px;
}

Darum.
media .. hat diese Feste Weite.
__________
MfG Roland

dstarship · #4 (**permalink**) 17.06.2014, 10:27

Hi,

danke für eure Antworten. Ich habe eine andere Lösung gefunden. Ich hätte den Wert gleich eine Ebene höher ansetzen sollen. Also nicht auf den Shadow, sondern auf den Sticky-Header direkt.

So hats auch mit der vorgegebenen Weite und der Positionierung geklappt.

thx

dstarship · #5 (**permalink**) 17.06.2014, 11:04

und wieder mal zu früh getreut

jetzt ist das mega-menü im sticky-header wieder falsch positioniert... wie bekomme ich das nun zentriert?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Sticky Header -> Zentrieren (Wordpress / Avada Theme 3.4.3)	dstarship	CSS	19	10.06.2014 08:46
Abstandproblem im #header	Bake	CSS	8	26.11.2011 17:55
Sticky Header mit flexibler Höhe?	Kirladu	CSS	5	24.11.2010 07:27
header verrutscht...	weblearner	CSS	6	03.12.2008 19:34
Header zentrieren	pgl	CSS	4	23.05.2008 09:45