28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Pour mon site j'ai besoin d'afficher une suite de liens avec vignette .
Le tout dans un conteneur positioné en relative.


Les liens sont positionné eux aussi.
Le span qui est en absolu pour me permettre de mettre uneinscrustation sur la photo contenue dans le liens aussi !
Tout marche bien sur firefox
mais pa sur IE

Voici une page presant le probleme

<style type="text/css">

.page {
position: absolute;
background-color:#000000;
width: 750px;
height: 400px;
bottom:0;
}

.thumb {
margin:0 ;
display:inline;
position:relative;
}
.thumb a {
position:relative;
margin:0 ;
border:0;
}

.thumb a span {
position:absolute;
background-color:black;
color:white;
left:5;
bottom:5;
margin: 0px;
font-weight:bold;
font-size:130%;
clear:both;
}
</style>

<div class="page" >
   <div class="thumb">
	<a href=""><img src="thumb.jpg"><span>Dossier 1</span></a>
	<a href=""><img src="thumb.jpg"><span>Dossier 1</span></a>
	<a href=""><img src="thumb.jpg"><span>Dossier 1</span></a>
	</div>
</div>


j'ai mit le code sur mon site !
http://onishin.free.fr/alsa/thumb/test.html

Comme on le vois sur firefox pas de pb .
Mais sur IE le span est possitionné en absolu par raport a un ancetre et non a a qui est lui bien positionné .

Si quelqu'un a une solution ou me dire ou je me trompe

Merci Onishin
Modifié par Onishin (29 Jun 2006 - 01:07)
Bonsoir et bievenue à toi,
Ton ennoncé n'est pas très clair mais est-ce cela que tu veux obtenir?
(remplacer ton code css par celui-là):

<style type="text/css">
<!--
.page {
	position: absolute;
	background:#000;
	width: 750px;
	height: 400px;
	bottom:0;
}
.thumb a {
	position:relative; 
	float:left;
	border: 0; 
	 }
.thumb a span {
	position:absolute;
	background:black;
	color:white;
	left:5px;
	bottom:5px;
	font-weight:bold;
	font-size:130%;
}
-->
</style>


Tu avait oublié les unité px pour top et bottom.

Pourquoi mettre:

.thumb {
margin:0 ;
display:inline;
position:relative;
}

Modifié par Hermann (29 Jun 2006 - 18:58)
Effectivement, c'est comme ca que j'avais fait initialement avant de comprendre que je ne pouvais pas avoir leresultat que je souhaité etant donné que je les positionne en type float !
Et que je voulais optenir un truc imposible en float!

Car pourquoi je m'acharne a faire comme ca! c'est que en les positionant avec le le flux normal ou relelative ( juste pour positionner )!
Ca me permet petite cerise sur le gateau de les centrer .

Mais surtout plus important a ce que l'affichage se mettent a jours si on change la taille de la resolution !
Comme ca plus besoin d'avoir a me preoccupé du bonne affichage sur un 1024 ou 1280px de with !
Je dispose en ligne dans le flux courant les liens et le browser remplis au maximum
Et aussi avec un marge egale a gauche ou a droite pour les deux resolution !
Et pour moi lacompatibilite 1024 VS 1280 est maintenant trés importante .
Presque plus que la compatibilite firefoxVsIE .

Sinon c'est bien le resultat que je voualais mais j'ai plus la compatibilite 1024x1280 ni la marge de gauche et droite egale quelque sois la resolution .
a écrit :
Effectivement, c'est comme ca que j'avais fait initialement avant de comprendre que je ne pouvais pas avoir leresultat que je souhaité etant donné que je les positionne en type float !


Si tu avais pris la peine d'expliquer ce que tu voulais obtenir avant, ça aurait été plus simple !
Inutile d'exposer ton problème maintenant, je pense que ça n'interesse pas grand monde.
Modifié par Hermann (30 Jun 2006 - 01:36)
Je pense avoir pris la peine expliquer ce que je voulais obtenir !
Que un span en position absolu dans un lien positionné en relatif
Fasse ce que ce que je pense devoir faire !
Et qui marche parfaitement sous firefox !

Effectivement,je n'ai pas pris la peine de noyer le probleme sous un flots informations que j'avais pensé a tord inutile
Mais plutot pris la peine le partis de coder un exemple simple pour demontrer ce que je pense etre un probleme de compatibilité .

Je finis par croire qu'il y a pas de solution possible sa va faire plus de d'un semaine que je cherche partout sur le net et que je lis et relis mon livre de css