Titre: [Résolu] float images - suis perdu dans mon résonnement
Posté par: reso101 le le 14-04-2011 a 13:35:44
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 |
Titre: Re:float images - suis perdu dans mon résonnement
Posté par: reso101 le le 14-04-2011 a 13:39:34
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...
|
Titre: Re:float images - suis perdu dans mon résonnement
Posté par: webexp le le 14-04-2011 a 15:31:23
| 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. |
Titre: Re:float images - suis perdu dans mon résonnement
Posté par: reso101 le le 14-04-2011 a 16:14:32
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:
|
Titre: Re:float images - suis perdu dans mon résonnement
Posté par: webexp le le 14-04-2011 a 17:31:52
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.
;) |
Titre: Re:float images - suis perdu dans mon résonnement
Posté par: reso101 le le 14-04-2011 a 18:54:27
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 :P
|
Titre: Re:float images - suis perdu dans mon résonnement
Posté par: reso101 le le 14-04-2011 a 19:02:44
Ce sujet est classé "résolu" mais je ne trouve pas sur le forum où le spécifier, quelqu'un pourrait il m'indiquer comment le faire.
Merci |
Titre: Re:[Résolu] float images - suis perdu dans mon résonnement
Posté par: Pad le le 14-04-2011 a 20:14:33
| Il suffit de modifier le titre de ton sujet sur ton premier message je crois ;) j'ai fais le changement en tout cas ! |
Titre: Re:[Résolu] float images - suis perdu dans mon résonnement
Posté par: reso101 le le 14-04-2011 a 21:03:09
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|