[CSS] experts bienvenus :)

experts bienvenus :) [CSS] - HTML/CSS - Programmation

Marsh Posté le 16-12-2003 à 16:08:53    

hello
comme d'hab je ramène mes problèmes CSS récurrents :D
 
 
enfin voila ce que j'aimerais faire (et qui marche presque):
 
 
une page avec cette tronche la:
 


----------------------------------------------
|                haut                        |
|                                            |
----------------------------------------------
|         |                                  |
|         |                                  |
|         |                                  |
|         |                                  |
|         |                                  |
|  gauche |          droit                   |
|         |                                  |
|         |                                  |
|         |                                  |
|         |                                  |
|         |                                  |
|--------------------------------------------|
|             bas                            |
----------------------------------------------


 
j'ai pensé au plus simple:
 
1 div du haut,
1 div du centre,
1 div du bas
 
 
le div du centre =  
1 div de gauche,
1 div de droite
 
 
en gros:
 
.haut {heigth:150px;width:100%;}
.centre {width:100%;}
.gauche {width:200px;}
.droite {width:100%;}
.bas {height: 100px;width:100%;}
 
 
 
premier probleme: droite se place SOUS gauche,
 
je mets donc un  
 
 float:left;
 
dans mon gauche et donc le droite se place bien à droite de gauche,
MAIS
le droite, vu qu'il a bcp plus de contenu que gauche du coupe entoure gauche presque, disons qu'il entoure gauche en passant par en bas de gauche aussi,
 
alors je me dis: bin je mets 100% dans le height de gauche : CA MARCHE PAS, je mets 100% dans le height de gauche ET dans le height de centre: CA MARCHE PAS car il fout du coup le .bas meme pas dans la page, il me rajoute une scrollbar débile;
 
 
donc voila, si kelkun trouve kelle peut etre mon erreur, en gardant ce mécanisme de page, ça m'arrangerait carrément; s'ils vous plait, ne postez pas de trucs genre "FAIS UN TABLEAU" paske je sais que je peux le faire et que ca va etre simple, seuelment j'aime pas les tableaux, je voudrais le faire avec des div, je suis à un poil que ça marche, je veux pas tout casser pour une ligne de css que j'ignore pour l'instant, et qu'un éclairé m'apprendra dans ce post et je l'en remercierai infiniment :D

Reply

Marsh Posté le 16-12-2003 à 16:08:53   

Reply

Marsh Posté le 16-12-2003 à 16:42:13    

un ptit conseil : met un titre plus explicite si tu veux + de reponses  :)


---------------
yvele n'est plus.
Reply

Marsh Posté le 16-12-2003 à 16:43:11    

yeah :)
bin
c pas tres clair dans ma tete :/
 
 
mais ! j'ai trouvé un tutorial de la mort qui explique exactement ce que je voulais faire et qui en donne la solution !!
 
 
http://css.maxdesign.com.au/floatu [...] al0816.htm
 
coolax !

Reply

Marsh Posté le 16-12-2003 à 16:47:45    

Reply

Marsh Posté le 16-12-2003 à 17:16:32    

yeah en gros c ça, mais le seul désavantage c que ça résoud pas mon probleme car il faut fixer la hauteur dans le tien, faute de quoi, le contenu de droite rentrera dans la zone gauche chose non souhaitée :/

Reply

Marsh Posté le 16-12-2003 à 17:58:20    

et si tu fixais la largeur de droite ?


Message édité par Mjules le 16-12-2003 à 17:58:27
Reply

Marsh Posté le 16-12-2003 à 19:09:29    

bin je peux pas paske le site doit être resizable
et pas question de mettre du JS pour replacer les éléments :D


---------------
mangez du mozilla c le futur, c votre DESTIN ! http://www.mozilla.org/releases/
Reply

Marsh Posté le 16-12-2003 à 19:40:39    

* Le {width:100%;} de .droite me choque.
Essaie avec {width:auto;}
 
Edit / Je propose:

Code :
  1. #haut {heigth:150px; width:100%;}
  2. #centre {width:100%;}
  3. #gauche {width:200px; float:left;}
  4. #droite {left:200px; width:auto;}
  5. #bas {height:100px; width:100%;}


 
(je pense que des id sont + logiques que des class ici)


Message édité par ACut le 16-12-2003 à 20:24:40
Reply

Marsh Posté le 16-12-2003 à 20:28:47    

ACut a écrit :

* Le {width:100%;} de .droite me choque.
Essaie avec {width:auto;}
 
Edit / Je propose:

Code :
  1. #haut {heigth:150px; width:100%;}
  2. #centre {width:100%;}
  3. #gauche {width:200px; float:left;}
  4. #droite {left:200px; width:auto;}
  5. #bas {height:100px; width:100%;}


 
(je pense que des id sont + logiques que des class ici)


 
c koi la dif entre auto et 100% pour un width ? :??:

Reply

Marsh Posté le 16-12-2003 à 20:33:50    

NB.1: L'attribut left suppose que position soit non static dans #droite (faut pê ajouter position:relative)
 
NB.2: On pourrait p-ê passer par margin-left pour #droite mais je crois que c'est casse-gueule à cause du modèle d'emboîtement propre à IE5 (différent du standard) qui bousille tous les calculs de width qd y a des margins et/ou des paddings...

Reply

Marsh Posté le 16-12-2003 à 20:33:50   

Reply

Marsh Posté le 16-12-2003 à 20:41:58    

ACut a écrit :

* Le {width:100%;} de .droite me choque.


Aussi :jap:

ACut a écrit :

Essaie avec {width:auto;}


Bof, ça ne changera rien.

ACut a écrit :


Edit / Je propose:

Code :
  1. #haut {heigth:150px; width:100%;}
  2. #centre {width:100%;}
  3. #gauche {width:200px; float:left;}
  4. #droite {left:200px; width:auto;}
  5. #bas {height:100px; width:100%;}


 
(je pense que des id sont + logiques que des class ici)


 
Et moi je propose :
 


#haut {
  height: 150px;
}
 
#gauche {
  float: left;
  width: 200px;
}
 
#droite {
  margin-left: 200px;
}
 
#bas {
  height: 100px;
}


 
Bref, on vire tous les "width: 100%" qui sont les valeurs par défaut lorsque un bloc est en posiion statique.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 16-12-2003 à 21:52:59    

Joulpouille a écrit :


c koi la dif entre auto et 100% pour un width ? :??:


100% = "100% du bloc parent"
auto = "le navigateur se démerde"


---------------
NOUVEAU! Le guide de l'édition en version ebook : http://marcautret.free.fr/autret/150q-ebook/
Reply

Marsh Posté le 16-12-2003 à 22:09:17    

ACut a écrit :


auto = "le navigateur se démerde"


Heu non il se démerde pas, il applique certaines règles : http://www.yoyodesign.org/doc/w3c/css2/visudet.html#q6


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Sujets relatifs:

Leave a Replay

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