✔ Text Positionierung bei Link

[Html]

Hallo zusammen...

Habe gerade mal versucht einen Link mit css etwas zu formatieren. Nun bin ich aber auf ein Problem gestoßen. Ist es möglich den Text mit Pixelangaben zu positionieren. Ich weiß das man den Text links, mittig oder rechts ausrichten kann aber gibt es noch etwas dazwischen.
Ich möchte also, das der Text so 5px neben dem Background-Image steht...

a {
	display: block;
	color: #F0FFFF;
	background: Red url(file:///C|/Programme/xampp/htdocs/feuerwehr/bilder/design/Dot_hover.gif) no-repeat left;
	width: 134px;
	height: 22px;
	text-align: left;
}

mfg,Olli

 

[Maik]

Mit der padding-Eigenschaft lässt sich der gewünschte Innenabstand definieren:

a {
	display: block;
	color: #F0FFFF;
	background: Red url(file:///C|/Programme/xampp/htdocs/feuerwehr/bilder/design/Dot_hover.gif) no-repeat left;
	width: 134px;
	height: 22px;
	text-align: left;
        padding: 0 0 0 5px; /* Innenabstand oben rechts unten links */
}

 

[Html]

Super danke, stimmt damit gehts, habe zuerst gedacht dann würde sich auch der Punkt verschieben aber der liegt ja im Hintergrund.

Aber nochwas, warum lässt sich der Text nicht mit vertical-align: z.B bottom; formatieren. Er bleibt immer oben stehen.

mfg, Olli

 

[Maik]

Um den Text am unteren Elementrand zu positionieren, müßtest Du die Höhenangabe rausnehmen und dafür einen entsprechenden Innenabstand nach oben bestimmen:

a {
        display: block;
        color: #F0FFFF;
        background: Red url(file:///C|/Programme/xampp/htdocs/feuerwehr/bilder/design/Dot_hover.gif) no-repeat left;
        width: 134px;
        text-align: left;
        padding: 10px 0 0 5px; /* Innenabstand oben rechts unten links */
        text-decoration: none;
}

 

[Html]

Das bringt mir aber leider nichts. Die Box muss 22px hoch sein und der Text soll mittig hinter dem Punkt stehen.

mfg,Olli

 

[Maik]

Wie jetzt? Soll der Linktext unten oder in der Vertikalen mittig stehen?

Wenn letzteres, dann verwende hierfür die line-height-Eigenschaft:

a {
        display: block;
        color: #F0FFFF;
        background: Red url(file:///C|/Programme/xampp/htdocs/feuerwehr/bilder/design/Dot_hover.gif) no-repeat left;
        width: 134px;
        line-height: 22px;
        text-align: left;
        padding:  0 0 0 5px; /* Innenabstand oben rechts unten links */
        text-decoration: none;
}

 

[Html]

Ja, danke damit klappts.

mfg,olli