Bug d'affichage CSS

B'jour à tous (oui je pollue pas mal le forum en ce moment)
Ca fait 2h que je cherche à aligner ça correctement mais euh... sans succès  :(


Donc en fait j'ai 2 barres verticales et une horizontale avec des images pour donner les effets dégradés.

html,body
{
margin:0px;
padding:0px;
/*background-image: url(font/bg_inscrip.gif);*/
height:100%;
margin: auto;
color: #40526B;
}
#barleft
{
position: relative;
background-color: #F12565;
min-height: 100%;
float: left;
width: 15%;
}
#borderleft
{
background-image: url(font/border_rose.gif);
background-repeat: repeat-x;
height: 200px;
}
#barright
{
position: relative;
background-color: #F12565;
min-height: 100%;
float: right;
width: 15%;
}
#bartop
{
position: fixed;
width: 10%;
height: 100px;
margin: auto;
display: inline;
background-color: #356682;
}
#bordertopleft
{
background-image: url(font/border_bleu_left.gif);
height: 100px;
width: 500px;
background-repeat: repeat-y;
}
#bordertopright
{
background-image: url(font/border_bleu_right.gif);
height: 100px;
background-repeat: repeat-y;
}

<div id="bartop">
<div id="bordertopleft"></div>
<div id="bordertopright"></div>
</div>

Voilou, si quelqun sait m'aider ce serait sympa  :)

note; le fait que la barre header fasse 10% de large est fait exprès pour les tests car je ne sais pas encore vraiment quelle taille lui donner à cause du décalage subi par les 2 barres verticales qui donne un résultat inférieur de 2*100px à 100%

 Et sous IE le résultat est encore pire! Je pense que je vais finir par retourner à mes vieux <table> car j'ai un mal de chien en <div> et c'est pas propre pour un sou
Je viens d'essayer de mettre la barre de coloration prolongée pour le top dans un 3e div et je me suis rendu compte que c'était l'utilisation de div qui créaient ce passage à la ligne mais je ne sais pas pour autant y remédier...

Quelqun saurait m'orienter là car c'est pas évident  o_O  ?

Bonjour,

je te propose d'aller voir le lien ci-dessous et d'essayer par toi même.
Tu devrais y touver la solution à tes problèmes.
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Nickadele

non désolé, j'ai bien lu mais ça ne répond pas à mon problème; ici j'utilise un float: right; mais dès que je déforme la fenêtre il vient mal se placer

#bartop
{
position: absolute;
background-color: #356682;
height: 100px;
margin: auto;
display: inline;

}
#bordertopleft
{
background-image: url(font/border_bleu_left.gif);
height: 100px;
width: 200px;
background-repeat: repeat-y;
float:left;
}
#bordertopright
{
background-image: url(font/border_bleu_right.gif);
height: 100px;
background-repeat: repeat-y;
width: 200px;
float: right;

si tu souhaites que les floats réagissent bien, il ne faut pas utiliser de % pour définir une largeur.
Le mieux aussi est de définit la largeur de chaque élément.
Pourrais-tu donner soit le code complet html ou une adresse de la page visible.

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle

Malheureusement la page est dans une zone membre mais je peux évidemment donner le code complet.
Pourquoi pas de %? c'est plus pratique et de meilleur qualité pour les petites définitions où les gens qui auraient une petite résolution (800*600 ou inférieur)

code CSS;
html,body
{
margin:0px;
padding:0px;
/*background-image: url(font/bg_inscrip.gif);*/
width: 100%;
height: 100%;
margin: auto;
color: #40526B;
background-color: #000000;
}
#barleft
{
position: relative;
background-color: #FF0078;
min-height: 100%;
float: left;
width: 12%;
}
#borderleft
{
background-image: url(font/border_rose.gif);
background-repeat: repeat-x;
height: 200px;
}
#barright
{
position: relative;
background-color: #FF0078;
min-height: 100%;
float: right;
width: 12%;
}
#bartop
{
position: absolute;
background-color: #356682;
height: 100px;
margin: auto;
display: inline;

}
#bordertopleft
{
background-image: url(font/border_bleu_left.gif);
height: 100px;
width: 200px;
background-repeat: repeat-y;
float:left;
}
#bordertopright
{
background-image: url(font/border_bleu_right.gif);
height: 100px;
background-repeat: repeat-y;
width: 200px;
float: right;
}
#miniemo
{
position: absolute;
z-index: 100;
background-image: url(font/mini_emo.gif);
width: 65px;
height: 82px;
}
#menu
{
}
l'index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>:: EmoNest::</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" href="style.css " />
    </head>
    <body>
    <? include 'navi.php';?>
    </body>
<?
mysql_close();
?>
</html>

navi
<div id="bartop">
<div id="bordertopleft"></div>
<div id="bordertopright"></div>
</div>
<div id="barleft">
<div id="miniemo"></div>
<div id="borderleft">
</div>
<div id="menu">
<img src="font/stars.gif" style="width:100%;" alt="" />
<img src="font/newzeur.gif" style="width:100%;" alt="" />
<img src="font/discuss.gif" style="width:100%;" alt="" />
<img src="font/lesgens.gif" style="width:100%;" alt="" />
<img src="font/starsend.gif" style="width:100%;" alt="" />
</div>
</div>
<div id="barright">
<div id="borderleft"></div>
</div>



et voici donc

Bonjour,

j'ai regardé ton code d'un peu plus près.
Comme dit plus haut, si tu mets des % sur des zones comme barleft ou barright, il est un fait que lorsque l'utilisateur resize la page l'ensemble de ces éléments suivent le resize.
Ce que je peux te conseiller c'est de procéder comme suit.
1. ne pas hésiter à imbriquer tes DIV
2. créer une structure de ta page

Cela devrait un truc du genre :
Poue le css :
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #333;
}

#blocleft {
position: absolute;
top: 0px;
left: 0px;
background-color: #FF0078;
width: 120px;
}
#bloccontent {
margin: 0px 120px 0px 120px;
background-color: #FFF;
}
#blocright {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a space
at right when there is no scroll bar */
background-color: #FF0078;
width: 120px;
}
#contentheader{
background-color: #356682;

}
#contentfooter{
background-color: #356682;

}
#content{
}
#menu{
}

Pour la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>:: EmoNest::</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" href="style.css " />
    </head>
    <body>
<div id='blocpage'>
<div id='blocleft'>
  <div id="menu">
   <img src="font/stars.gif" style="width:100%;" alt="" />
   <img src="font/newzeur.gif" style="width:100%;" alt="" />
   <img src="font/discuss.gif" style="width:100%;" alt="" />
   <img src="font/lesgens.gif" style="width:100%;" alt="" />
   <img src="font/starsend.gif" style="width:100%;" alt="" />
  </div>
</div>
<div id='bloccontent'>
   <div id='contentheader'>en tete de page</div>
   <div id='content'>contenu</div>
   <div id='contentfooter'>pied de page</div>
</div>
<div id='blocright'>zone de droite</div>
</div>

    </body>
</html>

Merci beaucoup :-)
C'est parfait maintenant; sauf un petit détail: quand je l'étire à cause d'un long texte sous IE comme sous FF les bandes de gauche et droite restent limitées à 100% de l'écran (barright et barleft)
j'ai rajouté des html>body #barleft  car je crois que ce n'est lu que par IE mais je ne suis pas sûr...
Voici le nouveau code :-)

html,body
{
margin:0px;
padding:0px;
width: 100%;
height: 100%;
margin: auto;
color: #40526B;
background-color: #000000;
}
#barleft
{
position: absolute;
background-color: #FF0078;
height: 100%;
bottom: 100px;
left: 0px;
top: 0px;
width: 150px;
}
html>body #barleft
{
min-height: 100%;
}
#borderleft
{
background-image: url(font/border_rose.gif);
background-repeat: repeat-x;
height: 200px;
}
#barright
{
position: absolute;
background-color: #FF0078;
height: 100%;
right: 0px;
width: 150px;
top: 0px;
bottom: 100px;
}
html>body #barright
{
min-height: 100%;
}
#bartop
{
background-color: #356682;
height: 100px;
margin: auto;
}
#bordertopleft
{
position: absolute;
background-image: url(font/border_bleu_left.gif);
height: 100px;
width: 200px;
background-repeat: repeat-y;
top: 0px;
left: 150px;
}
#bordertopright
{
position: absolute;
background-image: url(font/border_bleu_right.gif);
height: 100px;
background-repeat: repeat-y;
width: 200px;
top: 0px;
right: 0px;
}
#miniemo
{
position: absolute;
z-index: 100;
background-image: url(font/mini_emo.gif);
width: 65px;
height: 82px;
}
#menu
{
}

>>sauf un petit détail: quand je l'étire à cause d'un long texte sous IE comme sous FF les bandes de gauche et droite restent limitées à 100% de l'écran (barright et barleft)
>> Tu l'étires vers le bas ou vers la droite ?

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle

vers le bas
j'aimerai que la barright et la barleft s'étirent en longueur autant que la page est longue.
J'y suis arrivé sur d'autres sites mais ici je ne comprends vraiment pas d'où vient mon erreur

Le min-height ne sert strictement à rien, il n'est pris en charge que sur les balises tableau (tr, td).
Par contre en plaçant un height:100%; cela fonctionne.
css :
html, body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #333;
height:100%;
}

#blocleft {
position: absolute;
top: 0px;
left: 0px;
background-color: #FF0078;
width: 120px;
height:100%;
}
#bloccontent {
margin: 0px 120px 0px 120px;
background-color: #FFF;
height:100%;
}
#blocright {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a space
at right when there is no scroll bar */
background-color: #FF0078;
width: 120px;
}
#contentheader{
background-color: #356682;

}
#contentfooter{
background-color: #356682;

}
#content{
}
#menu{
}
Page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

" [ Lien ]">
<html xmlns=" [ Lien ]" xml:lang="fr" >
   <head>
       <title>:: EmoNest::</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" href="styles_test.css " />
    </head>
    <body>
<div id='blocpage'>
<div id='blocleft'>
  <div id="menu">
   <img src="font/stars.gif" style="width:100%;" alt="" />
   <img src="font/newzeur.gif" style="width:100%;" alt="" />
   <img src="font/discuss.gif" style="width:100%;" alt="" />
   <img src="font/lesgens.gif" style="width:100%;" alt="" />
   <img src="font/starsend.gif" style="width:100%;" alt="" />
  </div>
</div>
<div id='bloccontent'>
   <div id='contentheader'>en tete de page</div>
   <div id='content'>contenu</div>
   <div id='contentfooter'>pied de page</div>
</div>
<div id='blocright'>zone de droite</div>
</div>

    </body>
</html>

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle