Div dans un div
Publié: Jeu Juin 19, 2008 10:02voici le code et les explications, j'ai mis les css dans le head mais tu peux aussi creer un fichier extern et mettre un lien vers ton fichier
fais un copier coller et visualise le avec ton navigateur, je t'ai mis toutes les explications en essayant d'etre le plus clair possible
<!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>Document sans nom</title>
<style type="text/css">
<!--
.conteneur {
margin: auto;
height: 600px;
width: 800px;
border: thin solid #FF0000;
}
.colgauche {
float: left;
height: 600px;
width: 400px;
}
.coldroite {
float: left;
height: 600px;
width: 400px;
}
.coldroitetexte {
float: left;
height: 600px;
width: 200px;
}
.coldroitephotos {
float: right;
height: 600px;
width: 200px;
}
-->
</style>
</head>
<body>
<div class="conteneur">
<div class="colgauche">
ici tu met tes photos et ton texte, tu peux aussi imbriquer
une ou plusieurs autres div les tables sont parfaitement inutiles
et alourissent ton code inutilement comme dans la colone de droite.
éfforce toi aussi de mettre des valeurs fixe pour la hauteur et la largeur
de tes div, les valeurs en auto ca marche pas toujours. en tout cas selon
les navigateurs, tu auras des surprises.
<br/><br/>
explications à propos des div flotantes
<br/><br/>
ici tu as la div class="conteneur"
<br/>
dans laquelle tu as la div class="divgauche" flottante à gauche <br/>
donc elle se colle sur le bord gauche du conteneur.
<br/>
utilise toujous des noms cohérents pour tes div au lieu de div1,<br/>
div2, ou table1, table2, sinon tu vas plus t'y retrouver le jour ou tu as trop de div.
<br/><br/>
A coté tu as la balise class="coldroite" flottante a droite ou a gauche
ce n'est pas important car si tu la met flottante à gauche elle vient se
coller contre la div class="colgauche"
<br/><br/>
a l'interieur de la balise div class="coldroite" j'ai dabord mis la balise
div class "coldroitetexte" flottante à gauche donc elle se colle sur le bord
gauche de la balise div class="coldroite" puisque qu'elle est a l'interieur.
<br/><br/>
Après la balise div class="coldroitetexte" et toujours a l'interieur de la
balise div class="coldroite", j'ai mis la balise div class="coldroitephotos"
flottante a droite ou a gauche c'est pas important non plus. si tu la colle
à gauche elle se colle contre la balise div class="coldroitetexte" et si tu
la colle a droite elle se colle contre le bord droit de la balise div class
="coldroite". le resultat est le meme dans ce cas précis.
</div>
<div class="coldroite">
<div class="coldroitephotos">Placez ici le contenu de class "coldroitephotos"</div>
<div class="coldroitetexte">Placez ici le contenu de class "coldroitetexte"</div>
</div>
</div>
</body>
</html>