28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Voici un probleme recurent...

Ma page s'affiche differement en fonction qu'elle soit lu par firefox ou IE ou Safari
voici mon bout de code HTML

<div id="contener">
<img src="./images/firefox_website.png" class="blockimage_firefox_site" alt="firefox Website page"/>
<span class="blockimage_firefox_site_gauche">
(...)
</span>
	<div class="text">
		<h2>Découvrez l'autre façon de surfer</h2>
(...)

et le code css correspondant

#contener
	{
padding-left:10px; padding-right:30px;padding-top:25px; padding-bottom:20px;
background-color:#FFFFFF;
border:#CC6600 solid 3px;
	}


.blockimage_firefox_site
	{
	display:block;
	/*width:150px;
	height:250px;*/
	padding-left:10px;
	margin-left:10px;
	position:relative;
	float:right;
	}
.blockimage_firefox_site_gauche
	{
	text-align:center;
	clear:both;
	display:block;
	margin-left:10px; margin-top:50px;
	position:relative;
	float:left;
	width:200px;height:250px;
	padding-left:10px; padding-right:10px; padding-top:10px;
	}
.text
	{
	clear:left;	
	text-align:justify; 
	width:auto; 
	margin-left:15px; margin-right:10px;
	}


Le probleme etant que sous FF tous apparait correctement mais pour ce qui est d'IE il ne semble pas afficher le CSS de Background-color du body
body {background-color:#333333; 
margin:0px;
font-family:"Times New Roman", Times, serif; 
text-align:center;
font-size:1em;
}

Et sous Safari , le probleme posé est qu'il n'affiche pas le .text à coté de mes images mais en dessus, il semble donc ne pas prendre en compte le CLEAR

EDIT : Peut on donner 2 attributs à un clear? ex:CLEAR: LEFT RIGHT;

Merci à vous.
Modifié par Webconcept (08 Mar 2007 - 18:18)
Bonsoir,

A première vue, j'ai un peu de mal à comprendre ce que tu veux obtenir comme effet au vu du code produit. Ne serait-il pas utile de placer des images en arrière-plan grâce au CSS ?

Pour répondre à ta question concernant le clear, cela existe.
Il s'agit de l'instruction clear:both; Smiley cligne
Salut... j ai place le CLEAR de mon id .TEXT en INHERIT et cela fonctionne mieux sous safari... il semblerait que vu que j ai 2 div img (1 à gauche et une à droite) Le fais de mettre un CLEAR:LEFT; SAFARI ne comprend pas l'idee de mettre le texte a gauche alors que l image est deja à gauche.

Reste tjs le probleme d' IE

Pour repondre a ta question le fais de mettre les images dans des ID me permet de les passer ou je veux. je ne peux pas que j aurai pu faire ca en les mettant en BACKGROUND-IMAGE si???
Salut,
Webconcept a écrit :
Pour repondre a ta question le fais de mettre les images dans des ID me permet de les passer ou je veux. je ne peux pas que j aurai pu faire ca en les mettant en BACKGROUND-IMAGE si???
Si si, tu peux positionner les images d'arrière-plan à l'intérieur de leur élément, avec la propriété background-position. Mais ce n'est pas ce qui doit déterminer le choix entre image en dur dans le code HTML & image de fond.

Pour savoir où placer ton image, en dehors de toute considération de réalisation, il faut te demander si l'image véhicule une information. Si la page se porte aussi bien en retirant l'image, c'est de la décoration, et elle devrait se trouver dans la feuille de style.

Si au contraire on ne peut pas enlever l'image sans perdre une partie de l'information, l'image doit se trouver dans le code HTML avec une balise <img> et un texte de remplacement "alt" approprié.