Mise en page de div longueur variable
Oui_Oui
-
Oui_Oui -
Oui_Oui -
Bonjour,
Voila j'ai un petit soucis de mise en page,
Tout mes calques sont en position relative et j'aimerai arriver a replacer mon cadre centrale.
Si vous avez une petite idée ?
Merci d'avance [cligne]
[url=https://www.hiboox.fr/][img]http://images4.hiboox.com/vignettes/3508/6a95c40353247f88390a4f018315c975.jpg[/img][/url]
Une petite photo de ce que ça donne
Le code Css :
[code]
/*============================== Cadre principale ========================================*/
.body
{
text-align:center;
}
.conteneur
{
width:963px;
margin-left:auto;
margin-right:auto;
}
.header1
{
position:relative;
margin-top:0px;
background-color:#000000;
width:963px;
height:52px;
}
.bout_home
{
position:relative;
background-image:url(images/default/m1.jpg);
background-repeat:no-repeat;
width:161px;
height:52px;
margin-top:3px;
}
.bout_news
{
position:relative;
background-image:url(images/default/m2.jpg);
background-repeat:no-repeat;
width:160px;
height:52px;
margin-left:160px;
margin-top:-52px;
}
.bout_promo
{
position:relative;
background-image:url(images/default/m3.jpg);
background-repeat:no-repeat;
width:160px;;
height:52px;
margin-left:320px;
margin-top:-52px;
}
.bout_account
{
position:relative;
background-image:url(images/default/m4.jpg);
background-repeat:no-repeat;
width:160px;
height:52px;
margin-left:480px;
margin-top:-52px;
}
.bout_contact
{
position:relative;
background-image:url(images/default/m5.jpg);
background-repeat:no-repeat;
width:173px;
height:52px;
margin-left:640px;
margin-top:-52px;
}
.bout_faq
{
position:relative;
background-image:url(images/default/m6.jpg);
background-repeat:no-repeat;
width:150px;
height:52px;
margin-left:813px;
margin-top:-52px;
}
.logo_gauche
{
position:relative;
background-image:url(images/default/logo_gauche.jpg);
background-repeat:no-repeat;
margin-top:3px;;
width:199px;
height:238px;
}
.logo_droite
{
position:absolute;
background-image:url(images/default/logo_droite.jpg);
background-repeat:no-repeat;
margin-top:-238px;
width:760px;
height:238px;
margin-left:203px;
}
/*==============================================================================================*/
/*=============================== Partie centrale dyna =========================================*/
.cadre_centre
{
position:absolute;
width:963px;
height:auto;
}
.menucate
{
position:relative;
margin-top:4px;
background-color:#ece8e7;
width:199px;
}
.menunews
{
position:relative;
margin-top:5px;
width:199px;
border:solid 2px;
border-color:#ece8e7;
}
.produits
{
position:relative;
top:0px;
width:586px;
border:solid 2px;
border-color:#ece8e7;
margin-left:203px;
}
/*=============================================================================================================*/
/*=============================================================================================================*/
.footer
{
position:absolute;
bottom:0;
width:963px;
height:70px;
margin-top:3px;
padding-bottom:3px;
}
.paypal_cb
{
position:relative;
background-color:#CCCCCC;
/*background-image:url(images/default/p1.gif);*/
width:199px;
height:70px;
}
.lien
{
position:relative;
background-color:#a19996;
margin-left:204px;
margin-top:-70px;
width:760px;
height:70px;
}
[/code]
Le code html
[code]
<div class="conteneur" align="left">
<div class="header1"></div>
<a href="index.php"><div class="bout_home"></div></a>
<a href="products_new.php"><div class="bout_news"></div></a>
<a href="specials.php"><div class="bout_promo"></div></a>
<a href="login.php"><div class="bout_account"></div></a>
<a href="contact_us.php"><div class="bout_contact"></div></a>
<a href="faq.php"><div class="bout_faq"></div></a>
<div class="logo_gauche"></div>
<div class="logo_droite"></div>
<div class="cadre_centre">
<div class="menucate">$categorybox</div>
<div class="menunews">$whatsnewbox</div>
<div class="produits">$content</div>
</div>
<div class="footer">
<div class="paypal_cb"> <img src="images/default/p1.png" style="margin-top:25px; margin-left:16px; "></div>
<div class="lien"><br>
<em style="color:#FFFFFF;font-family:Georgia, Times New Roman, Times, serif; font-size:12px; padding:10em">> Promotions > Recherche > Commentaires > Créer un compte > Se connecter </em>
<em style="color:#FFFFFF;font-family:Georgia, Times New Roman, Times, serif; font-size:12px; padding:10em">Copyright © 2008 osCommerce Privacy Notice | Conditions of Use</em>
</div>
</div>
[/code]
Voila j'ai un petit soucis de mise en page,
Tout mes calques sont en position relative et j'aimerai arriver a replacer mon cadre centrale.
Si vous avez une petite idée ?
Merci d'avance [cligne]
[url=https://www.hiboox.fr/][img]http://images4.hiboox.com/vignettes/3508/6a95c40353247f88390a4f018315c975.jpg[/img][/url]
Une petite photo de ce que ça donne
Le code Css :
[code]
/*============================== Cadre principale ========================================*/
.body
{
text-align:center;
}
.conteneur
{
width:963px;
margin-left:auto;
margin-right:auto;
}
.header1
{
position:relative;
margin-top:0px;
background-color:#000000;
width:963px;
height:52px;
}
.bout_home
{
position:relative;
background-image:url(images/default/m1.jpg);
background-repeat:no-repeat;
width:161px;
height:52px;
margin-top:3px;
}
.bout_news
{
position:relative;
background-image:url(images/default/m2.jpg);
background-repeat:no-repeat;
width:160px;
height:52px;
margin-left:160px;
margin-top:-52px;
}
.bout_promo
{
position:relative;
background-image:url(images/default/m3.jpg);
background-repeat:no-repeat;
width:160px;;
height:52px;
margin-left:320px;
margin-top:-52px;
}
.bout_account
{
position:relative;
background-image:url(images/default/m4.jpg);
background-repeat:no-repeat;
width:160px;
height:52px;
margin-left:480px;
margin-top:-52px;
}
.bout_contact
{
position:relative;
background-image:url(images/default/m5.jpg);
background-repeat:no-repeat;
width:173px;
height:52px;
margin-left:640px;
margin-top:-52px;
}
.bout_faq
{
position:relative;
background-image:url(images/default/m6.jpg);
background-repeat:no-repeat;
width:150px;
height:52px;
margin-left:813px;
margin-top:-52px;
}
.logo_gauche
{
position:relative;
background-image:url(images/default/logo_gauche.jpg);
background-repeat:no-repeat;
margin-top:3px;;
width:199px;
height:238px;
}
.logo_droite
{
position:absolute;
background-image:url(images/default/logo_droite.jpg);
background-repeat:no-repeat;
margin-top:-238px;
width:760px;
height:238px;
margin-left:203px;
}
/*==============================================================================================*/
/*=============================== Partie centrale dyna =========================================*/
.cadre_centre
{
position:absolute;
width:963px;
height:auto;
}
.menucate
{
position:relative;
margin-top:4px;
background-color:#ece8e7;
width:199px;
}
.menunews
{
position:relative;
margin-top:5px;
width:199px;
border:solid 2px;
border-color:#ece8e7;
}
.produits
{
position:relative;
top:0px;
width:586px;
border:solid 2px;
border-color:#ece8e7;
margin-left:203px;
}
/*=============================================================================================================*/
/*=============================================================================================================*/
.footer
{
position:absolute;
bottom:0;
width:963px;
height:70px;
margin-top:3px;
padding-bottom:3px;
}
.paypal_cb
{
position:relative;
background-color:#CCCCCC;
/*background-image:url(images/default/p1.gif);*/
width:199px;
height:70px;
}
.lien
{
position:relative;
background-color:#a19996;
margin-left:204px;
margin-top:-70px;
width:760px;
height:70px;
}
[/code]
Le code html
[code]
<div class="conteneur" align="left">
<div class="header1"></div>
<a href="index.php"><div class="bout_home"></div></a>
<a href="products_new.php"><div class="bout_news"></div></a>
<a href="specials.php"><div class="bout_promo"></div></a>
<a href="login.php"><div class="bout_account"></div></a>
<a href="contact_us.php"><div class="bout_contact"></div></a>
<a href="faq.php"><div class="bout_faq"></div></a>
<div class="logo_gauche"></div>
<div class="logo_droite"></div>
<div class="cadre_centre">
<div class="menucate">$categorybox</div>
<div class="menunews">$whatsnewbox</div>
<div class="produits">$content</div>
</div>
<div class="footer">
<div class="paypal_cb"> <img src="images/default/p1.png" style="margin-top:25px; margin-left:16px; "></div>
<div class="lien"><br>
<em style="color:#FFFFFF;font-family:Georgia, Times New Roman, Times, serif; font-size:12px; padding:10em">> Promotions > Recherche > Commentaires > Créer un compte > Se connecter </em>
<em style="color:#FFFFFF;font-family:Georgia, Times New Roman, Times, serif; font-size:12px; padding:10em">Copyright © 2008 osCommerce Privacy Notice | Conditions of Use</em>
</div>
</div>
[/code]
A voir également:
- Mise en page de div longueur variable
- Mise en forme conditionnelle excel - Guide
- Impossible de supprimer une 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