Maj du screenshot:
Je précise que je n ai aucun problème, pour l'en tête ni pour le pied de page. J ai bien essayé de m'inspirer de ce script qu on trouve sur alsacréations avec les div gauche et droit rempli. Et est essayé pas mal de méthode...rien qui ne convienne.
L objectif est de réaliser un design extensible en suivant le design cijoint
a écrit :
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
position: absolute;
width: 100%;
}
p {
margin: 0 0 10px 0;
}
/* header */
#header {
height:117px;
margin-top:20px;
}
#headerpart1
{ float: left;
width:369px;
padding-top:117px;
background-image: url("images/headerleft.png");
background-repeat: no-repeat;
border: 0px;
}
#headerpart2
{
background-image: url("images/headercenter.png");
background-repeat: repeat;
border: 0px;
padding-top:117px;
}
#headerpart3
{
float: right;
width:77px;
padding-top:117px;
background-image: url("images/headerright.png");
background-repeat: no-repeat;
}
#interne{
margin-top:0px !important;
margin-top:-17px ;
}
#centre {
background-image: url("images/backgroundblue.png");
background-repeat: repeat;
margin-left: 40px;
margin-right: 40px;
}
#gauche {
float:left;
width: 40px;
background-image: url("images/milieugauche.png");
background-repeat: repeat-y;
}
#droite {
float:right;
width: 40px;
background-image: url("images/milieudroit.png");
background-repeat: repeat-y;
}
/* bottom */
#pied {
clear:both;
height: 22px;
margin-top:-10px ;
}
#bottompart1
{float:left;
width:44px;
padding-top:22px;
background-image: url("images/bottomleft.png");
background-repeat: no-repeat;
}
#bottompart2
{background-image: url("images/bottomcenter.png");
background-repeat: repeat;
padding-top:22px;
}
#bottompart3
{float:right;
width:44px;
padding-top:22px;
background-image: url("images/bottomright.png");
background-repeat: no-repeat;
}
body>
<div id="conteneur">
<div id="header">
<div id="headerpart1"></div>
<div id="headerpart3"></div>
<div id="headerpart2"></div>
</div>
<div id="interne">
<div id="gauche">
</div>
<div id="droite">
</div>
<div id="centre">
<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p><BR>
</div>
</div>
<div id="pied">
<div id="bottompart1"></div>
<div id="bottompart3"></div>
<div id="bottompart2"></div>
</div>
</div>
</body>
Le résulat est que les deux colonnes droite et gauche ne s'agrandissent pas...normal surement puisqu'elles sont vides, alors bon j'ajoute un height:100% dans droite et gauche...rien, par contre height:1500px... oui. L'objectif est que le design soit extensible...donc on jete ^^.
Cette méthode ne semble pas la bonne.
Auparavant j ai testé
a écrit :
<body>
<div id="header">
<div id="headerpart1"></div>
<div id="headerpart3"></div>
<div id="headerpart2"></div>
</div>
<div id="contentpart1">
<div id="contentpart2">
<div id="contentpart3">
<?
include('menu.php');
include('content.php');
?>
</div>
</div>
</div>
<div id="bottom">
<div id="bottompart1"></div>
<div id="bottompart3"></div>
<div id="bottompart2"></div>
</div>
</body>
body
{ background-color: white ;
padding: 0px !important;
padding:10px;
width:100%;
height:100%;
}
/* header */
#header
{
float:left;
padding:0px;
margin-bottom:0px !important;
margin-bottom:-20px;
}
#headerpart1
{ float: left; /* La première partie sera à gauche*/
width:349px; /* On définit la largeur de l'image */
padding-top:117px;
background-image: url("images/headerleft.png");
background-repeat: no-repeat;
border: 0px;
}
#headerpart2
{
background-image: url("images/headercenter.png");
background-repeat: repeat; /* Un repeat-x aurait suffit, mais comme on définit la hauteur c'est pas la peine*/
border: 0px;
padding-top:117px;
}
#headerpart3
{
float: right; /* La dernière partie est à droite */
width:57px;
padding-top:117px;
background-image: url("images/headerright.png");
background-repeat: no-repeat;
}
#message
{
position: absolute;
margin-top:20px !important;
margin-top:0px;
left:20px !important;
left:30px;
width: 300px;
}
#news
{
position: absolute !important;
position: relative;
margin-top:20px !important;
margin-top:0px;
margin-left:300px !importan;
margin-left:330px;
right:30px;
}
#contentpart1
{
float:left;
background : url("images/contentleft.png") repeat-y ;
padding:0px;
padding-left: 20px ;
}
#contentpart2
{
padding:0px;
width : 100%;
background : url("images/backgroundblue.png") repeat;
height:100%;
}
#contentpart3
{
padding:0px;
float:right;
background : url("images/contentright.png") right repeat-y ;
padding-right: 20px ;
}
}
#cellcontent
{
background: #e1ebf3;
font-family: Times New Roman;
font-size: 12px;
}
#cellendpart1
{ float: left; /* La première partie sera à gauche*/
width:14px; /* On définit la largeur de l'image */
background-image: url("images/titlebottomleft.png");
background-repeat: no-repeat;
padding-top:24px;
}
#cellendpart2
{
background-image: url("images/titlebottomcenter.png");
background-repeat: repeat; /* Un repeat-x aurait suffit, mais comme on définit la hauteur c'est pas la peine*/
padding-top:24px;
}
#cellendpart3
{
float: right; /* La dernière partie est à droite */
width:199px;
background-image: url("images/titlebottomright.png");
background-repeat: no-repeat;
padding-top:24px;
}
/* bottom */
#bottom
{float:left;
padding:0px;
margin-bottom:0px !important;
margin-bottom:-20px;
}
#bottompart1
{float:left;
width:24px;
padding-top:22px;
background-image: url("images/bottomleft.png");
background-repeat: no-repeat;
}
#bottompart2
{background-image: url("images/bottomcenter.png");
background-repeat: repeat;
padding-top:22px;
}
#bottompart3
{float:right;
width:24px;
padding-top:22px;
background-image: url("images/bottomright.png");
background-repeat: no-repeat;
}
/* menu */
#menu
{
float:top;
}
ca marche mais c'est hyper boiteux... genre sous firefox j ai un gros blanc côté droit que j ai supprimé avec des positsion absolute, de ce fait...mes bases sql lorsqu elles me sortent plus de 1000 px de texte je sors du design.. bref plusieurs jours que je bricole.. mais j arrive à rien, alors si quelqu'un a une idée je suis preneur.
je me suis principalement inspiré du site du zéro et de alsacréations... le site est pret à étre lancé... manque que ce le design, pas la pein d 'aller sur noobelec.com , c'est vide pour le moment...merçi. Si v
Modifié par skylv (26 May 2006 - 19:00)
, merçi en tout cas pour l aide.