28220 sujets

CSS et mise en forme, CSS3

Bonjour ,
J'ai un petit probleme de cadrage avec l'exemple donné ci dessous .
Dans une partie centrale ( partie verte ) je veux afficher :
- une image cadree a gauche et du texte qui va entourer l'image par la droite et en dessous ( suivant la largeur de la fenetre)
- une image cadree a droite et du texte qui va entourer l'image a gauche et en dessous ( suivant la largeur de la fenetre)
- une image cadree a gauche et du texte qui va entourer l'image par la droite et en dessous ( suivant la largeur de la fenetre)

Pour les tests vous pouvez prendre n'importe quelle image et l'appeler x1.jpg .
Sous IE la page fonctionne comme je veux ( a part de temps en temps un effacement du texte de la premiere photo)
Par contre sous Firefox , si on depasse 800 pixels de large , mettons 1024 par exemple, le texte de la photo 2 remonte a cote de la Photo1 .Ce que je ne voudrais pas .
Je voudrais que la page se comporte comme une table avec 2 colonnes et 3 lignes avec les photos disposées comme on le voit sous IE .

Si quelqu'un a une idee de ce qu'il faut faire ?
J'ai essayé de faire un clear:all entre la 2 eme photo et la 3 eme mais bon du coup la 3 eme photo passe sous la colonne de droite .
Idem bien sur avec un <br clear:all >
En fait il faudrait faire en sorte que le texte de la 2 eme ligne ne monte pas plus haut que le bas de la Photo1 et que le texte de la 3 eme ligne ne monte pas plus haut que le bas de la Photo 2.
Pour résumer , faire , en sorte que sous firefox ca se comporte comme sous IE .

Merci de votre aide .
Cordialement .
Denis


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>3-col layout via CSS</title>
<style type="text/css">
<!--
body { 	margin:0; padding:0; font: Georgia, "Times New Roman", Times, serif; }

#dlu_header   {	margin:0; padding:0; background:yellow; }
#dlu_content  {	margin:0; padding:0; 	}
#dlu_contentL {	float:left;	width:150px; margin:0; padding:0; background: #FFCC00 ;	}
#dlu_contentR {	float:right; width:150px;	margin:0; padding:0; background: #FFCC00 ;	}
#dlu_contentC {	margin:0 150px; }
		
.dlu_block_in {	margin:0; padding: 0;}
.dlu_block_trans {margin:0; padding: 0; background: #99FF00 ; filter:alpha(opacity=50);	-moz-opacity:0.50; opacity: 0.50;	}
.cleaner { clear:both; height:0px; font-size:0px; border:none; 	margin:0; padding:0; background:transparent; }
		
#dlu_footer	 { clear:both; 	background: #33CC99; filter:alpha(opacity=75); 	-moz-opacity:0.75; 	opacity: 0.75; 	}	

h1,h2,h3,h4 { margin:0 }
p { margin: 0 }
a { color:black }
	
#dlu_contentCL {float:left	; background-color:#66CC99}	
#dlu_contentCR {float:right	; background-color:#66CC99}		
#dlu_contentCC { background-color:#FFCC99	}	
#dlu_contentCCALL {	}	
-->
</style>

</head>
<body>

<div id="dlu_header">
    <div class="dlu_block_in">
      <h1>HEADER</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
    </div>
</div>
<div id="dlu_content">
  <div id="dlu_contentL">
    <div class="dlu_block_in">
      <h4>Left Col</h4>
      <p> This is content of the LEFTcolumn</p>

    </div>
  </div>
  <div id="dlu_contentR">
    <div class="dlu_block_in">
      <h4>Right Col</h4>
      <p> This is content of the RIGHT</p>
	  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of lettersLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>	  
    </div>
  </div>
  <div id="dlu_contentC">
    <div class="dlu_block_trans">
      <h4>Middle Col</h4>
	  <!-- Centre ALL -->
      <div id="dlu_contentCCALL"> bloc centre CENTRE ALLLLLLLLLLLLL
	  
	  	<div > <span style="float:left"> <img src="x1.jpg" alt="Photo1" width="150" height="150" /></span>
		<span > 1111111111111111 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></div>
		
		<br />
	  	<div ><span style="clear:left ; float:right;"><img src="x1.jpg" alt="Photo2" width="150" height="150" /></span>
		<span> 222222222222222 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></div>

		<br />
	  	<div ><span style="clear:left ; float:left;"><img src="x1.jpg" alt="Photo3" width="150" height="150" /></span>
		<span> 333333333333333 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></div>

	  </div>
	  <!-- -->
	</div>
  </div>
<!-- <div class="cleaner"></div> -->
</div>

<div id="dlu_footer">
  <div class="dlu_block_in">
    <h4>The footer</h4>
    <p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. .... </p>
  </div>
</div>
<hr />

</body>
</html>


Modifié par denisdlu7 (24 Nov 2005 - 19:54)
a écrit :
En fait il faudrait faire en sorte que le texte de la 2 eme ligne ne monte pas plus haut que le bas de la Photo1 et que le texte de la 3 eme ligne ne monte pas plus haut que le bas de la Photo 2.
Pour résumer , faire , en sorte que sous firefox ca se comporte comme sous IE .


Je pense que tu devrais mettre ton image dans ton paragraphe.

Tu donne un float:left à ton image et un display:block à ta balise p

Ensuite, pour pas avoir de problème avec le paragraphe suivant, tu applique à la balise p du nouveau paragraphe un clear:left;

Et tu continue ainsi de suite pour chaque paragraphe en changeant le clear en fonction du float précédent. Si c'est pas clair, relance moi. Je suis encore résolveur de problème débutant ^^
Voila ,
J'ai fait l'essai avec le source ci dessous .
Le fait de mettre des display block ne semble avoir aucune action donc dans le source je les ai supprimé .
En procedant comme tu m'as indiqué , j'ai a nouveau le meme probleme qu'avant mais en plus le texte de la Photo3 ne se met pas a droite de la photo.
Pour La photo1 et 2 et les textes associés cela se passe trés bien ( sous Firefox et IE avec juste un probleme sous IE de disparition du texte de la photo 1 si on prend un fenetre de plus de 800 pixels,mais bon je pense que ce ne doit pas etre grand chose )
Le probleme reste entier pour la photo 3 qui s'aligne toujours sur le texte de la photo 2 mais ne tient pas compte de la hauteur de la photo 2 quand on diminue la largeur de la fenetre .

Cordialement
Denis



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>3-col layout via CSS</title>
<style type="text/css">
<!--
body { 	margin:0; padding:0; font: Georgia, "Times New Roman", Times, serif; }

#dlu_header   {	margin:0; padding:0; background:yellow; }
#dlu_content  {	margin:0; padding:0; 	}
#dlu_contentL {	float:left;	width:150px; margin:0; padding:0; background: #FFCC00 ;	}
#dlu_contentR {	float:right; width:150px;	margin:0; padding:0; background: #FFCC00 ;	}
#dlu_contentC {	margin:0 150px; }
		
.dlu_block_in {	margin:0; padding: 0;}
.dlu_block_trans {margin:0; padding: 0; background: #99FF00 ; filter:alpha(opacity=50);	-moz-opacity:0.50; opacity: 0.50;	}
.cleaner { clear:both; height:0px; font-size:0px; border:none; 	margin:0; padding:0; background:transparent; }
		
#dlu_footer	 { clear:both; 	background: #33CC99; filter:alpha(opacity=75); 	-moz-opacity:0.75; 	opacity: 0.75; 	}	

h1,h2,h3,h4 { margin:0 }
p { margin: 0 }
a { color:black }
	
#dlu_contentCL {float:left	; background-color:#66CC99}	
#dlu_contentCR {float:right	; background-color:#66CC99}		
#dlu_contentCC { background-color:#FFCC99	}	
#dlu_contentCCALL {	}	
-->
</style>
</head>
<body>
<div id="dlu_header">
  <div class="dlu_block_in">
    <h1>HEADER</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  </div>
</div>
<div id="dlu_content">
  <div id="dlu_contentL">
    <div class="dlu_block_in">
      <h4>Left Col</h4>
      <p> This is content of the LEFTcolumn</p>
    </div>
  </div>
  <div id="dlu_contentR">
    <div class="dlu_block_in">
      <h4>Right Col</h4>
      <p> This is content of the RIGHT</p>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of lettersLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
  </div>
  <div id="dlu_contentC">
    <div class="dlu_block_trans">
      <h4>Middle Col</h4>
      <!-- Centre ALL -->
      <div id="dlu_contentCCALL"> bloc centre CENTRE ALLLLLLLLLLLLL
        <p> <span style="float:left"> <img src="x1.jpg" alt="Photo1" width="150" height="150" /></span> 1111111111111111 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <br />
        <p style="clear:left"> <span style="float:right"><img src="x1.jpg" alt="Photo2" width="150" height="150" /></span>
222222222222222 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <br />
        <p style="clear:left" > <span "float:left"><img src="x1.jpg" alt="Photo3" width="150" height="150" /></span>
333333333333333 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
      <!-- -->
    </div>
  </div>
  <!-- <div class="cleaner"></div> -->
</div>
<div id="dlu_footer">
  <div class="dlu_block_in">
    <h4>The footer</h4>
    <p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. .... </p>
  </div>
</div>
<hr />
</body>
</html>
JE crois voir d'où vient ton problème pour le 3e paragraphe :

a écrit :
<p> <span style="float:left"> <img src="x1.jpg" alt="Photo1" width="150" height="150" /></span> 1111111111111111 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<br />

<p style="clear:left"> <span style="float:right"><img src="x1.jpg" alt="Photo2" width="150" height="150" /></span>

222222222222222 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<br />

<p style="clear:left" > <span "float:left"><img src="x1.jpg" alt="Photo3" width="150" height="150" /></span>

333333333333333 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</div>

Je l'ai mis en gras.

Comme ton image précédente float à right, il faut que le paragraphe suivant clear à right (clear:rigth);

Sinon, enlève le <span> qui englobe tes images, ça sert à rien et je pense pas que ça soit valide W3C.
Applique le float direct sur les images.

Je passerai quand même le display de tes p en block.

Normalement, avec tout ça, ça devrai le faire
Modifié par trigun (24 Nov 2005 - 11:29)
Salut ,
He non helas , c'est justement pour cela que j'ai mis l'exemple complet , si on fait un clear right ou un clear all , on va avoir la photo 3 qui va s'aligner sous la colonne de droite ( orange) repérée par id="dlu_contentR" .

Il faudrait pouvoir faire un clear dont la portee serait juste celle du bloc central alors que le clear agit sur toute la page donc fatalement sur la colonne de droite en orange dans l'exemple .

Une autre petite précision, en principe la balsie <p> est du type bloc déja .
Oui pour les span c'est un essai que j'avais fait mais tu as raison ca ne sert a rien ou ca peut etre remplacé par div si besoin est .
Modifié par denisdlu7 (24 Nov 2005 - 11:44)
En mettant des display table-row cela semble parfaitement fonctionner pour Firefox , mais helas pas sur IE .

Voici le source :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>3-col layout via CSS</title>
<style type="text/css">
<!--
body { 	margin:0; padding:0; font: Georgia, "Times New Roman", Times, serif; }

#dlu_header   {	margin:0; padding:0; background:yellow; }
#dlu_content  {	margin:0; padding:0; 	}
#dlu_contentL {	float:left;	width:150px; margin:0; padding:0; background: #FFCC00 ;	}
#dlu_contentR {	float:right; width:150px;	margin:0; padding:0; background: #FFCC00 ;	}
#dlu_contentC {	margin:0 150px; }
		
.dlu_block_in {	margin:0; padding: 0;}
.dlu_block_trans {margin:0; padding: 0; background: #99FF00 ; 	}
.cleaner { clear:both; height:0px; font-size:0px; border:none; 	margin:0; padding:0; background:transparent; }
		
#dlu_footer	 { clear:both; 	background: #33CC99;  	}	

h1,h2,h3,h4 { margin:0 }
p { margin: 0 }
a { color:black }
	
#dlu_contentCL {float:left	; background-color:#66CC99}	
#dlu_contentCR {float:right	; background-color:#66CC99}		
#dlu_contentCC { background-color:#FFCC99	}	
#dlu_contentCCALL {	}	
-->
</style>
</head>
<body>
<div id="dlu_header">
  <div class="dlu_block_in">
    <h1>HEADER</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  </div>
</div>
<div id="dlu_content">
  <div id="dlu_contentL">
    <div class="dlu_block_in">
      <h4>Left Col</h4>
      <p> This is content of the LEFTcolumn</p>
    </div>
  </div>
  <div id="dlu_contentR">
    <div class="dlu_block_in">
      <h4>Right Col</h4>
      <p> This is content of the RIGHT</p>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of lettersLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
  </div>
  <div id="dlu_contentC">
    <div class="dlu_block_trans">
      <h4>Middle Col</h4>
      <!-- Centre ALL -->
      <div id="dlu_contentCCALL" > bloc centre CENTRE 
        <p style=" display:table-row"> <img style="float:left" src="x1.jpg" alt="Photo1" width="150" height="150" />
1111111111 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <br />
        <p style=" display:table-row; "> <img style="float:right" src="x1.jpg" alt="Photo2" width="150" height="150" /> 
2222222222 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <br />
        <p style=" display:table-row"> <img style="float:left" src="x1.jpg" alt="Photo3" width="150" height="150" /> 
3333333333 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
      <!-- -->
    </div>
  </div>
  <!-- <div class="cleaner"></div> -->
</div>
<div id="dlu_footer">
  <div class="dlu_block_in">
    <h4>The footer</h4>
    <p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. .... </p>
  </div>
</div>
<hr />
</body>
</html>
Voila , je pense avoir trouvé la solution.
J'ai mis un clear left dans le <p> de la 2 eme photo , ce qui semble logique .
Sous Firefox et Opera ca marchait sans mais avec IE il faut ce clear left .
Du coup cela marche dans tous les cas maintenant .
Par contre si quelqu'un a une autre solution ou une autre idée , que la mienne ( qui est pas forcément la plus académique) ca sera avec plaisir Smiley cligne

Pour info et si ca peut aider quelqu'un voici le source final :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>3-col layout via CSS</title>
<style type="text/css">
<!--
body { 	margin:0; padding:0; font: Georgia, "Times New Roman", Times, serif; }

#dlu_header   {	margin:0; padding:0; background:yellow; }
#dlu_content  {	margin:0; padding:0; 	}
#dlu_contentL {	float:left;	width:150px; margin:0; padding:0; background: #FFCC00 ;	}
#dlu_contentR {	float:right; width:150px;	margin:0; padding:0; background: #FFCC00 ;	}
#dlu_contentC {	margin:0 150px; }
		
.dlu_block_in {	margin:0; padding: 0;}
.dlu_block_trans {margin:0; padding: 0; background: #99FF00 ; 	}
.cleaner { clear:both; height:0px; font-size:0px; border:none; 	margin:0; padding:0; background:transparent; }
		
#dlu_footer	 { clear:both; 	background: #33CC99;  	}	

h1,h2,h3,h4 { margin:0 }
p { margin: 0 }
a { color:black }
	
#dlu_contentCL {float:left	; background-color:#66CC99}	
#dlu_contentCR {float:right	; background-color:#66CC99}		
#dlu_contentCC { background-color:#FFCC99	}	
#dlu_contentCCALL {	}	
-->
</style>
</head>
<body>
<div id="dlu_header">
  <div class="dlu_block_in">
    <h1>HEADER</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  </div>
</div>
<div id="dlu_content" >
  <div id="dlu_contentL">
    <div class="dlu_block_in">
      <h4>Left Col</h4>
      <p> This is content of the LEFTcolumn</p>
    </div>
  </div>
  <div id="dlu_contentR">
    <div class="dlu_block_in">
      <h4>Right Col</h4>
      <p> This is content of the RIGHT</p>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of lettersLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
  </div>
  <div id="dlu_contentC">
    <div class="dlu_block_trans" >
      <h4>Middle Col</h4>
      <!-- Centre ALL -->
      <div id="dlu_contentCCALL" > bloc centre CENTRE 
        <p style=" display:table-row " > <img style="float:left" src="x1.jpg" alt="Photo1" width="100" height="100" />
1111111111 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <br />
        <p style=" display:table-row ; clear:left"> <img style="float:right" src="x1.jpg" alt="Photo2" width="100" height="100" /> 
2222222222 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <br />
        <p style=" display:table-row"> <img style="float:left" src="x1.jpg" alt="Photo3" width="100" height="100" /> 
3333333333 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
      <!-- -->
    </div>
  </div>
  <!-- <div class="cleaner"></div> -->
</div>
<div id="dlu_footer">
  <div class="dlu_block_in">
    <h4>The footer</h4>
    <p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. .... </p>
  </div>
</div>
<hr />
</body>
</html>
Juste un dernier petit truc .
Sous IE , si on fait la manip suivante :
- affichage de la page
- appuie sur F5 ( pour raffraichir la page)
alors le texte à droite de la première photo devient invisible .. curieux quand meme .
Si on change un peu la taille de la fenetre avec la souris , le texte apparait a nouveau mais il manque des fois un ou 2 mots à la fin de ce texte de la première photo. ( c'est variable suivant la largeur de la fenêtre)
Je vais faire des tests en changeant peut être les margin et/ou padding .

Cordialement
Denis
Modifié par denisdlu7 (24 Nov 2005 - 20:15)