Mise en page avec div
j.tel
Messages postés
133
Date d'inscription
Statut
Membre
Dernière intervention
-
notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention -
notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je viens de commancer la creation d'un site web et je maitrise pas bien le css.
voila mon fichier index
<div id="total">
<div id="logo"><img src="images/logo.PNG" /></div>
<div id="banniere"><img src="images/Sans titre.PNG" width="762" height="97" /></div>
<div id="rechercher">Rechercher</div>
<div id="topmenu">topMenu</div>
<div id="leftmenu">
<div id="leftmenu1">leftmenu1</div>
<div id="leftmenu2">leftmenu2</div>
<div id="leftmenu3">leftmenu3</div>
</div>
<div id="corps">Corps</div>
<div id="rightmenu">
<div id="rightmenu1">rightmenu1</div>
<div id="rightmenu2">rightmenu2</div>
</div>
<div id="footer">footer</div>
</div>
le probleme existe dans le corps (je veux la placer au mulieu) ca marche sur IE et ca marche pas sur google chrome
footer jaimerai la placer en bas de ma page
si vous avez une solution n'hesiter pas a me repondre
merci
css :
#total {
/*position:absolute;*/
/*left:130px;*/
margin:auto;
top:0px;
width:950px;
height:733px;
/*z-index:1;*/
background-color:#CCCCCC;
}
#logo {
/*position:absolute;*/
/*left:130px;*/
top:0px;
width:182px;
height:97px;
z-index:1;
float:left;
}
#banniere {
/*position:absolute;*/
/*left:316px;*/
top:0px;
width:762px;
height:97px;
z-index:2;
float:right;
}
#rechercher {
/*position:absolute;*/
/*left:132px;*/
top:108px;
width:180px;
height:35px;
z-index:3;
float:left;
background-color:#FFF000;
}
#topmenu {
/*position:absolute;*/
/*left:315px;*/
top:108px;
width:750px;
height:35px;
z-index:4;
float:right;
background-color:#FEF000;
}
#leftmenu {
/*position:absolute;*/
/*left:131px;*/
top:145px;
width:179px;
height:393px;
z-index:5;
float:left;
}
#leftmenu1 {
background-image:url(../images/bglogin.png);
/*position:absolute;*/
/*left:133px;*/
top:151px;
width:175px;
height:128px;
/*z-index:7;*/
}
#leftmenu2 {
background-image:url(../images/bglogin.png);
/*position:absolute;*/
/*left:132px;*/
top:283px;
width:177px;
height:119px;
/*z-index:8;*/
}
#leftmenu3 {
background-image:url(../images/bglogin.png);
/*position:absolute;*/
/*left:133px;*/
top:407px;
width:174px;
height:127px;
/* z-index:9;*/
}
#rightmenu {
/*position:absolute;*/
/*left:898px;*/
top:146px;
width:180px;
height:393px;
z-index:7;
float:right;
}
#rightmenu1 {
background-image:url(../images/bglogin.png);
background-repeat:no-repeat;
background-position:center;
/*position:absolute;*/
/*left:901px;*/
top:148px;
width:175px;
height:216px;
/*z-index:11;*/
}
#rightmenu2 {
background-image:url(../images/bglogin.png);
/*position:absolute;*/
/*left:901px;*/
top:367px;
width:175px;
height:170px;
/*z-index:12;*/
}
#corps {
position:absolute;
/*left:315px;*/
top:145px;
width:578px;
height:432px;
z-index:6;
background:#00CC66;
}
#footer {
position:absolute;
/*left:134px;*/
top:541px;
width:943px;
height:42px;
z-index:8;
background-color:#0033FF;
}
je viens de commancer la creation d'un site web et je maitrise pas bien le css.
voila mon fichier index
<div id="total">
<div id="logo"><img src="images/logo.PNG" /></div>
<div id="banniere"><img src="images/Sans titre.PNG" width="762" height="97" /></div>
<div id="rechercher">Rechercher</div>
<div id="topmenu">topMenu</div>
<div id="leftmenu">
<div id="leftmenu1">leftmenu1</div>
<div id="leftmenu2">leftmenu2</div>
<div id="leftmenu3">leftmenu3</div>
</div>
<div id="corps">Corps</div>
<div id="rightmenu">
<div id="rightmenu1">rightmenu1</div>
<div id="rightmenu2">rightmenu2</div>
</div>
<div id="footer">footer</div>
</div>
le probleme existe dans le corps (je veux la placer au mulieu) ca marche sur IE et ca marche pas sur google chrome
footer jaimerai la placer en bas de ma page
si vous avez une solution n'hesiter pas a me repondre
merci
css :
#total {
/*position:absolute;*/
/*left:130px;*/
margin:auto;
top:0px;
width:950px;
height:733px;
/*z-index:1;*/
background-color:#CCCCCC;
}
#logo {
/*position:absolute;*/
/*left:130px;*/
top:0px;
width:182px;
height:97px;
z-index:1;
float:left;
}
#banniere {
/*position:absolute;*/
/*left:316px;*/
top:0px;
width:762px;
height:97px;
z-index:2;
float:right;
}
#rechercher {
/*position:absolute;*/
/*left:132px;*/
top:108px;
width:180px;
height:35px;
z-index:3;
float:left;
background-color:#FFF000;
}
#topmenu {
/*position:absolute;*/
/*left:315px;*/
top:108px;
width:750px;
height:35px;
z-index:4;
float:right;
background-color:#FEF000;
}
#leftmenu {
/*position:absolute;*/
/*left:131px;*/
top:145px;
width:179px;
height:393px;
z-index:5;
float:left;
}
#leftmenu1 {
background-image:url(../images/bglogin.png);
/*position:absolute;*/
/*left:133px;*/
top:151px;
width:175px;
height:128px;
/*z-index:7;*/
}
#leftmenu2 {
background-image:url(../images/bglogin.png);
/*position:absolute;*/
/*left:132px;*/
top:283px;
width:177px;
height:119px;
/*z-index:8;*/
}
#leftmenu3 {
background-image:url(../images/bglogin.png);
/*position:absolute;*/
/*left:133px;*/
top:407px;
width:174px;
height:127px;
/* z-index:9;*/
}
#rightmenu {
/*position:absolute;*/
/*left:898px;*/
top:146px;
width:180px;
height:393px;
z-index:7;
float:right;
}
#rightmenu1 {
background-image:url(../images/bglogin.png);
background-repeat:no-repeat;
background-position:center;
/*position:absolute;*/
/*left:901px;*/
top:148px;
width:175px;
height:216px;
/*z-index:11;*/
}
#rightmenu2 {
background-image:url(../images/bglogin.png);
/*position:absolute;*/
/*left:901px;*/
top:367px;
width:175px;
height:170px;
/*z-index:12;*/
}
#corps {
position:absolute;
/*left:315px;*/
top:145px;
width:578px;
height:432px;
z-index:6;
background:#00CC66;
}
#footer {
position:absolute;
/*left:134px;*/
top:541px;
width:943px;
height:42px;
z-index:8;
background-color:#0033FF;
}
A voir également:
- Mise en page avec div
- Mise en forme conditionnelle excel - Guide
- Supprimer page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Mettre google en page d'accueil - Guide