Css, séparer une boite en 2, imbrication ?

Css, séparer une boite en 2, imbrication ? - HTML/CSS - Programmation

Marsh Posté le 29-09-2005 à 19:40:46    

Bonjour, je suis en train de remettre a jour un vieux site que j'avais fait pour l'ecole de ma soeur.  
 
(http://www.ac-nancy-metz.fr/IA54/site/moutrot/)  oui je sais c moche, il y a des frames etc.. c pour ca que je le remet a jour ;)
 
site en reconstruction :
http://stephane-l.club.fr/ecole/default.php
 
Donc mon choix pour la mise en page s'est penché sur le css, pour l'instant je m'occupe de la construction sans me soucier du design (choix des couleurs etc...)
mais j'ai un petit probleme avec la gestion des boites, je voulais séparer l'une d'elle en 2 (pour avoir une zone d'affichage texte a gauche et des images a droite)
mais j'y arrives pas...
 
(la page dont je parle : http://stephane-l.club.fr/ecole/dossier/village.php )
 
J'ai essayé de faire 2 div :
 
#gauche {
width: 400px;
}
 
#droite {
margin-left: 400px;
width: 275px;
}
 
mais dans ce cas ca me fout les images  a droite certe, mais en dessous du texte, les boites se superposent pas
alors pour resoudre le probleme j'ai fait ca :
 
#separateur {
position: static;
}
 
#gauche {
position: absolute;
width: 400px;
}
 
#droite {
position: absolute;
margin-left: 400px;
width: 275px;
}
 
et j'imbrique gauche (ou droite) dans separateur, alors ca marche mais sans que je comprenne pourquoi ca sort de mon cadre affichage...
 
 
Donc bref je comprends pas trop, si vous savez ce qu'il faut que je fasse :)


Message édité par korxx le 29-09-2005 à 20:20:33
Reply

Marsh Posté le 29-09-2005 à 19:40:46   

Reply

Marsh Posté le 29-09-2005 à 21:49:02    

Met un float: left sur la #gauche

Reply

Marsh Posté le 29-09-2005 à 22:03:41    

FlorentG a écrit :

Met un float: left sur la #gauche


 
 
 :love:  :love:  :love:  
 
Merci beaucoup :)
 
J'avais essayé un float:right sur l'autre ca marchait pas :D
 
Bon ben ca marche et c'est en ligne, décidemment FlorentG je te serais redevable, tu m'a bien aidé, autant sur ce site, que sur le mien, un grand merci  :jap:


Message édité par korxx le 29-09-2005 à 22:07:18
Reply

Marsh Posté le 29-09-2005 à 22:07:03    

Pour que le float right fonctionne, il faut mettre le #droite avant le #gauche dans le code HTML :)

Reply

Marsh Posté le 29-09-2005 à 22:08:29    

FlorentG a écrit :

Pour que le float right fonctionne, il faut mettre le #droite avant le #gauche dans le code HTML :)


 
 
Ok, c'est noté :)
 
Effectivement je mettais dans le code html d'abord le gauche puis le droite et ca marchait pas  :sweat:  
 
Je comprends mieux maintenant  :jap:

Reply

Marsh Posté le 29-09-2005 à 22:10:23    

aie ca marche sous firefox mais sous ie ca bug, ca decale encore en bas :(
 
C'est normal ?

Reply

Marsh Posté le 29-09-2005 à 23:12:49    

Oui. Enfin non, c'est un bug d'IE... Réduit un peu en largeur #droite


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

Marsh Posté le 30-09-2005 à 02:23:42    

gm_superstar a écrit :

Oui. Enfin non, c'est un bug d'IE... Réduit un peu en largeur #droite


 
 
Ah merci bcp pour cette astuce :)  
 
Pas evident de s'accomoder aux bugs quand on debute en css, on pense d'abord qu'on a fait une erreur quelque part :)
 
Ca fonctionne parfaitement sous ie et firefox  :jap:

Reply

Sujets relatifs:

Leave a Replay

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