Menüleiste: Margins/Padding Text+Images

nextstep

Hallo zusammen,

ich bastele gerade an der Seite für ein Jugendcamp und nutze WP, weil´s eigentlich benutzerfreundlich ist. Bei der Designanpassung komme ich allerdings an einer Stelle nicht weiter.

Wie kann ich in der Menüleiste Text und Hintergrundimage gegeneinander ausrichten? Habe im Style.css immer nur beides zusammen bewegen können.

Hier mal der Link zu Seite

Und hier der Menü-Code:

Zitat

#content_bg{
float:left;
height:7px
background:url(images/content_bg.gif) no-repeat;
}
#menu{
float:left;
width:215px;
padding:0px 25px 14px 0px;
overflow:hidden;
}
#menu ul{
margin:14px 0px 14px 0px;
}
#menu ul img{
margin:0px;
}
#menu img{
margin:0px 0px 9px 0px;
}
#menu li{
padding:0px 0px 0px 61px;
height:32px;
}
#menu li.page-item-11{
width:215px;
height:40px;
background:url(images/menu_li_bg1.gif) no-repeat left bottom;
}
#menu li.page-item-21{
width:215px;
height:40px;
background:url(images/menu_li_bg2.gif) left bottom no-repeat;
}
#menu li.page-item-61{
width:215px;
height:40px;
background:url(images/menu_li_bg3.gif) left bottom no-repeat;
}
#menu li.page-item-91{
width:215px;
height:40px;
background:url(images/menu_li_bg4.gif) left bottom no-repeat;
}
#menu li.page-item-101{
width:215px;
height:40px;
background:url(images/menu_li_bg5.gif) left bottom no-repeat;

}/

Alles anzeigen

Danke für die Hilfe!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marcus[IS]

Also ich weiß nicht, ob es nur mir so geht.

Aber ich verstehe die Frage nicht so ganz. ;)

Was meinst du mit gegeneinander ausrichten?

Möchtest du einen Hover Befehl einfügen, so dass sich die Farbe den Pfeils im Auswahlmenü ändert, oder eine andere Grafik eingefügt wird, wo der Pfeil näher an dem Link steht, wenn man auf mit dem Mauspfeil auf den Link geht?

nextstep

Sorry für die komplizierte Ausdrucksweise. Die Pfeile sollen einfach mittig zum jeweiligen Text-Menüpunkt augerichtet sein.

Marcus[IS]

Ah okay, dass verstehe jetzt sogar ich. :)

Soweit ich das sehen kann, ist diese Passage in der CSS für die Linktexte im Auswahlmenü verantwortlich, da die Pfeile ja als Hintergrundgrafik stehen muss also der Text Angepasst werden.

Code

}
#menu li{
[COLOR=Red][B]     padding:0px 0px 0px 61px;[/B][/COLOR]
    height:32px;
}

Also bei selfthml habe ich bezüglich der 4 Werte folgendes gelesen.

Zitat

Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.

Wie man ja an deinem css erkennen kann ist der 4. Wert 64px und somit wird der Text um 64 Pixel nach rechts verschoben, da vom linken Startpunkt an erst mal ein Freiraum in der Größe 64px eingefügt wird.
So wie es aussieht und ich es vom selfhtml her so verstehe musst du also den Ersten Wert auch noch anpassen, damit oberhalb des Text ein Freiraum eingefügt wird und der Text somit um x Pixel nach unten rutscht.
Wie hoch der Wert sein muss, kann ich allerdings nicht so sagen, da musst du etwas rumprobieren.
Ich hoffe das hilft dir weiter. ;)

nextstep

Habe das ganze jetzt mal unelegant mit Bildbearbeitung gelöst und den Pfeil auf dem Hintergrundbild neu platziert. Wie man das Hintergrundbild richtig ausrichtet ohne den text mit zu verschieben, wüsste ich trotzdem ganz gerne.

Marcus[IS]

Hi,

wird auch bei Selfhtml erklärt. ;)

Doch wie das jetzt auf dein css passend gemacht werden könnte, weiß ich aus dem Stehgreif aber jetzt auch nicht.

alchymyth

css erlaubt die, beim hintergrundbild die position pixelgenau anzugeben:

anstatt:

Code

background:url(images/menu_li_bg1.gif) no-repeat left bottom;

mit kooprdinaten:

Code

background:url(images/menu_li_bg1.gif) no-repeat 12px 34px;

referenzpunkt ist oben linke ecke; zuerst x-koordinate, dann y-koordinate;

geht auch gemischt:

Code

background:url(images/menu_li_bg1.gif) no-repeat -11px  bottom;

Zitat

xpos yposThe first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other [COLOR=#0066cc]CSS units[/COLOR]. If you only specify one value, the other value will be 50%. You can mix % and positions

http://www.w3schools.com/css/pr_background-position.asp

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menüleiste: Margins/Padding Text+Images

Jetzt mitmachen!