[Résolu] float images - suis perdu dans mon résonnement

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  [Résolu] float images - suis perdu dans mon résonnement

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: [Résolu] float images - suis perdu dans mon résonnement (Lu 2386 fois)

[Résolu] float images - suis perdu dans mon résonnement
« sur: le 14-04-2011 a 13:35:44 »

reso101
Membre récent

Hors-Ligne

Sexe: Male

Messages: 17

Bonjour,

Je souhaite mettre 6 vignettes en 2 colonnes et 3 lignes avec chacunes un espace resonnable pour ne pas etre collées.
Le tout est contenu dans : <div id="corps">
Mon texte se trouve à gauche dans : <div id="texte">
Mes vignettes dans <div id="media">
Mais je n'arrive pas à les disposer sur 2 colonnes dans mon média
Voici le code :

HTML

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>LAUTEX TEXTILE</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design2.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

   <script src="js/prototype.js" type="text/javascript"></script>
   <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
   <script src="js/lightbox.js" type="text/javascript"></script>

</head>

<body>

<div id="fond">

<div id="corps">

<div id="texte">

   <ol>
     <li> titre </li>
<li> titre </li>
      <li> titre </li>
<span class="texte_a">texte</span>
   </ol>
   </div>

   <div id="media">

      <div id="photo1">
<div id="image">
<a href="imag/normal/1.jpg" rel="lightbox"><img src="imag/1.jpg" alt=" "/></a>
</div>
   </div>

   <div id="photo2">
   <div id="image">
      <a href="imag/normal/2.jpg" rel="lightbox"><img src="imag/2.jpg" alt=" "/></a>
</div>
</div>

   <div id="photo1">
<div id="image">
<a href="imag/normal/3.jpg" rel="lightbox"><img src="imag/3.jpg" alt=" "/></a>
</div>
   </div>

   <div id="photo2">
   <div id="image">
      <a href="imag/normal/4.jpg" rel="lightbox"><img src="imag/4.jpg" alt=" "/></a>
</div>
      </div>

      <div id="photo1">
<div id="image">
<a href="imag/normal/5.jpg" rel="lightbox"><img src="imag/5.jpg" alt=" "/></a>
</div>
   </div>

   <div id="photo2">
   <div id="image">
      <a href="imag/normal/6.jpg" rel="lightbox"><img src="imag/6.jpg" alt=" "/></a>
</div>
      </div>

   </div>

</div>

</div>

</body>
</html>

et le code CSS :

Code:
/*INTRODUCTION AU SITE*/
body
{
background-image: url('imag/test.jpg');
   margin: 0;
   padding: 0;
}

a img
{
border:none;
}

#fond
{
background-image: url('imag/rayures.jpg');
   height: 1200px;
   width: 100%;
   position: absolute;
}

/*CORPS DU SITE*/

#corps
{
   background-image: url('imag/fond-corps.gif');
   background-repeat: no-repeat;
   margin: auto;
   padding-top: 15px;
   height:450px;
   width: 1000px;
}

/*MODULE TEXTE*/

#texte
{
float: left;
width: 500px;
height: 420px;
margin-left: 30px;
bottom: 5px;
}

#texte li
{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:0.75em;
color: #009900;
font-weight: bolder;
}

.texte_a
{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:0.8em;
color: #fff;
}

/* MODULE PHOTOS*/

#media {
margin-top: 20px;
margin-left: 550px;
width: 430px;
height: 385px;
}

#image {
display : inline-block;
vertical-align: middle;
}

/* MODULE PHOTOS 2 x 3*/

#photo1
{
width: 220px;
height: 130px;
text-align: center;
vertical-align: middle;
}

#photo2
{
width: 220px;
height: 130px;
text-align: center;
}

#photo3
{
width: 220px;
height: 130px;
text-align: center;
}

#photo4
{
width: 220px;
height: 130px;
text-align: center;
}

#photo5
{
width: 220px;
height: 130px;
text-align: center;
}

#photo6
{
width: 220px;
height: 130px;
text-align: center;
}

C'est mon tout premier site en XHTML et CSS et je vous remercie par avance pour votre aide

« Dernière Édition: le 14-04-2011 a 20:13:39 par Pad »

Rapporter au modérateur

Re:float images - suis perdu dans mon résonnement
« Répondre #1 sur: le 14-04-2011 a 13:39:34 »

reso101
Membre récent

Hors-Ligne

Sexe: Male

Messages: 17

Petite modif de dernieres minutes

dans mon CSS j'ai changé la taille de mon width en 500px

Je modifierai la taille des vignettes plus tard pour tout caler...

Rapporter au modérateur

Re:float images - suis perdu dans mon résonnement
« Répondre #2 sur: le 14-04-2011 a 15:31:23 »

webexp
Membre récent

Hors-Ligne

Sexe: Male

Messages: 54

Tu fais un float left de #photo1 pour que #photo2 se mette à sa droite et en même temps tu lui met un clear:both pour qu'il aille à la ligne.

« Dernière Édition: le 14-04-2011 a 15:31:47 par webexp »

Rapporter au modérateur

Re:float images - suis perdu dans mon résonnement
« Répondre #3 sur: le 14-04-2011 a 16:14:32 »

reso101
Membre récent

Hors-Ligne

Sexe: Male

Messages: 17

Merci pour ta réponse,

Je n'ai pas tout compris au "clear:both" car je ne l'ai pas trouvé dans mon code cependant ça m'a permit de simplifier mon code.

Mais j'ai toujours un probleme, mon block "#photo2" se range en dessous du block "#photo3", décalé avec le margin-left, mais en dessous et je ne comprends pas pourquoi,

Merci si quelqu'un peut m'aider.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>textile</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design2.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

   <script src="js/prototype.js" type="text/javascript"></script>
   <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
   <script src="js/lightbox.js" type="text/javascript"></script>

</head>

<body>

<div id="fond">

<div id="corps">

<div id="texte">

   <ol>
     <li> titre </li>
<li> titre </li>
      <li> titre </li>
<span class="texte_a">texte</span>
   </ol>
   </div>

   <div id="media">

      <div id="photo1">
<div id="image">
<a href="imag/normal/1.jpg" rel="lightbox"><img src="imag/1.jpg" alt=" "/></a>
<a href="imag/normal/3.jpg" rel="lightbox"><img src="imag/3.jpg" alt=" "/></a>
<a href="imag/normal/5.jpg" rel="lightbox"><img src="imag/5.jpg" alt=" "/></a>
</div>
   </div>

   <div id="photo2">
   <div id="image">
      <a href="imag/normal/2.jpg" rel="lightbox"><img src="imag/2.jpg" alt=" "/></a>
<a href="imag/normal/4.jpg" rel="lightbox"><img src="imag/4.jpg" alt=" "/></a>
<a href="imag/normal/6.jpg" rel="lightbox"><img src="imag/6.jpg" alt=" "/></a>
</div>
</div>

   </div>

</div>

</div>

</body>
</html>

/*INTRODUCTION AU SITE*/
body
{
background-image: url('imag/test.jpg');
   margin: 0;
   padding: 0;
}

a img
{
border:none;
}

#fond
{
background-image: url('imag/rayures.jpg');
   height: 1200px;
   width: 100%;
   position: absolute;
}

/*CORPS DU SITE*/

#corps
{
   background-image: url('imag/fond-corps.gif');
   background-repeat: no-repeat;
   margin: auto;
   padding-top: 15px;
   height:450px;
   width: 1000px;
}

/*MODULE TEXTE*/

#texte
{
float: left;
width: 500px;
height: 420px;
margin-left: 30px;
bottom: 5px;
}

#texte li
{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:0.75em;
color: #009900;
font-weight: bolder;
}

.texte_a
{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:0.8em;
color: #fff;
}

/* MODULE PHOTOS*/

#media {
margin-top: 20px;
margin-left: 550px;
width: 500px;
height: 385px;
}

/*#image {
display : inline-block;
vertical-align: middle;*/
}

/* MODULE PHOTOS 2 x 3*/

#photo1
{
width: 220px;
text-align: center;
}

#photo2
{
margin-left: 240px;
width: 220px;
text-align: center;
}

Code:

Rapporter au modérateur

Re:float images - suis perdu dans mon résonnement
« Répondre #4 sur: le 14-04-2011 a 17:31:52 »

webexp
Membre récent

Hors-Ligne

Sexe: Male

Messages: 54

Avec ta structure tu peux faire plus simple :
la div qui contient les photos
Code:

<div id="media">
      <a href="imag/normal/1.jpg" rel="lightbox"><img src="imag/1.jpg" alt="" /></a>
<a href="imag/normal/3.jpg" rel="lightbox"><img src="imag/3.jpg" alt="" /></a>
<a href="imag/normal/5.jpg" rel="lightbox"><img src="imag/5.jpg" alt="" /></a>
      <a href="imag/normal/2.jpg" rel="lightbox"><img src="imag/2.jpg" alt="" /></a>
<a href="imag/normal/4.jpg" rel="lightbox"><img src="imag/4.jpg" alt="" /></a>
<a href="imag/normal/6.jpg" rel="lightbox"><img src="imag/6.jpg" alt="" /></a>
</div>

Le css :
Code:

*{
   margin: 0;
   padding: 0;
}
a img{
   border: none;
}
#media{
   width: 485px;
   background: red;
   padding: 0 0 15px 15px;
}
#media img{
   width: 220px;
   height: 130px;
   margin: 15px 15px 0 0;
}

Le principe est simple : tu donnes à ta div la largeur de tes 2 photos (plus les espacements) : si la 3e photo n'a de place pour venir se mettre à côté de la 2e, elle ira automatiquement à la ligne : c'est le fonctionnement normal d'un élément de type bloc.

Ensuite tu joues avec le padding du div et le margin des images pour donner l'espacement souhaité entre tes images.

« Dernière Édition: le 14-04-2011 a 17:34:47 par webexp »

Rapporter au modérateur

Re:float images - suis perdu dans mon résonnement
« Répondre #5 sur: le 14-04-2011 a 18:54:27 »

reso101
Membre récent

Hors-Ligne

Sexe: Male

Messages: 17

Super... merci pour ton aide... Tout marche impeccablement...

Quand on peut faire simple et bien moi j'adore passer des heures à faire des trucs compliqués qui ne marchent pas