Css

Fermé
diadiawoyi - 4 févr. 2010 à 01:40
jona303 Messages postés 369 Date d'inscription dimanche 25 janvier 2009 Statut Membre Dernière intervention 28 janvier 2013 - 4 févr. 2010 à 14:55
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

2 réponses

lalouviere84 Messages postés 116 Date d'inscription mardi 26 janvier 2010 Statut Membre Dernière intervention 19 janvier 2011 24
4 févr. 2010 à 14:44
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;
}
0
jona303 Messages postés 369 Date d'inscription dimanche 25 janvier 2009 Statut Membre Dernière intervention 28 janvier 2013 28
4 févr. 2010 à 14:55
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

<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
0