[Résolu] Besoin d'aide : aligner 3 div pour design extensible

Bonjour,
Je débute dans le css et l'html et je suis actuellement entrain de coder un design que j'ai fais.
Voici ce que j'ai fais pour le moment : http://whjulien.legtux.org/html/
Mon soucis est sur la barre rouge, avec les 2 dégradés de chaque cotés.
Actuellement j'ai mis 4 div, chacun contenant un fond différent.
Le premier "redbar_left" qui contient l'image dégradée de gauche, le deuxième le fond rouge, le troisième "redbar_char" la partie du personnage, le quatrième "redbar_right" avec l'image dégradée de droite.
J'utilise pour le 1er, 3ème et 4ème le positionnement absolute. Mais le soucis est que lorsque l'on réduit la fenêtre, ou si on a une petite résolution, ces éléments viennent se chevaucher.
J'ai ensuite essayer en dessous d'utiliser la propriété

display: inline-block;

, sauf que le résultat n'est pas convaincant. Il y a des espacements entre les div, et le div contenant le fond rouge ne s'étend pas.
Auriez vous une piste pour résoudre ce soucis ?

Salut,
Ce n'est pas le seul souci...regarde sous chrome.
Revoie une structure de ton header, tu peux faire la même chose en plus simple et moins découpé.

Je ne vois pas le soucis sous chrome, à part le soucis énoncé dans le post initial qui s'applique à tous les navigateurs.
Je vois à peu près comment je pourrais restructurer le header avec moins de découpe, je vais essayer.
En revanche je suis toujours intéressé par une technique pour avoir 3 div allignés, les 2 des extrémités étant de taille fixe, et celui du centre devant s'étendre. J'en aurais besoin pour la suite.
Comme je ne suis pas sûr d'être clair :

Le DIV1 et DIV3 sont aux extrémité et ont une taille fixe. Celui du centre contiendra le contenu et devra être extensible.

Salut !

Je ne sais pas si tu as résolu ton problème ou pas... Au cas ou je te donne ma façon de voir la chose.

Tout d'abord le HTML :

<div class="redbar_left"></div>
<div class="redbar_right"></div>
<div class="redbar_bg">
     <div class="redbar_char"></div>
</div>

Les deux cotés en premier (tu verras pourquoi) puis le centre avec le corp de ton perso imbriqué dedans. redbar_bg sert a délimiter ta page et redbar_char n'est qu’un décor de ce fond (d’ailleurs tu pourrais t'épargner une div pour rien le mettre en bacgkground-image de redbar_bg non répété et aligné a droite...mettre du rouge plein sans dégradé en bacgkground-image est une perte d'efficacité, utilise background-color:#D70A09; pour ton rouge).

Ensuite le CSS :

.redbar_left {
    background: url("imgd/red_bar_left.png") no-repeat scroll left center transparent;
    float: left; /*positionnement flotant donc pas de positionnement absolute ni de droite ni de gauche, il vient se placer naturellement*/
    height: 10px; /*10 ou 11 px ? les cotés sont plus fin que le centre ?*/
    width: 83px;
}
.redbar_right {
    background: url("imgd/red_bar_right.png") no-repeat scroll right center transparent;
    float: right; /*idem mais de l'autre coté*/
    height: 10px;
    width: 83px;
}
.redbar_bg {
    background: url("imgd/red_bar_bg.png") repeat-x scroll 0 0 transparent;
    height: 10px; /*10px c'est mieux [smile] */
    margin: 0 83px; /*pas de marge en haut et en bas mais une marge égale aux dégradés a droite et a gauche*/
}
.redbar_char {
    background: url("imgd/red_bar_char.png") no-repeat scroll 0 0 transparent;
    float: right; /*étant intégré a redbar_bg il suffit d'aligner a droite*/
    height: 10px;
    /*Pas de width ici il prend naturellement toute la largeur moins les marges !*/
}

Principe de positionnement tiré de : http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html

Pour le bacgkground-image de redbar_bg ça donnerait ça :

<div class="redbar_left"></div>
<div class="redbar_right"></div>
<div class="redbar_bg"></div>

.redbar_left {
    background: url("imgd/red_bar_left.png") no-repeat scroll left center transparent;
    float: left; /*positionnement flotant donc pas de positionnement absolute ni de droite ni de gauche, il vien se placer naturellement*/
    height: 10px; /*10 ou 11 px ? les cotés sont plus fin que le centre ?*/
    width: 83px;
}
.redbar_right {
    background: url("imgd/red_bar_right.png") no-repeat scroll right center transparent;
    float: right; /*idem mais de l'autre coté*/
    height: 10px;
    width: 83px;
}
.redbar_bg {
    background:#D70A09 url("imgd/red_bar_char.png") no-repeat right top;
    height: 10px; /*10px c'est mieux [smile] */
    margin: 0 83px; /*pas de marge en haut et en bas mais une marge égale aux dégradés a droite et a gauche*/
}

Bon courage
Modifié par _laurent (17 Jul 2012 - 10:22)

hophop a écrit :
Salut,
Ce n'est pas le seul souci...regarde sous chrome.
Revoie une structure de ton header, tu peux faire la même chose en plus simple et moins découpé.

ah bon désolé, je viens de revérifié...et c'est pareil que sous FF.
Hier, ton image sortait totalement de la barre...

EDIT : Me suis trompé de post
Modifié par _laurent (18 Jul 2012 - 00:37)

_laurent a écrit :
Salut !

Je ne sais pas si tu as résolu ton problème ou pas... Au cas ou je te donne ma façon de voir la chose.

Tout d'abord le HTML :

<div class="redbar_left"></div>
<div class="redbar_right"></div>
<div class="redbar_bg">
     <div class="redbar_char"></div>
</div>

Les deux cotés en premier (tu verras pourquoi) puis le centre avec le corp de ton perso imbriqué dedans. redbar_bg sert a délimiter ta page et redbar_char n'est qu’un décor de ce fond (d’ailleurs tu pourrais t'épargner une div pour rien le mettre en bacgkground-image de redbar_bg non répété et aligné a droite...mettre du rouge plein sans dégradé en bacgkground-image est une perte d'efficacité, utilise background-color:#D70A09; pour ton rouge).

Ensuite le CSS :

.redbar_left {
    background: url("imgd/red_bar_left.png") no-repeat scroll left center transparent;
    float: left; /*positionnement flotant donc pas de positionnement absolute ni de droite ni de gauche, il vient se placer naturellement*/
    height: 10px; /*10 ou 11 px ? les cotés sont plus fin que le centre ?*/
    width: 83px;
}
.redbar_right {
    background: url("imgd/red_bar_right.png") no-repeat scroll right center transparent;
    float: right; /*idem mais de l'autre coté*/
    height: 10px;
    width: 83px;
}
.redbar_bg {
    background: url("imgd/red_bar_bg.png") repeat-x scroll 0 0 transparent;
    height: 10px; /*10px c'est mieux [smile] */
    margin: 0 83px; /*pas de marge en haut et en bas mais une marge égale aux dégradés a droite et a gauche*/
}
.redbar_char {
    background: url("imgd/red_bar_char.png") no-repeat scroll 0 0 transparent;
    float: right; /*étant intégré a redbar_bg il suffit d'aligner a droite*/
    height: 10px;
    /*Pas de width ici il prend naturellement toute la largeur moins les marges !*/
}

Principe de positionnement tiré de : http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html

Pour le bacgkground-image de redbar_bg ça donnerait ça :

<div class="redbar_left"></div>
<div class="redbar_right"></div>
<div class="redbar_bg"></div>

.redbar_left {
    background: url("imgd/red_bar_left.png") no-repeat scroll left center transparent;
    float: left; /*positionnement flotant donc pas de positionnement absolute ni de droite ni de gauche, il vien se placer naturellement*/
    height: 10px; /*10 ou 11 px ? les cotés sont plus fin que le centre ?*/
    width: 83px;
}
.redbar_right {
    background: url("imgd/red_bar_right.png") no-repeat scroll right center transparent;
    float: right; /*idem mais de l'autre coté*/
    height: 10px;
    width: 83px;
}
.redbar_bg {
    background:#D70A09 url("imgd/red_bar_char.png") no-repeat right top;
    height: 10px; /*10px c'est mieux [smile] */
    margin: 0 83px; /*pas de marge en haut et en bas mais une marge égale aux dégradés a droite et a gauche*/
}

Bon courage

Exactement ce que je recherchai, merci à toi !
J'ai même pu redécouper le tout sur les conseils de hophop pour avoir un truc plus clean.
Encore merci à vous !