Titre: Probleme placement d'une div
Posté par: damb341 le le 10-11-2011 a 10:43:38
Bonjour, j'ai un gros probleme qui parait tout bête pourtant. J'ai fais une div qui contient 4 div. Jusque la aucun soucis, or la div ligne_carre n'engloble pas les quatre div class carre.
Question : Pourquoi à votre avis?
Voici le code :
<!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>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="corps">
<div id="contenu">
<div id="colonne_gauche"><a href="#"><img class="hero left" src="images/camera.jpg" alt="iPhone 4S" width="540" height="573" /></a>
</div>
<div id="colonne_droite">
<div id="texte">
<div id="titre"><font color="#ba2c3a">La capta</font><font color="#000000">tion</font></div>
<div id="resume">Découvrez dans ces deux vidéos comment se passe la création d’un film à la DBA PRODUCTION FILMS. <p>C’est formidable de savoir avant.</p></div>
</div>
<div id="video">
<div id="vignette"></div>
<div id="watch"></div>
</div>
<div id="video2">
<div id="vignette"></div>
<div id="watch"></div>
</div>
</div>
</div>
<div id="ligne_carre">
<div class="carre"> <img src="images/mariagevign.png" /></div>
<div class="carre"> <img src="images/mariagevign.png" /></div>
<div class="carre"> <img src="images/mariagevign.png" /></div>
<div class="carre"> <img src="images/mariagevign.png" /></div>
</div>
</div>
</body>
</html>
et le css :
@charset "UTF-8";
/* CSS Document */
#contenu {
width:935px;
margin-left:auto;
margin-right:auto;
}
#colonne_droite {
width:377px;
float:right;
height:482px;
margin-top:100px;
display:block;
}
#colonne_gauche {
float:left;
display:block;
}
#titre {
font-family:Arial, Helvetica, sans-serif;
font-size:52px;
margin-bottom:18px;
margin-left:77px;
}
#resume {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#6d6d6d;
margin-left:77px;
}
.carre {
float:left;
margin-left:5px;
margin-top:20px;
}
#ligne_carre {
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:935px;
}
image du probleme
[url=http://imageshack.us/photo/my-images/521/image6xj.png/]
Merci beaucoup |
Titre: Re:Probleme placement d'une div
Posté par: vieactu le le 11-11-2011 a 08:16:58
La proprièté css "float" permet de sortir un élément du flux, il sort donc du bloc.
Il faut créer une <div> derrière qui va annuler l'effet de la proprièté "float" avec pour css : "clear: both" qui permettra un retour à la ligne et affichera le bloc suivant dans le flux. |
Titre: Re:Probleme placement d'une div
Posté par: MarvinLeRouge le le 12-11-2011 a 12:29:51
Salut,
Utilise directement la technique appelée clearfix sur le parent, ça t'évitera le coup du div surnuméraire qui fait le clear derrière. |
Titre: Re:Probleme placement d'une div
Posté par: damb341 le le 15-11-2011 a 13:56:24
C'est vrai qu'avec le clear both ca marche nickel, mais maintenant j'ai un autre soucis de div ^^
image de ce que je voudrais avoir :
[url=http://imageshack.us/photo/my-images/696/nospack.jpg/]
image de ce que me donne mon code :
[url=http://imageshack.us/photo/my-images/841/image2gxq.png/]
et voici mon code html :
<!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>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="corps">
<div id="contenu">
<div id="colonne_gauche"><a href="#"><img class="hero left" src="images/camera.jpg" alt="iPhone 4S" width="540" height="573" /></a>
</div>
<div id="colonne_droite">
<div id="colonne_regarder">
<div id="texte">
<div id="titre"><font color="#ba2c3a">La capta</font><font color="#000000">tion</font></div>
<div id="resume">Découvrez dans ces deux vidéos comment se passe la création d’un film à la DBA PRODUCTION FILMS. <p>C’est formidable de savoir avant.</p></div>
</div>
<div style="clear:both;"></div>
<div id="total">
<div id="image"></div>
<div id="texte">Regarder la <br/>video du iphone 4GS</div>
</div>
<div style="clear:both;"></div>
<div id="total1">
<div id="image"></div>
<div id="texte">Regarder la <br/>video du iphone 4GS</div>
</div>
</div>
</div>
</div>
<div id="ligne_carre">
<div style="clear:both;"></div>
<div class="carre"> <img src="images/mariage_carre.png" /></div>
<div class="carre"> <img src="images/institutionnel_carre.png" /></div>
<div class="carre"> <img src="images/clubbing_carre.png" /></div>
<div class="carre"> <img src="images/conversion_carre.png" /></div>
</div>
</div>
</body>
</html>
voici mon code css :
@charset "UTF-8";
/* CSS Document */
#contenu {
width:935px;
margin-left:auto;
margin-right:auto;
}
#colonne_droite {
width:377px;
float:right;
height:482px;
margin-top:100px;
display:block;
}
#colonne_gauche {
float:left;
display:block;
}
#titre {
font-family:Arial, Helvetica, sans-serif;
font-size:52px;
margin-bottom:18px;
margin-left:77px;
}
#resume {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#6d6d6d;
margin-left:77px;
}
.carre {
float:left;
margin-left:5px;
margin-top:20px;
}
#ligne_carre {
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:935px;
}
#vignette {
border:1px solid #e6e6e6;
-webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;
width:90px;
position:relative;
float:left;
}
#watch {
width:120px;
height:57px;
position:relative;
}
#video {
}
@charset "UTF-8";
/* CSS Document */
#total1 {
margin-top:15px;
}
#image {
background-image:url(images/test.jpg);
height:57px;
width:90px;
float:left;
}
#texte {
width:150px;
height:40px;
float:left;
display:inline-block; padding:8px 10px 8px 5px; cursor:pointer; border-left:1px solid #e3e3e3; *background-position:100% 55%; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#d1213b;
}
#image1 {
background-image:url(images/test.jpg);
height:57px;
width:90px;
float:left;
}
#texte1 {
width:150px;
height:40px;
float:left;
display:inline-block; padding:8px 10px 8px 5px; cursor:pointer; border-left:1px solid #e3e3e3; *background-position:100% 55%; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#d1213b;
}
Avez vous une idée? le clear:both ne marche pas |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|