• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

css info box textposition

J

jsgreenhorn

Guest
hallo,



ich habe folgendes problem:

HTML: 
#box 
{ 
position:absolute; top:100px; left:50px; 
z-index:3; 
} 

#box a 
{ 

float: left ; 
text-decoration: none ; 
display: block ; 
padding:1px; 


} 

#box a:hover 
{ 

#box a:hover 
color:white; 
background:; 

} 


#box a span 

{ 
display:none; 
} 

#box a:hover span 
{ 
color: gray ; 
font:normal 0.8em verdana, arial, sans-serif; 
border:0; 
display: block; 
padding:0; 
text-align: center; 
}

1.der info-text unter den bildern wird im im moz.1.6/firefoxv0.8 wird nicht "align-center" dargestellt.

2.im opera wird die imagenavi auch nicht horizontal dargestellt sondern untereinander. (ehrlich gesagt gefällt mir der effekt)

3.wie bekomme ich eigentlich den info-text über die box?

view

danke für tipps!
 
Code: 
<a href="#">[B]<span>singles</span>[/B]<img src="thumbs/singles.jpg" width="84" height="55" border="0" alt=""></a>
Platziere mal die <span> vor die <img>.
Ist nicht optimal so, aber es ergibt einen klasse Effekt.
 
in der tat ist die schrift dann oben aber das img springt nach unten. :-/

trotzdem danke für den tipp.

ich habe mich für die variante "untereinander" entschieden. sie ist eigentlich aus der fehldarstellung im opera entstanden.

es lag 1.am falschen doctype, muß sein:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.
#box
{
position:absolute;
top:100px;
left:50px;
width:90px;
}

und zuletzt float: left ; raus!





ergebnis
 
Naja, jetzt springen die Bilder auch... ;)
Gut, das Du die Fehlerquellen gepostet hast.
Daran habe ich gar nicht gedacht...
 
Wenn du den span bzw. div-Layer noch z-index: <index> zuweist, dann kannst du die einzelnen Layer übereinander legen.
Warum es das text-align: center; im Mozi nicht funktionieren soll, ist mir ein Rätsel, ich vermute, dass du die falsche ID zugewiesen hast bzw. nicht exakt, deshalb verstehen es auch andere Browser.
 
dkdenz schrieb:
Naja, jetzt springen die Bilder auch... ;)
Gut, das Du die Fehlerquellen gepostet hast.
Daran habe ich gar nicht gedacht...
Zum Vergrößern anklicken....

klar aber gerade den effekt finde ich ja gut! deswegen lasse ich das so vertikal!


ich bin auch nicht allein auf die fehlerquellen gekommen! ;)
 
RoyalKnight schrieb:
Wenn du den span bzw. div-Layer noch z-index: <index> zuweist, dann kannst du die einzelnen Layer übereinander legen.
Warum es das text-align: center; im Mozi nicht funktionieren soll, ist mir ein Rätsel, ich vermute, dass du die falsche ID zugewiesen hast bzw. nicht exakt, deshalb verstehen es auch andere Browser.
Zum Vergrößern anklicken....

kannste das mal als code aufschreiben?

das mit dem "text-align" war wegen des doctype. man muß wohl diesen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> nehmen. so sind die browser wohl im standard modus und dann versteht der Mozi auch das "text-align: center;"!
 
So ungefähr müsste das dann aussehen:
HTML: 
<div id="back" style="position:absolute; left:0px; top:0px; width:50px; height:50px; z-index:1; background-color: #990033; layer-background-color: #990033; border: 1px none #000000;"></div>
<div id="front" style="position:absolute; left:15px; top:15px; width:50px; height:50px; z-index:2; background-color: #996600; layer-background-color: #996600; border: 1px none #000000;"></div>
 
RoyalKnight schrieb:
So ungefähr müsste das dann aussehen:
HTML: 
<div id="back" style="position:absolute; left:0px; top:0px; width:50px; height:50px; z-index:1; background-color: #990033; layer-background-color: #990033; border: 1px none #000000;"></div>
<div id="front" style="position:absolute; left:15px; top:15px; width:50px; height:50px; z-index:2; background-color: #996600; layer-background-color: #996600; border: 1px none #000000;"></div>
Zum Vergrößern anklicken....

hm.. mal schauen ob das funzt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben