mainMenu - breite und Text zentrieren

  • Hallo

    ich habe auf der Basis meiner anderen Anfrage das Forum nach einer gleichlautenden Frage durchsucht - aber die entsprechenden Lösungen führten nicht zum Erfolg.
    Ich muss zusätzlich hinzufügen, dass ich mit css nicht viel anfangen kann - ich bin da ein gebranntes Kind.

    Ich möchte das mainMenu verändern.
    - hierzu habe ich die Icons deaktiviert und nur die Fasrbe der Links edietiert. Danach habe ich die Grundstrukur der Links in die Hintergrundgrafik eingefügt.
    - hier mal ein Bild (vgl. Anhang) des IST-Stands

    Ziel:
    + Ich habe die Hintergrundbilder in der immer gleichen Breite erstellt - ggf. kommen weitere Bilder später dazu.
    Nun soll der Text "Forum", "Mitglieder" u.ä. mittig im Feld stehen. Dazu muss man anfügen, dass das ganze etwas eingerückt sein muss - so 20px, da scrollimages noch hinzukommen sollen. die genau auf dem hintergrund deckungsgleich liegen.

    so sieht das derzeit aus:

    Das padding-top funktioniert recht gut - aber irgendwie der Rest nicht außer dem mainMenu img (was auch geht) - wenn ich das padding zu weit mache, dann ähm verschiebt sich das ganze zwar, ABER wenn ich dann z.B auf Forum klicke, wird mir die Memberlist angezeigt, weil das Feld allem Anschein nach noch im Forum-Feld hineinragt.

    UAWG - Um Antwort Wird Gebeten

    mfg
    K

  • Versuche mal statt

    CSS
    #mainMenu {
    padding-left: 20px;
    }


    dieses

    CSS
    .mainMenu li.first a,  .mainMenu li.firstActive a {
            margin-left:10px;
    }

    Edit: Bin leider noch selbst blutiger Anfänger bzgl. CSS ;)

    aber - dein List-Element sollte das Image vollständig und richtig bedecken:

    .mainMenu a {
    width: (imageBreite in Pixeln)px;
    height: (imageHöhe in Pixeln)px;
    text-align: center;
    padding-top: (Abstand des Buttontexts von Oberkante)px;
    }

    Dann mußt Du die ganze Buttonleiste nur noch entsprechend an die richtige Stelle schieben...

    Der Kopf ist rund, damit das Denken die Richtung wechseln kann (Francis Picabia)

    Edited 2 times, last by nmichel (October 3, 2011 at 12:10 AM).

  • Hallo

    Danke für Deine Antwort. Das brachte in der Tat eine Verbesserung. Dennoch änderte sich am wesentlichen Grundproblem nichts. Ich habe da ein paar verständnisprobleme - ich stelle mir das wohl nocht zu table-lastig in html vor.
    Wie ist das eigentlich - liegen die Buttons nicht in irgendeinem Rahmen drin oder so? oO

    Das wäre wichtig für mich so etwas zu erreichen, denn jetzt sind die Hoverbilder genau am Textanfang .. äähm ich habe das mal so skizziert. indem ich am Ehesten das Bild mit dem Hover anfüge. Hier sieht man, dass dieser orangene Rahmen nicht deckungsgleich mit dem dahinter ist. Der Ankerpunkt ist also direkt am Text "Forum" - aber eigentlich müsste das eine Art Box sein, die die Göße des Buttons dahinter hat (104x77) - ja ok ich werde wohl mal nen Kollegen Css konsultieren müssen.

    Das erste Bild zeigt den Idealzustand (geplant)

    mfg

  • Hi, hast Du meinen Edit gelesen??

    Schmeiß Deinen padding raus, versuche
    (1) den linken Rand des ersten Button richtig zu positioniern mit
    .mainMenu li.first a, .mainMenu li.firstActive a {margin-left: (LinkerRand)px;}
    (2) dann die virtuelle Buttongröße mit der Anweisung aus #2 zu skalieren..

    Der Kopf ist rund, damit das Denken die Richtung wechseln kann (Francis Picabia)

    Edited once, last by nmichel (October 3, 2011 at 12:29 AM).

  • Hallo Michel. Ja deinen Edit habe ich gelesen, just nachdem ich meine Antwort geschrieben habe.
    ich habe s mit ein paar Veränderungen probiert - jetzt funktioniert zumindest mal das mit dem hover. das mit dem Margin mmh ich probiere das mal gleich.

    Mal eine Frage - worin liegt eigentlich der Unterschied zwischen "#" und "." also #main oder .main ?

    mfg

  • Quote

    worin liegt eigentlich der Unterschied zwischen "#" und "." also #main oder .main ?

    Ehrliche Antwort: soo genau weiß ich's auch noch nicht ;)
    fragen wir BlackRider - der hat bestimmt nen guten Link :D

    Der Kopf ist rund, damit das Denken die Richtung wechseln kann (Francis Picabia)

  • HTML
    <div id="main" class="main"> 
    ...
    </div>

    id = #
    class = .

    Eine ID darf nur einmal auf auf der aktuellen Seite vorkommen, eine Klasse mehrmals. Zudem ist eine ID in CSS höher gewichtet als eine Klasse. Daher lässt sich eine ID nur durch höher stehende IDs oder durch den Zusatz !important überschreiben.

    Noch Fragen? ;)

  • Hallo

    Rider - ich bin etwas perplex. irgendwie scheine ich mal meine # und . durchsehen - ich habe da simmer nach gutdünken genommen.

    ich habe das nun verändert - also es klappt schon fast:

    Problem nun - der Folge-Button ist irgendwie zu weit weg von dem ganzen Kram - 20px oder so: Bild:

    mfg

  • Ich würde mich dem ganzen mal so nähern:

    Edit: richtig width statt widht in #9 - Kopierfehler ;)

    Der Kopf ist rund, damit das Denken die Richtung wechseln kann (Francis Picabia)

  • Hallo Michel

    ich habe das mal eingebaut.
    Das Ergebnis ist ... nunja - eine Veränderung - ohne jedoch etwas sagen zu wollen ... eher naja also .. es sieht nicht so aus wie es aussehen soll - jetzt ist der Text auch nicht mehr mittig und der Button "Mitglieder" ist noch weiter nach rechts gerutscht

    mfg

    Der Vollständigkeit halber - das hier steht in css1:

    vielleicht stimmt hier was nicht - das margin-left und margin-right in mainContainer hat doch keine Auswirkungen hierauf?

  • Dann ist .mainMenu .a {width: ??px} zu groß

    haha LOL .. stimmt. Ich dachte, dass die Breite die gleiche sein müsse, wie der Originalbutton - jetzt habe ich mal das Margin-left:10px von der Breite abgezogen - jetzt passts auch.

    Ich bedanke mich bei Dir herzlichst für Deine Unterstützung Michel :)

    mfg

  • keine Ursache - immerhin kennen wir jetzt den Unterschied zwischen #main und .main ;)

    Dabei denke ich, es würde einfacher gehen:
    einfach die Images transparent ablegen und im APC definieren
    Hintergrundbild laden und bei Hoover austauschen

    gn8 Frank

    Der Kopf ist rund, damit das Denken die Richtung wechseln kann (Francis Picabia)

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!