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
Modifié par denisdlu7 (24 Nov 2005 - 19:54)
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)