nicht angemeldet
Rollover-Buttons (CSS) - Text darin ausrichten
Hallo!
Ich gestalte eine Seite, deren Navigation über Buttons erfolgen soll. Mittels CSS soll dabei der grade überfahrene Button hervorgehoben werden. Soweit bin ich auch; beim Überfahren der Buttons wird eine andere Grafik angezeigt (Was ihr natürlich nicht seht; leider kann ich die Datei z.Zt. nicht hochladen).
Zusätzlich aber soll innerhalb jedes Buttons ein Text angezeigt werden, und das optimalerweise auch wirklich als Text und nicht innerhalb der Grafik; denn dann wäre pro link ein separater Button erforderlich (Ladezeit!).
Mit unterem Quelltext bin ich so weit gekommen, dass der Text innerhalb des Buttons horizontal zentriert angezeigt wird. Was leider nicht klappt: Den Text am unteren Rand der Grafik auszurichten - jeder Versuch einer vertikalen Ausrichtung schlug bisher fehl. vertical-align, padding, margin - alles ohne Reaktion des Browsers bzw. totales Chaos auf der Seite.
Kann mir vielleicht jemand nen Tip geben, wie ich auch das erledige?
Vielen Dank, Pida
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<style>
a { display:block;
background-image:url(dateien/linkbutton.jpg);
width:53px; height:98px;
text-decoration:none;
text-align:center;
}
a:hover { background-image:url(dateien/aktivbutton.jpg); width:53px; height:98px; }
</style>
</HEAD>
<BODY>
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td valign="top" width="70px">
<div align="left">
<a href="index.html">Home</a>
<p style="margin-top:40px">
</div>
<div align="left">
<a href="dateien/artist.html">Artist</a>
<p style="margin-top:40px">
</div>
<div align="left">
<a href="GÄSTEBUCH">Guestbook</a>
</div>
</td>
</tr>
</table>
</BODY>
</html>
-
Hi,
Was leider nicht klappt: Den Text am unteren Rand der Grafik auszurichten - jeder Versuch einer vertikalen Ausrichtung schlug bisher fehl. vertical-align, padding, margin - alles ohne Reaktion des Browsers bzw. totales Chaos auf der Seite.#
Spiele mal etwas mit line-height.
<div align="left">
wozu soll dieses DIV eigentlich guit sein?
<p style="margin-top:40px">
und dieses P?
freundliche Grüße
Ingo-
Hi,
line-height scheint zu klappen (ich könnte schwören, dass hätte vorhin beim IE versagt - ich melde mich nochmal)
<div align="left">
wozu soll dieses DIV eigentlich guit sein?Das ist das letzte Überbleibsel eines Homepage-Baukastens von Strato, mit dem eine Freundin diese Seite gestalten wollte. Scheint mir jetzt auch überflüssig; werd ich mal probeweise entfernen.
<p style="margin-top:40px">
und dieses P?Einfach nur vertikaler Abstand zwischen den Buttons.
Vielen Dank, Pida
-
Schade, hab das Problem schon wieder:
Abgesehen davon, dass line-height abhängig ist von evtl. eingestelltem Schriftart des Besuchers, hängt der IE ab bestimmten Werten eine zusätzliche Button-Grafik (bzw. ein Fragment davon) unten an.
Gruß, Pida
-
Hi,
Abgesehen davon, dass line-height abhängig ist von evtl. eingestelltem Schriftart des Besuchers,
die sollte hier natürlich ausnahmsweise in PX angegeben werden.
hängt der IE ab bestimmten Werten eine zusätzliche Button-Grafik (bzw. ein Fragment davon) unten an.
no-repeat sollte helfen. Oder/und Du machst die Grafik entsprechend größer.
und: margin-top kannst Du auch dem A-Element zuweisen.
freundliche Grüße
Ingo-
Danke, die Lösung scheint soweit zu funktionieren.
Gruß, Pida
-
-
-
-
-
Hi,
Mit unterem Quelltext bin ich so weit gekommen, dass der Text innerhalb des Buttons horizontal zentriert angezeigt wird. Was leider nicht klappt: Den Text am unteren Rand der Grafik auszurichten - jeder Versuch einer vertikalen Ausrichtung schlug bisher fehl.
Du musst die Ausrichtung des Bildes statt des Textes aendern. Und zwar mit Hilfe von "background-position: 0px 0px", damit kannst Du bestimmen wo die obere linke Ecke sitzt. Damit es funktioniert muss auch ein "background-repeat:" no-repeat rein.
Gruss,
Melanie-
Danke,
kannst du das etwas ausführlicher beschreiben? Wo kommen diese Elemente hin?
Abgesehen davon wird diese Methode wohl nur im Zusammenhang mit anderen absoluten Positionierungen und Größenangaben bzw. für eine bestimmte Fenstergröße funktionieren; wird diese überschritten, bleibt am Rand nur die Hintergrundfarbe - seh ich das richtig?
Gruß, Pida
-
Hi nochmal,
Hier ist ein Ausschnitt aus einem unserer Stylesheets:
a.leftnav:link
{
padding-left: 16px;
background-image: url(../images/square1.gif);
background-repeat: no-repeat;
background-position:0px 2px;
font-family:Arial,Helvetica,sans-serif;
font-size:10pt;
font-weight:bold;
color:#FEFEFE;
text-decoration:none;
}Auf der Seite sieht man dann links ein Bild, rechts davon den zugehoerigen Text.
Abgesehen davon wird diese Methode wohl nur im Zusammenhang mit anderen absoluten Positionierungen und Größenangaben bzw. für eine bestimmte Fenstergröße funktionieren; wird diese überschritten, bleibt am Rand nur die Hintergrundfarbe - seh ich das richtig?
Nein, die Positionierung bezieht sich auf innerhalb des <a>, nicht auf den Seiten-Body, und ist daher unabhaengig von Fenstergroesse etc.
Gruss, M.
-
Hi,
padding-left: 16px;
background-image: url(../images/square1.gif);
background-repeat: no-repeat;
background-position:0px 2px;
font-family:Arial,Helvetica,sans-serif;
font-size:10pt;die Verquickung von PX (aufgrund der eingebundenen Grafik ja sinnvoll) und PT ist aber nicht zu empfehlen (abgesehen von der generellen Untauglichkeit für die Bildschirmausgabe).
freundliche Grüße
Ingo-
Hello,
die Verquickung von PX (aufgrund der eingebundenen Grafik ja sinnvoll) und PT ist aber nicht zu empfehlen (abgesehen von der generellen Untauglichkeit für die Bildschirmausgabe).
Das ist natuerlich ein Punkt, auch wenn es in der Praxis bei uns eher selten Probleme damit gibt. Von der Verwendung von em, ex, % etc bin ich halt nach einigem unerwarteten Verhalten wieder abgekommen, und in der Tat wuerde das Beispiel dann wohl etwas problematischer werden.
M.
-
Hi,
hab jetzt das im Head:
<style>
a {padding-left:4px;
background-image:url(dateien/linkbutton.jpg);
background-repeat:no-repeat;
backround-position:2px 2px;
text-decoration:none;
font-size:14px;
font-weight:bold;
text-align:center; }
a:hover { background-image:url(dateien/aktivbutton.jpg); }
</style>und das im Body:
<a "href="index.html">Home</a>
<a style="margin-top:15px" href="dateien/artist.html">Artist</a>
<a style="margin-top:15px" href="gb">Guestbook</a>Problem: Die Grafik (98px hoch) wird nicht komplett angezeigt, sondern es stehen jetzt drei Links in drei Zeilen direkt untereinander; unterlegt jeweils vom oberen Rand der Grafik.
Was hab ich falsch gemacht?
Danke, Pida
P.S.: Das oben in der 2. Zeile nur "a" steht und nicht "a:link" hab ich übrigens aus einer Vorlage übernommen; mit "a:link" geht bei mir gar nichts.
-
-
-
-
-