Beiträge von Auge

Poste mal bitte den gesamten Code, der mit dem Hauptmenü zu tun hat wie er aktuell ist.

Ich hab was entdeckt, möchte es aber nochmal genauer mit deinem Code abgleichen

Kannst du auch mal bitte die Grafik selbst (das grüne Ding) auf eine Höhe von 70 Pixel skalieren (aktuell 100) und die Datei dann hochladen (überschreiben)?

Es sollte sich auch nicht groß etwas tun. Wir haben nun einem anderen Selektor das Bild zugeordnet, damit man den Link selbst frei konfigurieren können sollte. Ferner haben wir nun weniger Abstands-Angaben drin, die das Ganze etwas entzerren.

Mach aus dem margin-top bei .mainMenu > ul > li.active bitte -5px und entferne bei .mainMenu > ul > li das padding-bottom: 79px;.

Jap, genau.

So, hier mal ein wenig Code. Vergleich den bitte mit deinem gerade eben geposteten Code und entferne/ändere entsprechend deinen Code ab, sodass er meinem gleicht:

.mainMenu > ul > li.active {
    background-image: url("../images/simsational/buttonbg.png");
    background-repeat: no-repeat;
    background-position: 15px -15px;
    margin-top: -3px;
}


#mainMenu > ul > li.active > a {
    border: 0;
    color: #fff;
    margin-bottom: 72px;
    background-color: transparent;
    font-weight: normal;
}


#mainMenu > ul > li.active > a:hover {
    font-weight: normal;
}

Zitat von Bibini

Allerdings kann ich meine Headergrafik höhenmässig so klein machen, wie ich möchte..

Mein Fehler.

Anderer Weg:

Trenne mal bitte die Selektoren die zum Schluss > a haben von denen ohne > a am Schluss. Ich denke, das macht es einfacher.
Sprich z.B. aus

.mainMenu > ul > li > a,.mainMenu > ul > li{
    margin-right: 5px;
    border: 0px;
padding-bottom: 79px;
}

wird

.mainMenu > ul > li > a {
    margin-right: 5px;
    border: 0px;
padding-bottom: 79px;
}

.mainMenu > ul > li {
    margin-right: 5px;
    border: 0px;
padding-bottom: 79px;
}

Dann kann ich besser schauen und man kann es individueller einstellen. Die miteinander verknüpften Selektoren, die vermutlich (!) unterschiedliche Angaben brauchen, verwenden aktuell bei dir gleiche Angaben, die sich wohl irgendwie beißen, wenn ich das beim selbst rumtesten richtig sehe.

Zitat von Bibini

und beim Hovereffekt kam ich auch noch nicht wirklich weiter

Zitat von Auge

wir fangen erstmal mit der normalen Darstellung an

Hi,

also wir fangen erstmal mit der normalen Darstellung an und ich liste auf, was ich deinem geposteten Code hinzufügen oder ändern würde.

• Nach Zeile 24 würde ich padding-bottom: 5px; einfügen.
• In Zeile 23 hast du ein h bei height vergessen. Allerdings kannst du einfach nur height: 100px; nutzen - es macht keinen Sinn min-height und max-height mit dem gleichen Wert zu versehen.

Des Weiteren würde ich die Button-Grafik mit background-image einfügen und dann kannst du sie mit background-position positionieren:

background-image: url("../images/simsational/buttonbg.png");
background-color: transparent;
background-repeat: no-repeat;
background-position: 15px -15px;

Deine Headergrafik musst du dann ein wenig in der Höhe niedriger machen, weil die Buttongrafik sonst überdeckt wird.

Das sähe dann so aus:

Vielleicht ein individuelles erstellen lassen als Alternative?

iPhone 5s, iOS 8.1.2 (damit einhergehend die entsprechende Safari - Version).

Ich weiß echt nicht ob es Zufall ist oder was dahinter steckt....

Auf dem Weg nach Stuttgart heute morgen, habe ich auf unterschiedlichen Seiten gesurft (hauptsächlich Burning Board 4 Seiten) - die einzigste Seite, bei der mein Safari abgeschmiert ist, war cls-design.....

Hatte das schon mal jemand? Woran kann das liegen?

Das will ich hoffen, bin auch ganz heiß drauf, das Update zu installieren