[CSS] mise en page !!RESOLU!!

mise en page !!RESOLU!! [CSS] - HTML/CSS - Programmation

Marsh Posté le 17-03-2004 à 00:20:22    

Hooo joie Hooo bonheur insondable,  
me voici a devoir refaire completement le design de mon site ...
 
et quand je dit completememnt, c'est completement ...
 
le povre... il était même pas fini ...
 
et biensur j'ai besoin de votre aide  parce que la je suis surement trop fatigue, mais je trouve plus rien ...
 
voilà ce que ca doit donner
http://www.swissclub.ch/rouge2.jpg
 
et voilà ce que j'ai pour le moment :
http://www.swissclub.ch/
 
bon A est fixe en largeur mais mobile en longueur (ARBRE)
B est toujours en haut fixe en hauteur et largeur
C est toujours en bas fixe en hauteur et largeur
D n'est pas fixe ni en hauteur ni en largeur (CONTENU)
B est toujours en haut fixe en hauteur et largeur
C est toujours en bas fixe en hauteur et largeur
E est toujours en haut fixe en hauteur et largeur
F est toujours en bas fixe en hauteur et largeur
 
j'ai essayer plein plein de variante ...
je suis epuiser ... :cry:  
Please Help me !!!


Message édité par Lorr Hyde le 19-03-2004 à 16:12:39

---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 17-03-2004 à 00:20:22   

Reply

Marsh Posté le 17-03-2004 à 00:34:43    

2 divs, le premier contient A (div1), le second B C D E F (div2)
 
div1 est floaté à gauche
div2 a une marge à gauche de la taille de div1
div2 est en position relative pour établir un nouveau repère pour B C E F
div2 a un padding gauche de la taille de B, droit de la taille de E
 
B, C, E, F sont dans div2, en position: absolute  
B = top: 0, left: 0;
F = bottom: 0; right: 0;
 
//
 
Ton design m'a l'air bien compliqué. Tu vas rentrer quoi dedans ?


Message édité par youdontcare le 17-03-2004 à 00:36:28
Reply

Marsh Posté le 17-03-2004 à 12:53:27    

youdontcare a écrit :

2 divs, le premier contient A (div1), le second B C D E F (div2)
 
div1 est floaté à gauche
div2 a une marge à gauche de la taille de div1
div2 est en position relative pour établir un nouveau repère pour B C E F
div2 a un padding gauche de la taille de B, droit de la taille de E
 
B, C, E, F sont dans div2, en position: absolute  
B = top: 0, left: 0;
F = bottom: 0; right: 0;
 
//
 
Ton design m'a l'air bien compliqué. Tu vas rentrer quoi dedans ?


bon c'est déja beaucoup beaucoup mieux merci mille fois.
 
j'ai encore un problème ... lorsque le div 1 est plus grand que le DIV 2, j'aimerais que le div 2 prennent la taille max qu'il peut ... c a dire la taille du div 1
 
là il est forcer a 100% pour voir ce que ca done, mais il devrait etre 'dynamique'.
et biensur le 100% dans la taille n'est pas interpreter de la meme magnère avec mozilla , opera et explorer ..
 
une idee ?


Message édité par Lorr Hyde le 17-03-2004 à 13:05:55

---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 17-03-2004 à 13:15:46    

Reply

Marsh Posté le 17-03-2004 à 13:25:37    


heu ... là ca tape a coter de la question,
j'utilise déjà ce Hack pour la mise en page ...
 
mais comme je ne sais ni la hauteur du DIV 1 ni du DIV 2 .. c plus compliquer


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 17-03-2004 à 13:28:56    

He ben aucune idée alors.

Reply

Marsh Posté le 17-03-2004 à 13:37:22    

Lorr Hyde a écrit :


heu ... là ca tape a coter de la question,
j'utilise déjà ce Hack pour la mise en page ...
 
mais comme je ne sais ni la hauteur du DIV 1 ni du DIV 2 .. c plus compliquer


 
Pas possible avec des divs, et dans ton cas, utiliser un seul tableau sera bcp plus simple. Les tableaux, c'est mal, sauf quand on peut pas faire autrement.

Reply

Marsh Posté le 17-03-2004 à 16:19:18    

hermes le messager a écrit :


 
Pas possible avec des divs, et dans ton cas, utiliser un seul tableau sera bcp plus simple. Les tableaux, c'est mal, sauf quand on peut pas faire autrement.


allons allons, quelqun a surement une meilleur solution que ..... ça ... :lol:


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 17-03-2004 à 16:32:11    

oui, y a moyen. Mais je voudrais d'abord une précision: Quand tu Dis que D est de largeur variable, cela veut dire que ton design est capable de s'étirer en largeur? je parle entre autre des bordure du haut et du bas.
 
Autre question: B, C, E et F, ce ne sont que des images?

Reply

Marsh Posté le 17-03-2004 à 20:33:54    

gizmo a écrit :

oui, y a moyen. Mais je voudrais d'abord une précision: Quand tu Dis que D est de largeur variable, cela veut dire que ton design est capable de s'étirer en largeur? je parle entre autre des bordure du haut et du bas.
 
Autre question: B, C, E et F, ce ne sont que des images?


 
exact le design s'adapte à la taille de l'ecran ... dans une certaine mesure ...
test en diminuant la fenêtre de ton navigateur.
BCEF sont effectivement que des images.


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 17-03-2004 à 20:33:54   

Reply

Marsh Posté le 17-03-2004 à 22:29:07    

Et la hauteur du total est de 100% du navigateur ? Ou c'est pas grave et on peut avoir une bande inoccupée si les contenu de A et D sont insuffisant ?

Reply

Marsh Posté le 17-03-2004 à 22:34:58    

hermes le messager a écrit :

Et la hauteur du total est de 100% du navigateur ? Ou c'est pas grave et on peut avoir une bande inoccupée si les contenu de A et D sont insuffisant ?


on peu avoir une bande inocupée !


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 17-03-2004 à 22:50:08    

Lorr Hyde a écrit :


on peu avoir une bande inocupée !
 


 
Ah, alors dans ce cas, ça doit être presque faisable... Mais il va falloir tricher comme un fou pour BCEF [:spamafote] , style avec des placements négatifs par rapport au bas pour C et F.  
 
Bref, ça va être tellement lourdeau au final que je ne vois pas l'intérêt d'utiliser des divs dans un cas comme celui-là... M'enfin, chacun fait comme il veut...
 

Reply

Marsh Posté le 17-03-2004 à 23:53:53    

hermes le messager a écrit :


 
Ah, alors dans ce cas, ça doit être presque faisable... Mais il va falloir tricher comme un fou pour BCEF [:spamafote] , style avec des placements négatifs par rapport au bas pour C et F.  
 
Bref, ça va être tellement lourdeau au final que je ne vois pas l'intérêt d'utiliser des divs dans un cas comme celui-là... M'enfin, chacun fait comme il veut...
 
 


Bon ... apres des heures de recherche ... des conseil de droite et de gauche et de multiple exemple qui ne fonctionne pas,
 
je vais faire modifier un peu le design ...
et voilà ...
 
solution peu ragoutante et partiqulièrement enervante ... [:lorr hyde]


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 17-03-2004 à 23:58:29    

Demain, je me penche sur ton problème.

Reply

Marsh Posté le 18-03-2004 à 07:33:57    

Lorr Hyde a écrit :


 
 
je vais faire modifier un peu le design ...
 


 
Ben je suis désolé, mais ça, c'est vraiment ridicule. Modifier le design qu'on a prévu sous prétexte de vouloir utiliser des divs uniquement, c'est très bête. Les div ne sont pas là pour empêcher de faire quoi que ce soit, mais au contraire pour permettre des choses qu'on ne peut pas faire sans.
 
Quand on peut tout faire avec des divs, on le fait, et quand on peut pas, on fait avec une table. C'est à cause de comportement comme le tien qu'on entend des gens se plaindre en disant : Ah ouai, mais faire du code valide empêche de faire plein de trucs, ou les mises en page sont moche et patati patata...  Ben non pas du tout.

Reply

Marsh Posté le 18-03-2004 à 12:35:43    

Bon, alors, je me suis penché sur le problème 15 minutes et j'ai trouvé une solution élégante avec des div. Comme quoi Hermès, les tableaux ne sont à utiliser qu'en dernier recours ;)
 
La solution:
 
- Inclus les images de B et E dans les images de ton header (une partie à gauche et une autre à droite, comme dans ton découpage actuel)
- Augmente la hauteur du header pour avoir les images de B et E
- Crée un div "middle" qui contiendra A et D. Ce middle a une position relative et une valeur de top négative égale à la hauteur de B (et E)
- A est un simple float
- D est un simple div avec une marge à gauche suffisante pour laisser la place à A et l'image B et une marge à droite suffisante pour voir l'image E
- Inclus les images C et F dans ton footer, comme pour le header.
- Englobe ton footer d'un div qui est en position relative avec un top négatif qui vaut le cumul de B et C et qui dispose d'un clear:left.
 
Au final, on a rajouté deux div qui ont quand même un sens (corps et pied-de-page) et on a retiré 4 div qui ne contenaient que des images.

Reply

Marsh Posté le 19-03-2004 à 15:47:32    

gizmo a écrit :

Bon, alors, je me suis penché sur le problème 15 minutes et j'ai trouvé une solution élégante avec des div. Comme quoi Hermès, les tableaux ne sont à utiliser qu'en dernier recours ;)
 
La solution:
 
- Inclus les images de B et E dans les images de ton header (une partie à gauche et une autre à droite, comme dans ton découpage actuel)
- Augmente la hauteur du header pour avoir les images de B et E
- Crée un div "middle" qui contiendra A et D. Ce middle a une position relative et une valeur de top négative égale à la hauteur de B (et E)
- A est un simple float
- D est un simple div avec une marge à gauche suffisante pour laisser la place à A et l'image B et une marge à droite suffisante pour voir l'image E
- Inclus les images C et F dans ton footer, comme pour le header.
- Englobe ton footer d'un div qui est en position relative avec un top négatif qui vaut le cumul de B et C et qui dispose d'un clear:left.
 
Au final, on a rajouté deux div qui ont quand même un sens (corps et pied-de-page) et on a retiré 4 div qui ne contenaient que des images.


 
Alors merci beaucoup ...
bon j'ai pas tout à fait utiliser ta technique, mais j'y suis arriver ...
 
Je suis bien d'accord avec toi en ce qui concerne ton e-mail plus haut, j'ai dit que je voulait changer de design , mais c'était un mouvement d'humeur du à la fatigue.
 
je suis content ... merci a tous ...


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed