Wordpress: CSS-Probleme mit der Zentrierung eines horizontalen Menüs und geheimnisvolle Polsterungen um Menü

Question

Ich erstelle eine Website mit Wordpress für meine Schwiegermutter (das ist für die girly Design). Im Grunde bin ich fast fertig, aber ich bin mit zwei Problemen im CSS über meinen Kopf hinweg. Das sind selbst aus meiner Sicht sehr grundlegende Probleme, aber mit stundenlangen Bastelarbeiten habe ich keine Ideen mehr und Google hat mir dieses Mal nicht geholfen. Es ist eine Weile her, seit ich CSS erstellen oder ändern musste.

Erstes Problem:

Ich kann das horizontale Menü Center. Ich habe versucht, die float:left zu entfernen, ich habe versucht, es durch float:none zu ersetzen, und ich habe die display: block und display:inline Linien in Inline-Blöcke geändert, aber das Menü bleibt in seiner Position. Der einzige Unterschied, den ich gemacht habe, ist, das gesamte Menü an den Anfang der Seite zu verschieben, und das ist nicht erwünscht. Was könnte das Problem sein?

Zweites Problem:

Es scheint Polsterung (die weißen Linien) am oberen Rand des Menüs und unten und oben auf der kleinen Karte (mobil) zu sein. Ich habe alle Padding-Linien in der CSS aufgespürt, aber keiner von ihnen wirklich einen Unterschied machen, nur eine, die die horizontalen Polsterungen entfernt und das ist nicht gewünscht.

Ich wäre wirklich froh, wenn jemand sieht, wo ich falsch gelaufen bin!

Die Website ist auf http://janenlahwr.cluster020.hosting.ovh.net/

Vielen Dank im Voraus!

Mit freundlichen Grüßen,

Tero Korhonen Lappeenranta, Finnland

Answer 1

Hallo Tero,

das erste Problem hat wirklich schnelle Lösung - CSS3 Flexbox. Sie können darüber lesen on this w3schools site. Entfernen Sie nicht mehr float: left und fügen Sie display: flex und justify-content: center zu .main-navigation ul hinzu. So soll es wie folgt aussieht:

.main-navigation ul { 
    margin: 0px 0 0 0; 
    padding: 0px 0; 
    padding-left: 0px; 
    list-style-type: none; 
    display: flex; 
    justify-content: center; 
} 

Zweites Problem, das Sie mit der Einstellung div.site-logo max-height = Höhe Ihres Logos beheben (ich sehe, dass ist 200px). Also in diesem Fall sollte wie folgt aussieht:

.site-logo { 
    min-height: 70px; 
    padding: 0px; 
    float: left; 
    line-height: normal; 
    max-height: 200px; 
} 

Edit:

Sorry, ich forgott für niedrigere Auflösungen überprüfen. Es gibt ein Problem mit . Sie setzen in style.css: 640 overflow: hidden und es funktioniert korrekt, da die Auflösung über 800px ist. Wenn nicht aktiviert dann diese Regel:

@media only screen and (max-width: 800px) { 
    #main { 
     overflow: visible; 
    } 
} 

, die für #mainoverflow: hidden vorherige richtige Regel überschreibt.Sie haben also zwei Möglichkeiten: Löschen Sie diese Regel für Bildschirme über 800 Pixel oder ändern Sie diese Eigenschaft von sichtbar zu versteckt.

Ich hoffe, ich habe Ihnen bei Ihren Problemen geholfen :) Viel Glück!

Answer 2

Für das Menü Problem, Ihre CSS-Regeln wie folgt ändern:

.main-navigation ul { 
    margin: 0px 0 0 0; 
    padding: 0px 0; 
    padding-left: 0px; 
    list-style-type: none; 
    /* remove float: left; */ 
    text-align: center; /* added */ 
    width: 100%; /* added */ 
} 
.main-navigation ul li { 
    position: relative; 
    display: inline-block; 
    /* remove float: left; */ 
    text-align: center; /* not necessary */ 
}