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:

#mainMenu a {
padding-top: 45px;
height: 22px;
widht: 104px;
border: 0px !important;
}




#mainMenu {
padding-left: 20px;
}




#mainMenu img {
display: none;
}

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

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

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.

.mainMenu a {
border: 0px !important;
padding-top:40px;
}




.mainMenu a:hover {
background-image: url('$global.images.location$indexMHover.png');
background-repeat: no-repeat;
height: 71px;
widht:140px;
}







.mainMenu li.first a,  .mainMenu li.firstActive a {
height: 71px;
widht:140px;
margin-left:10px;
margin-top:7px;
}




#mainMenu img {
display: none;
}

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

mfg

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:

.mainMenu a {
border: 0px !important;
padding-top:40px;
text-align: center;
width:104px;
height:71px;




}




.mainMenu a:hover {
background-image: url('$global.images.location$indexMHover.png');
background-repeat: no-repeat;
}







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




#mainMenu img {
display: none;
}

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

mfg

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:

#mainContainer {
width: 950px;
margin-left: auto;
margin-right: auto;
}




#main {
width: 920px;
}




.containerHead  {
background-image: url('$global.images.location$rahmenkopf.gif');
height: 35px;
}




.userPanelInner {
width: 980px; 
margin: 0 auto;
}




#header, #logo, #mainMenu, .mainMenuInner {
border: 0 !important;
}




.message {
margin-bottom: 30px;
}




.messageContentInner {
background-image: url('$global.images.location$bg_message.gif');
background-repeat: no-repeat;
background-color:#30190f;
}




.messageSidebar {
background-image: url('$global.images.location$bg_sidebar.gif');
background-repeat: no-repeat;
background-color:#30190f;
}




.messageInner {
background-color:#30190f;
}




.container-1 {
background-color:#ffffff;
}

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

Quote from nmichel

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

mmh das geht doch bei wbblite nicht oder ?