28221 sujets

CSS et mise en forme, CSS3

Probleme d affichage sous Firefox: superposition d'elements.

Salut...

Bien, je suis debutant en conception web, et j essaye de me faire un site perso pour apprendre...
J utilise des css, mais je me trouve confronte a un probleme d'affichage sous Firefox, que je n ai pas sous IE6: des elements se recouvrent.

Sous IE6:
upload/1042-ie.JPG

Sous Firefox:
upload/1042-firefox.JPG

Je pense que ca vient de moi.... Mais je ne sais pas comment faire pour preciser a Firefox que des elements relatifs ne doivent pas se recouvrir...

Mon HTML ressemble a ca:

<div id="texte">
<p class="photo">
<span class ="gauche">
<a href="photos/ photo1.jpg ">
<img height="66" src="onglet/photo1.jpg" width="100" />
<span>blablabla</span>
</a>
</span>
<span class = "droite">
<a href="photos/ photo2.jpg ">
<img height="66" src="onglet/photo2.jpg" width="100" />
<span>bla bla</span>
</a>
</span>
</p>


<br></br>
</div>


Et mon Css a ca:

#texte {
background-color:transparent;
background-attachment: fixed;
z-index: 2;
padding: 0px;
position: absolute;
left: 336px;
top: 192px;
width: 542px;
height: 384px;
overflow: auto;
}


/* pour les photos */

#texte p.photo span.gauche{
position : relative;
left : 0;
top: 0;
width : 200px;
height : 100px;
vertical-align: top;
}
#texte p.photo span.droite{
position : relative;
left : 20px;
top: 0;
width : 200px;
height : 100px;
vertical-align: top;
}


#texte p.photo a span{
position : relative;
top : 0;
left : 10px;
display: block;
margin-right: 30px;
}

Merci de votre aide.

Mon site est de temps en temps visible a l adresse:
http://www.hoasen.edu.vn/~Lttuan/guillaume/

Mais, j habite et heberge au Vietnam, donc la connection risque d etre lente voir impossible...

Guillaume.
te serait-il possible les mettres tes codes sources entre les balises [code ] et [/code ] ( sans l'espace ). Déjà cela rendra ton post plus clair.
Modifié par anthony (24 Feb 2005 - 09:37)
je penses qu'il te serait préférable d'utiliser une liste type :
<dl>
  <dt><a href="..."><img src="..." alt="..." /></a></dt>
  <dd>La description ici</dd>
  <dt>l'image ici...</dt>
  <dd>bla bla bla...</dd>
  ...
</dl>

et met en forme de qu'il faut, sans rien rajouter d'autres.

Cela pour éviter ta "soupe" de balises qui plus est est incorrect car il ne faut pas mettre de balise block dans une balise type inline...
Je repose mon code pour la lisibilité:

Le html:
<div id="texte">         
<p class="photo">
<span class ="gauche">
<a href="photos/ photo1.jpg ">
<img height="66" src="onglet/photo1.jpg" width="100" />
<span>blablabla</span>
</a>
</span>
		<span class = "droite">
<a href="photos/ photo2.jpg ">
<img height="66" src="onglet/photo2.jpg" width="100" />
<span>bla bla</span>
</a>
</span>
</p>
			

<br></br>
</div>



Le css:

#texte {
	background-color:transparent;
background-attachment: fixed;
z-index: 2;
	padding: 0px;
	position: absolute;
	left: 336px;
	top: 192px;
	width: 542px;
	height: 384px;
	overflow: auto;
	}
	

/* pour les photos */
	
#texte p.photo span.gauche{
	position : relative;
	left : 0;
	top: 0;
	width : 200px;
	height : 100px;
	vertical-align: top;
	}
#texte p.photo span.droite{
	position : relative;
	left : 20px;
	top: 0;
	width : 200px;
	height : 100px;
	vertical-align: top;
	}

	
#texte p.photo a span{
	position : relative;
	top : 0;
	left : 10px;
	display: block;
	margin-right: 30px;
	}
Ok, j ai essayé, et je m'en souviendrait.... je suis stupefait...

Ceci dit, il me reste un probleme: j'aimerais avoir deux colonnes de photos... d'ou les class droite et gauche de mon code original.

Il y a t il une formule magique pour faire ca?

Merci encore...
Guillaume
Administrateur
Salut guiguisme,

Ne le prends pas mal, mais pourquoi ne pas éditer ton premier post (pour rajouter les balises de code) plutôt que de poster un nouveau message rien que pour ça ?

PS :
<br></br>
N'existe pas.
Modifié par Raphael (24 Feb 2005 - 10:55)
Raphael a écrit :
(...)
<br></br>
N'existe pas.
T'es sûr de ça ?

Je dirai que ça ne s'utilise pas, parce que ça n'a pas de sens, mais ça devrait valider (en tout cas en xHTML), non ?

Bon, on ne va pas l'embrouiller Smiley murf

@+, HoPHP
Perso, pour faire une galerie d'images, avec des photos placées selon ma convenance, je suggèrerai assez d'utiliser les listes de définitions, comme dans cet excellent article

Ça me paraît très souple, plus élégant, et tu n'as plus ensuite qu'à définir deux class pour les dl...

Smiley coucou
Ok, Merci pour le lien...
Ca donne des idees.

Pour les balises br, il me semblait avoir lu qq part que c etait mieux comme ca: <br> <br />... Ceci dit, je ne serait pas contrariant sur ce point.... Si vous me dites que c est mieux autrement, je vous croit sur parole... Mais depuis le debut de ce post, je prends conscience que le HTML n est pas aussi souple que l impression que j en avait. Smiley ohwell .

Ceci dit Merci a tous pour votre efficacite...
Je reviendrait bientot vous ennuyer avec mes problemes .... hehe.
Laurent Denis a écrit :

C'est un point de compatibilité du XHTML traité en tant que HTML, et une pratique fortement recommandée en XML.

Voilà pourquoi c'est préférable.
Sujet clos
Aller à