Tweet
Hi, ich habe folgendes Problem.
Ich habe mir in Phtoshop einen schönen Glasbutton erstellt.
Über diesen möchte ich mittels PHP dynamisch entsprechede Linktexte legen. Wenns fertig ist, wird einfach per php-funktion der Button angezeigt und der zugehörige Text als Link darüber gelegt.
Mein Problem liegt nun in der exacten Positionierung.
Mein erster Ansatz war ein div-Container mit dem button als Hintergrund-Bild und darein einfach der Text.
Da mein Button aber zu groß ist und ich die größe bei backgrounds
nicht definieren kann ist diese Variante für mich ungeignet.
Ich könnte zwar den Button schon in Photoshop auf die entsprechende
Größe anpassen, musste aber feststellen, dass Photoshop das Teil
vom Aussehen her beim verkleinern versaut. Fällt also weg.
Ich werd also den Button als Bild verwenden, weil ich da ja ne Breite
einstellen kann.
Soweit so gut. Meine Probleme liegen jetzt darin,
2 Layer exakt über einander zu positionieren.
Das mache ich unter anderem mit z-index.
Kann mir einer vielleicht an einem kleinen Beispiel erklären,
wie ich die verschachtelung und die css angaben setzen muss,
damit ich ich das so hinbekomme. Mit einem Button hab
ichs einmal hinbekommen, aber das klappt dann spätestens nicht mehr, wenn ich mehrere Buttons nebeneinander haben will.
Wäre euch für etwas Hilfe dankbar.
So hab ichs bis jetzt:
Styles:
div.Button {
width:88px;
position: static;
margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
display:inline;
}
div.ButtonImage {
width: 88px;
postion: relative; z-index: 2;
}
div.ButtonText {
position: absolute; z-index: 5;
top: 5px;
text-align: center;
font-size: 11px;
font-weight: bold;
}
Ich habe mir in Phtoshop einen schönen Glasbutton erstellt.
Über diesen möchte ich mittels PHP dynamisch entsprechede Linktexte legen. Wenns fertig ist, wird einfach per php-funktion der Button angezeigt und der zugehörige Text als Link darüber gelegt.
Mein Problem liegt nun in der exacten Positionierung.
Mein erster Ansatz war ein div-Container mit dem button als Hintergrund-Bild und darein einfach der Text.
Code:
<div style="background-image:button.gif;">Text</div>
nicht definieren kann ist diese Variante für mich ungeignet.
Ich könnte zwar den Button schon in Photoshop auf die entsprechende
Größe anpassen, musste aber feststellen, dass Photoshop das Teil
vom Aussehen her beim verkleinern versaut. Fällt also weg.
Ich werd also den Button als Bild verwenden, weil ich da ja ne Breite
einstellen kann.
Soweit so gut. Meine Probleme liegen jetzt darin,
2 Layer exakt über einander zu positionieren.
Das mache ich unter anderem mit z-index.
Kann mir einer vielleicht an einem kleinen Beispiel erklären,
wie ich die verschachtelung und die css angaben setzen muss,
damit ich ich das so hinbekomme. Mit einem Button hab
ichs einmal hinbekommen, aber das klappt dann spätestens nicht mehr, wenn ich mehrere Buttons nebeneinander haben will.
Wäre euch für etwas Hilfe dankbar.
So hab ichs bis jetzt:
Code:
<div align="center">
<div id="Button" class="Button" align="{$templ['ButtonRow']['align']}">
<div id="ButtonImage" class="ButtonImage">
<a href="#" onmouseover="image.src='AquaButtonlila.gif';" onmouseout="image.src='AquaButtongrey.gif';">
<img name="image" src="AquaButtongrey.gif" height="30" border="0"/>
</a>
</div>
<div id="ButtonText" class="ButtonText">
<a href="#" onmouseover="image.src='AquaButtonlila.gif';" onmouseout="image.src='AquaButtongrey.gif';">Eintragen</a>
</div>
</div>
</div>
div.Button {
width:88px;
position: static;
margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
display:inline;
}
div.ButtonImage {
width: 88px;
postion: relative; z-index: 2;
}
div.ButtonText {
position: absolute; z-index: 5;
top: 5px;
text-align: center;
font-size: 11px;
font-weight: bold;
}
Geht net gibts net...
Kommentar