Hilfe für CSS gesucht

    Ich hoffe ich bin hier im Bereich richtig und es geht hier allgemein um Designanpassung und nicht um Eure Produkte :whistling:
    - ansonsten schiebts bitte weg *g*


    Und zwar hatte ich heut eine Idee, ein Mainmenü zu gestalten .. und probiere nun schon über 4 Stunden dran rum - und mein Stolz, niemanden fragen zu wollen, ist nun gebrochen :/
    Ich bekomms einfach nicht gebacken und hab schon zig Möglichkeiten angetestet :(


    So hatte ich mir das angedacht...



    leider siehts aber schon mal so aus:



    sprich: es sitzt viel zu weit oben und nicht mittig zwischen Logo und Forum .. die Grafik ist auch nicht mittig im Menü..
    die Schrift sitzt auch total komisch .. und es passt einfach nicht, wie ich das möchte :(


    und im Hover wirds noch "wunderbarer" ;(



    Mein Code:



    Was mach ich falsch? :(


    Der Stil ist jetzt für nix und niemanden .. und nur ne Spielerei...
    ihr müsst also nicht sofort rennen - aber mich intressierts dennoch, ob man das überhaupt mit reinem CSS so umsetzen kann?


    Muss doch irgendwie gehen, Bilder statt Buttons zu nutzen, oder? Im 3er gings doch auch oO


    Liveansicht: http://www.cybertechteam.de
    Stilname: Simsational



    Danke schon mal im Vorraus, für jegliche Tips und Hilfe :thumbsup:

    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:

    Code
    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:

    Danke dir, für deine Hilfe :thumbsup:


    mit dem background-image, das wusste ich jetzt so auch noch nicht - wieder was dazu gelernt :D
    (bin auch noch voll in der Anfangs-CSS-Lernphase oO )
    nun hat das zumindest schon mal geklappt, dass ich den Plumbbob ein wenig höher und von der Höhe her einigermassen mittig bekam :)


    Allerdings kann ich meine Headergrafik höhenmässig so klein machen, wie ich möchte..
    dennoch fehlt nun die obere Spitze meines Plumbbobs :(


    liegt aber vll auch daran ?

    Code
    /*Logoanpassungen*/


#logo a {
height: auto;
width: 100%;
    text-align: center;
}


    und beim Hovereffekt kam ich auch noch nicht wirklich weiter :(


    Heut aber auch keine wirkliche Lust mehr ||

    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

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


    wird

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


    Code
    .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

    *done*


    so ok?


    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:


    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;.

    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)?