zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sticky Header - Zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.06.2014, 19:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Frage Sticky Header - Zentrieren

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.06.2014, 23:34
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Toro (16.06.2014 um 23:36 Uhr) Grund: edit
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.06.2014, 00:24
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von dstarship Beitrag anzeigen
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
Mit Zitat antworten
  #4 (permalink)  
Alt 17.06.2014, 10:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Daumen hoch

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
Mit Zitat antworten
  #5 (permalink)  
Alt 17.06.2014, 11:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

und wieder mal zu früh getreut

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

Stichwörter
header, sticky header, zentrieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:34 Uhr.