zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sticky Header -> Zentrieren (Wordpress / Avada Theme 3.4.3)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.06.2014, 10:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard Sticky Header -> Zentrieren (Wordpress / Avada Theme 3.4.3)

Hallo,
ich möchte auf einer Webseite für einen Kunden den Sticky-Header zentrieren der beim herunter scrollen auftaucht. Besser gesagt das Menü in dessen. Alle meine Versuche das Menü mit float, margin oder positions tags zu zentrieren blieben bis jetzt absolut erfolglos. Bei Positionierungen in 50% verschiebt sich das Menü viel zu weit. Ich weiß nicht ob mir übergeordnete Tags dabei in die quere kommen.

Ich will das Menü im Sticky Header auf der exakt gleichen Position wie das eigentliche Main-Menü der Seite haben.

Das Main-Menu wird mit

HTML-Code:
float: none;
text-align: center;
zentriert. Das funktioniert aber leider nicht im Sticky-Header.

Habt ihr eine Idee?

Die Seite lautet www.ds.windrad-online.de
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.06.2014, 10:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Folgendes machen:

- bei nav#nav, nav#sticky-nav das float: right entfernen
- der ul darin gibst du text-align: center
- die li und a Elemente bekommen display: inline und dürfen NICHT floaten

Dann wirst du allerdings die Dropdowns noch etwas anpassen müssen, weil die neuen Styles sich natürlich auch auf die li's und a's darin auswirken.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.06.2014, 11:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

Hallo, danke für dein Antwort.

Doch leider funktioniert es immer noch nicht.

Ich habe folgenden Code hinzugefügt:

HTML-Code:
nav#nav, nav#sticky-nav {
float: none!important;}

nav#nav, nav#sticky-nav ul {
text-align: center!important;}

nav#nav, nav#sticky-nav li a {
display: inline!important;
float: none!important;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 05.06.2014, 11:54
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Die li's dürfen ebenfalls nicht floaten und benötigen ein display:inline.

Du sprichst in deiner letzten Anweisung nur die a Tags an, hast also die li's vergessen
Mit Zitat antworten
  #5 (permalink)  
Alt 05.06.2014, 12:30
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Arbeite mit Kindselektoren Elternelement > Kindelement Dann betrifft eine Regel auch nur die Elemente erster Ebene.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #6 (permalink)  
Alt 05.06.2014, 12:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

Tatsache! Vielen Dank!

..und wie sag ich jetzt dem Dropdown Menü das er die vorherigen Einstellungen behält. Das ist so ja jetzt völlig zerstört.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.06.2014, 12:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Der Vorschlag von Thielo klingt natürlich gut
Mit Zitat antworten
  #8 (permalink)  
Alt 05.06.2014, 12:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

ok, also mit child elementen. ich versuche das gleich mal umzusetzen. danke
Mit Zitat antworten
  #9 (permalink)  
Alt 05.06.2014, 13:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

hallo nochmal,

ich weiß zwar das ich mit child-elementen arbeiten muss, nur weiß ich nicht welches tag ich direkt ansprechen muss, oder welches ich auslassen muss.

Bei mir zerstückelt sich alles, jedoch ohne erwünschtes Ergebnis.

Muss ich nur das erste Tag ansprechen mit :nth-child(1) ?

Mein jetziger Code schaut so aus:



HTML-Code:
nav#nav, nav#sticky-nav {
    float: none!important;}

nav#nav, nav#sticky-nav ul {
    text-align: center!important;}


nav#nav, nav#sticky-nav li, nav#sticky-nav li a  {
    display: inline!important;
    float: none!important;
}
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.06.2014, 13:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Unglücklich

Achso ihr meint mit den '>' und '<' elementen

HTML-Code:
nav#nav, nav#sticky-nav {
    float: none!important;}

nav#nav, nav#sticky-nav > ul {
    text-align: center!important;}


nav#nav, nav#sticky-nav > li, nav#sticky-nav li > a  {
    display: inline!important;
    float: none!important;
}
Ich weiß nicht wie ich die richtig einsetzen muss.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
header, sticky header, wordpress, 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
Header fixieren im Wordpress Theme? Killaoptik CSS 0 01.05.2012 20:48
divs für wordpress theme zeitgeisth CSS 34 23.02.2009 16:36
Header "Rahmen" kleiner machen, wie? prokik CSS 1 17.08.2007 00:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:55 Uhr.