[CSS] Design extensible

Sujet résolu

21 février 2006 à 14:56:12

Bonjour.

J'aimerais faire un designe extensible. Par contre, je ne suis pas sur de m'y prendre comme il faut. J'ai fait un petit schéma, ça vaut mieux qu'un long discours

Je pensais faire un div de width 100% (le fond noir qu'on devine) Puis faire un div à gauche (le vert) un div à droite (le bleu) et un div central qui prendrait la place qu'il reste (le violet)

La hauteur est fixe. Le div global n'a pas de particularité. Les div de gauche et droite ont des backgrounds fixes. Le div du fond a un background qui se répète horizontalement.

Ca c'est l'idée de base. Mais, impossible de trouver comment dire à celui du milieu de prendre autant de place qu'il le peut, mais sans embêter ses camarades.

Je suis à 2 doigts de replonger vers les tableaux... Aidez-moi !!! Ne me laissez pas faire cette erreur

Merci pour votre aide.

Payday

21 février 2006 à 15:03:33

Eh bien si tu dis à celui de gauche apr exemple 30 %, à droite, 20 % alors au milieu tu mets 50 %...

Shughuy

21 février 2006 à 15:05:02

Dans l'absolu ce serait idéal, mais le cadre de gauche et celui de droite doivent avoir une largeur fixe !! Quelque soit la largeur de l'écran. Je ne peux donc pas l'exprimer en %. Seulement en taille fixe.

Merci.

Payday

21 février 2006 à 15:07:16

Aie, bon j'aurais peut etre une solution en PHP

Tu sais codé un peu ?

Shughuy

21 février 2006 à 15:08:51

Oui. Au niveau Php, ça ne me pose aucun problème.

Payday

21 février 2006 à 15:11:10

Bon alors je t'explique vite fait ce que je pense.

Tu récupères la taille du navigateur du visiteur : $taille_navigateur
Tes 2 cadres : $cadre_gauche = 55 & $cadre_droite = 45

Donc
$taille_cadre_milieu = $taille_navigateur - ($cadre_gauche + $cadre_droite);

et voilà

Shughuy

21 février 2006 à 15:17:15

L'idée est bonne.
A part que c'est du JavaScript qu'il faut utiliser il me semble et pas du PhP.
Mais je préfèrerais un truc plus 'basique', 100% CSS quoi

Merci de ton aide.

Zazou

21 février 2006 à 15:25:44

Bah logiquement, en donnant à ton global une taille de 100%, une taille fixe à tes menu et pas de taille au corps, le corps prend la place qui reste en toute logique maintenant le CSS est-il logique lol ?

Shughuy

21 février 2006 à 15:41:30

Je pensais aussi...

Bon, je vous mets mon code HTML :

Et le CSS :

#menu {
width:100%;
z-index:1 ;
}

#menu_left {
background-image:url("../images/middle_left_menu.png") ;
background-repeat: no-repeat ;
height:150px;
width:100px;
z-index:3;
}

#menu_corps {
background-image:url("../images/fond_menu.png") ;
background-repeat: repeat-x ;
height:150px;
z-index:3;
}

#menu_right {
background-image:url("../images/middle_right_menu.png") ;
background-repeat: no-repeat ;
height:150px;
width:100px;
z-index:3;
}

Là, j'ai les 3 div qui se mettent les uns en dessous des autres.
Si je mets float:left à gauche, celui du centre remonte et se met comme il faut (Cool)
Alors, je mets float:left à celui du centre et pouf, il ne fait plus rien en largeur. Bref, je tourne en rond... Argh...

jp949

21 février 2006 à 15:58:05

tu mets le global width:100% le menu de droite en float:right le menu de gauche en float:left le centre margin:auto sans fixer de largeur

Zazou

21 février 2006 à 15:59:43

Fais un truc du genre

Pour le html, change tes id en class déjà pour menu_blabla

Ensuite

pour le css tu fais

#menu {
width: 100%;
height: la taille que tu veux,
}

.menu_left {
width: la taille que tu veux;
float: left;
}

.menu_right
widht: la taille que tu veux;
float: right;

jp949

21 février 2006 à 16:11:37

comment faire afficher 1div de 100% + 2 div sans depasser 100% ? Ca me rappelle l'histoire des 4 tiers: beh, ca depend de la grandeur des tiers pardi, grand sot!

Shughuy

21 février 2006 à 16:17:06

@jp949 : Ca ne marche pas. Le div du centre va jusqu'au bout à droite. Et le div de droite se colle bien à droite, mais en-dessous

Ceci dit, j'ai persévéré et je me suis servi de ce que vous m'aviez dit.
Voilà mon CSS désormais :

#menu {
margin : 0px ;
padding: 0px ;
background-image:url("../images/fond_menu.png") ;
background-repeat: repeat-x ;
width:100%;
height:150px;
z-index:1 ;
}

#menu_left {
float:left;
background-image:url("../images/middle_left_menu.png") ;
background-repeat: no-repeat ;
height:150px;
width:100px;
z-index:3;
}

#menu_corps {
margin:0px 110px 0px 110px;
height:150px;
}

#menu_right {
float:right;
margin-top:-150px;
background-image:url("../images/middle_right_menu.png") ;
background-repeat: no-repeat ;
height:150px;
width:100px;
z-index:3;
}

Et ça fonctionne !!!
J'ai mis des margin left et right au div du centre et ça passe. Par la même occasion, j'ai mis le background dans le div global...
Apparemment, ça passe.

Merci pour votre aide.

Je reste ouvert à toutes remarques concernant le sujet

jp949

21 février 2006 à 16:20:17

tu vois c'etait pas dur suffisai d'y penser

Shughuy

21 février 2006 à 16:21:20

Vi, il suffisait d'y penser.
J'y serais peut-être arrivé seul, mais l'émulsion ça aide.
Et puis ça pourra servir à quelqu'un d'autre.

Je m'en vais marquer le topic résolu.

Encore merci.