Mise en page de div longueur variable

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]
A voir également:

1 réponse

Oui_Oui
 
Voila ce que ça donne en image pour le moment :

https://www.hiboox.fr/
0