Css
diadiawoyi
-
jona303 Messages postés 369 Date d'inscription Statut Membre Dernière intervention -
jona303 Messages postés 369 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
voila je suis entrain d'apprendre a programmer en html et jusqu'a la tout va bien ; je m'en sort mais j'utilise les tableaux pour la mise en forme mais un ami m'a deconseillé cette façon de faire et m'a conseillé d'utiliser le css et les div pour la mise en forme. en gros il preconise la separtion de la structure de la mise en forme. j'ai donc entrepri l'apprentissage de css et je vais doucement mais surement seulement je souhaite obtenir un aspect comme celui la http://nsa10.casimages.com/img/2010/02/04/100204013336859528.png mais je n'y arrive pas avec les div ils se supporposent tous(l'un sous l'autre) donc j'aimerais savoir comment proceder.
merci pour votre aide
voila je suis entrain d'apprendre a programmer en html et jusqu'a la tout va bien ; je m'en sort mais j'utilise les tableaux pour la mise en forme mais un ami m'a deconseillé cette façon de faire et m'a conseillé d'utiliser le css et les div pour la mise en forme. en gros il preconise la separtion de la structure de la mise en forme. j'ai donc entrepri l'apprentissage de css et je vais doucement mais surement seulement je souhaite obtenir un aspect comme celui la http://nsa10.casimages.com/img/2010/02/04/100204013336859528.png mais je n'y arrive pas avec les div ils se supporposent tous(l'un sous l'autre) donc j'aimerais savoir comment proceder.
merci pour votre aide
A voir également:
- Css
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
2 réponses
Salut
Voilà vite fait une solution toute faite selon tes critères ... ça donne exactement ce que tu voulais :
HTML :
<body>
<div>
<div id="gauche">
<div id="logo">logo</div>
<div id="navigation">navigation</div>
</div>
<div id="secondaire">secondaire</div>
<div id="header">header</div>
<div id="principal">principal</div>
<div>
<div id="footer">footer</div>
</body>
CSS :
div#gauche {
float:left;
width:152px;
height:500px;
margin-bottom:5px;
margin-right:5px;
}
div#logo {
width:150px;
height:150px;
margin:1px;
}
div#navigation {
width:150px;
height:350px;
margin : 1px;
}
div#secondaire {
float:right;
width:150px;
height:500px;
margin-bottom:3px;
margin-left:5px;
}
div#header {
height:150px;
margin-left:5px;
margin-right:5px;
}
div#principal {
height:345px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
}
div#footer {
height:35px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
}
Voilà vite fait une solution toute faite selon tes critères ... ça donne exactement ce que tu voulais :
HTML :
<body>
<div>
<div id="gauche">
<div id="logo">logo</div>
<div id="navigation">navigation</div>
</div>
<div id="secondaire">secondaire</div>
<div id="header">header</div>
<div id="principal">principal</div>
<div>
<div id="footer">footer</div>
</body>
CSS :
div#gauche {
float:left;
width:152px;
height:500px;
margin-bottom:5px;
margin-right:5px;
}
div#logo {
width:150px;
height:150px;
margin:1px;
}
div#navigation {
width:150px;
height:350px;
margin : 1px;
}
div#secondaire {
float:right;
width:150px;
height:500px;
margin-bottom:3px;
margin-left:5px;
}
div#header {
height:150px;
margin-left:5px;
margin-right:5px;
}
div#principal {
height:345px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
}
div#footer {
height:35px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
}
voila, le rtuc c'est qu'il faut analyser la structure comme la fait le loup,
quand tu regardes ta page, tu peux séparer en plusieurs parties qui elle même se séparent en plusieurs parties.
En gros une colonne a gauche avec des div dedans, une colonne centrée avec des divs dedans, une à droite. et une en bas,..
par conter j'aurais plutot fait
avec un width fixe et un float left pour #gauche #center #droite
quand tu regardes ta page, tu peux séparer en plusieurs parties qui elle même se séparent en plusieurs parties.
En gros une colonne a gauche avec des div dedans, une colonne centrée avec des divs dedans, une à droite. et une en bas,..
par conter j'aurais plutot fait
<div id="gauche"> <div id="logo">logo</div> <div id="navigation">navigation</div> </div> <div id="center"> <div id="header"></div> <div id="principal"></div> </div> <div id="droite">secondaire</div> <div id="footer">footer</div>
avec un width fixe et un float left pour #gauche #center #droite
