Schrift mit farbigem Hintergrund definieren

RaBo · #1 (**permalink**) 31.03.2009, 13:30

Hallo an alle im Forum!
Könnt ihr mir bitte weiterhelfen? Ich hab ein Problem mit der Formatierung der Schrift.
also die Ausgangssituation:
Ich habe die Schrift so definiert:

Code:

#mainmenu_left a, #mainmenu_right a
{
    font-family: Verdana, Helvetica;
    line-height: 150%;
    background-color: #fff200;
    font-weight: bold;
    color: #000000;

}

Wie mache ich, dass die definierte Hintergrundfarbe einen etwas größeren Bereich abdeckt. Ich hab mal probiert

Code:

margin: 5px 10 px 5px 10px;

zu definieren, aber das hat nichts gebracht.

Ideal wäre übrigens ein absoluter Wert: z. B. Höhe 12px Breite 100px. Muss ich da ein Hintergrundbild nehmen? Dieser Versuch hier hat auch nix gebracht:

Code:

#mainmenu_left a, #mainmenu_right a{

    font-family: Verdana, Helvetica;
    line-height: 150%;
background-image: url(../images/bg-schrift.gif);
    font-weight: bold;

    color: #000000;

}

Danke für Ideen!
Raphael

fox · #2 (**permalink**) 31.03.2009, 13:56

Wie wärs mit einem Innenabstand?

Code:

padding: 5px 10 px 5px 10px;

Elchi3 · #3 (**permalink**) 31.03.2009, 13:57

Mahlzeit,

damit du den Links Höhe und Breite zuweisen kannst, musst du diese mittels

Code:

display: block;

erstmal in ein Blockelement umwandeln.

In den FAQs findest du auch einen Eintrag zu Menüs:
http://xhtmlforum.de/40267-faq-h-ufi...und.html#faq10

RaBo · #4 (**permalink**) 31.03.2009, 15:57

Zitat:

Zitat von Elchi3

Mahlzeit,

damit du den Links Höhe und Breite zuweisen kannst, musst du diese mittels

Code:

display: block;

erstmal in ein Blockelement umwandeln.

Funktioniert wunderbar!

Code:

#mainmenu_left a{
    display: block;
    background-color: black;
    text-indent: 10px;
    font-family: Verdana, Helvetica;
    line-height: 150%;
    font-weight: bold;
    color: #fff200;
}

Nach dem selben Prinzip habe ich auch noch a:hover definiert, jetzt habe ich einen schönen Mouseover-Effekt.

Eine letzte Frage bleibt noch offen: Wie kann ich in der Liste den Link, der gerade die besuchte Unterseite zeigt, farbig hervorheben? Ich meine das so: Ich habe z. B. 3 Unterseiten A, B und C. Wenn ich gerade auf A bin, soll der Link mit A andersfarbig sein, wenn ich auf B bin der Link mit B.

Wäre schön, wenn mir jemand helfen könnte, dann ist mein Projekt fertig!
Grüße!
Raphael

Elchi3 · #5 (**permalink**) 31.03.2009, 16:57

Hi nochmal,

also an der Stelle kannst du dein Menü um eine Klasse z.B. ""current" erweitern. Beispiel:

Code:

<ul>
<li><a href="#">Link1</a></li>
<li class="current"><a href="#">Aktive Seite</a></li>
<li<a href="#">Link3</a></li>
</ul>

Dann kannst du mittels ".current" stylen.
Besser wäre es noch, wenn gar kein (Deppen-)Link auf die grade aufgerufene Seite zeigt. Der Linktext also nur im Listenelement steht.

Das geht auch Serverseitig (PHP):
Deppenlink entfernen [toscho.design]

RaBo · #6 (**permalink**) 31.03.2009, 18:25

Zitat:

Zitat von Elchi3

Hi nochmal,

also an der Stelle kannst du dein Menü um eine Klasse z.B. ""current" erweitern. Beispiel:

Code:

<ul>
<li><a href="#">Link1</a></li>
<li class="current"><a href="#">Aktive Seite</a></li>
<li<a href="#">Link3</a></li>
</ul>

Dann kannst du mittels ".current" stylen.
Besser wäre es noch, wenn gar kein (Deppen-)Link auf die grade aufgerufene Seite zeigt. Der Linktext also nur im Listenelement steht.

Das geht auch Serverseitig (PHP):
Deppenlink entfernen [toscho.design]

Also den Deppenlink entfernen, so wie es auf der externen Seite vorgeschlagen wird, klingt gut, überschreitet aber meine Fähigkeiten absolut.

Deine Variante funktioniert - so sehe ich das - aber nur, wenn die Seite statisch in HTML gecodet ist. Dann kann ich ganz easy die Klasse "current" für den Text (ohne Link) verwenden. Sobald die Inhalte der Liste aus einer Datenbank generiert werden, kann ich ja die Klasse nicht mehr zuordnen.

Verstehe ich das richtig?
Grüße!
Raphael

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE/Firefox - Baseline ist mal Schrift, mal Hintergrund	KnutsenBB	CSS	4	04.05.2009 13:36
Problem mit Hintergrund und Schrift	stevie99	CSS	7	16.11.2007 14:18
Weiße Schrift erscheint auf rotem Hintergrund unscharf	Bartender	CSS	3	20.08.2007 20:33
Helle Schrift auf dunklen Hintergrund	Mesh	(X)HTML	6	06.08.2007 20:31
Div Orientierung	Leonidus	CSS	22	30.05.2007 17:05