bonne syntaxe CSS pour une page

bonne syntaxe CSS pour une page - HTML/CSS - Programmation

Marsh Posté le 12-07-2005 à 16:05:37    

hello,
 
je souhaite faire une page sur le modèle suivant :
 
"top" qui prend la largeur de la page;
 
une partie "content" consituée de deux divs :
   la div de gauche "main" s'étire pour prendre l'espace dispo
   la div "sidebar" est de largeur fixe
je veux que les deux divs "main" et "sidebar" s'étirent toutes deux verticalement (si "main" est plus longue que  "sidebar", je veux que "sidebar" soit aussi haute que "main" et inversement, et que la div "content" s'étire sur la hauteur de la page jusqu'à la div "footer"
 
enfin une div "footer" alignée en bas de la page qui prend la largeur de la page, juste en dessous de la partie "content".
 
Et enfin, je veux que ça marche aussi sur IE.
 
Donc mon truc (d'après moi) donne dans le code de la page :

Code :
  1. <div id="page">
  2. <div id="top">
  3. </div>
  4. <div id="content">
  5.  <div id="main">
  6.  </div>
  7.  <div id="sidebar">
  8.  </div>
  9. </div>
  10. <div id="footer">
  11. </div>
  12. </div>


 
Ma question est la suivante :
 
Que dois-je mettre dans la CSS pour que ça marche sur IE ?
Le point important est que la div "sidebar" doit avoir une largeur fixe, alors que la div "main" doit prendre la place disponible.
J'ai ça comme point de départ :

Code :
  1. #page {
  2. }
  3. #top {
  4. width: 100%;
  5. }
  6. #content {
  7. width: 100%;
  8. height: 100%;
  9. }
  10. #main {
  11. float: left;
  12. width: ???;
  13. height: 100%;
  14. }
  15. #sidebar {
  16. width: 200px;
  17. height: 100%;
  18. }
  19. #footer {
  20. clear: both;
  21. width: 100%;
  22. }

Je ne sais pas trop quoi mettre pour que ça s'affiche correctement. Si quelqu'un a quelques minutes à m'accorder pour m'expliquer comment faire, je lui en serai reconnaissant.


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 16:05:37   

Reply

Marsh Posté le 12-07-2005 à 16:06:36    

Met une margin-right sur le #main, égal à la largeur de ta sidebar (en rajoutant genre 5-10 pixels pour être sûr que ça passe bien)

Reply

Marsh Posté le 12-07-2005 à 16:21:53    

Je n'arrive pas à grand chose...
 
http://www.effisk.net/misc/hfr/test/test.html


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 16:22:15    

la css est là :
 
http://www.effisk.net/misc/hfr/test/style.css


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 16:30:27    

FlorentG a écrit :

Met une margin-right sur le #main, égal à la largeur de ta sidebar (en rajoutant genre 5-10 pixels pour être sûr que ça passe bien)

ça ne passe pas.


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 18:19:33    

ptin mais pourquoi ya des flottants de partout [:mlc]
 
Commençons simple;
 
1- ton id "top" ne veut rien dire, change le (header?)
2- Idem pour la sidebar, elle correspond à quoi exactement, sémantiquement?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 12-07-2005 à 18:37:24    

masklinn a écrit :

2- Idem pour la sidebar, elle correspond à quoi exactement, sémantiquement?

la sidebar c'est un peu de tout, des liens. Il y a des rubriques, une barre de recherche, des liens, un shoutbox, ce genre de trucs...
 
J'ai changé "top" pour "header".
 
Pour les float de partout, je fais mes tests sur les liens que j'ai donné au-dessus, à un moment on pouvait même voir des tables et des cellules  :D  
Si je ne trouve pas de solution propre en CSS, je vais me rabattre sur les bonnes vieilles tables... :/


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 18:43:46    

solution la plus simple:
 

  • Dégage tous les floats
  • Dégage les "display: bock" qui ne veulent rien dire, et qui même s'ils étaient correctement orthographiés n'auraient aucun intérêt
  • Dégage tout le styling de #content et ajoute une règle unique: "position: relative;"
  • margin-right: 210px sur #main
  • position: absolute; top: 0; right: 0; sur #sidebar
  • En option, margin-right: 210px sur le footer


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 12-07-2005 à 18:55:50    

masklinn a écrit :

  • Dégage les "display: bock" qui ne veulent rien dire, et qui même s'ils étaient correctement orthographiés n'auraient aucun intérêt

bon bon, tout le monde a le droit à sa faute de frappe non ?  :sweat:  


ce que tu me donnes a le mérite de pas mal nettoyer ma css (merci), mais j'ai toujours mon souci :
 
je veux aligner le footer sur le bas de la cellule, et je ne ne veux pas que le footer puisse remonter au-delà du bas de la sidebar, c'est pour ça que je ne peux pas utiliser position: absolute; pour la sidebar a priori.


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 18:57:42    

je suppose que je ne t'apprends rien (ça servira toujours aux autres qui lisent et qui ne savent pas) mais le fait de positionner la sidebar en absolute fait qu'elle n'est pas contenue dans "content"


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 18:57:42   

Reply

Marsh Posté le 12-07-2005 à 18:59:37    

Il n'y a pas d'attribut qui permette d'attribuer à une div tout l'espace restant (vertical ou horizontal) dans la fenêtre ?


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 19:02:20    

Sauf que c'est techniquement pas faisable au vu de l'organisation de ta page en gardant un #main flexible [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 12-07-2005 à 19:02:37    

mmmh. Peut-être en mettant la sidebar DANS "main" ?


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 19:03:51    

en la mettant avant #main dans #content


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 12-07-2005 à 19:12:09    

masklinn a écrit :

en la mettant avant #main dans #content

huhuhu.
 
En fait c'est de là que tout est parti.
 
C'était à l'origine avant #main dans #content, mais pour une meilleure lisibilité j'ai préféré passer #main avant #sidebar dans le code de la page (#main est accessible tout de suite, et on ne retrouve #sidebar qu'après avoir vu #main).
 
Voilà voilà...  
 
je suis obligé de revenir à mopn point de départ ? :cry:


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 12-07-2005 à 19:44:53    

ca sent le thème dot clear :D
 
as-tu fait un clear:both sur le footer ? (oui je sais c'est bizarre, mais dans mes thèmes dotclear, ca fonctionne ^^')
 
(www.roane-irkana.net)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 12-07-2005 à 20:00:07    

plainsofpain a écrit :

ca sent le thème dot clear :D
 
as-tu fait un clear:both sur le footer ? (oui je sais c'est bizarre, mais dans mes thèmes dotclear, ca fonctionne ^^')
 
(www.roane-irkana.net)


Arrête de spammer avec ton blog pourri :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 12-07-2005 à 20:08:29    

masklinn a écrit :

Arrête de spammer avec ton blog pourri :o


 
J'ai jamais dit qu'il l'était pas  :D


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 12-07-2005 à 20:47:04    

plainsofpain a écrit :

ca sent le thème dot clear :D

:)  
 

plainsofpain a écrit :

as-tu fait un clear:both sur le footer ?

oui j'ai ça et ça ne fonctionne pas. Je vais devoir revenir à mon point de départ et inverser #main et #sidebar comme le suggère masklinn
 
faich'


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 13-07-2005 à 09:42:36    

masklinn a écrit :

solution la plus simple:
 

  • Dégage les "display: bock" qui ne veulent rien dire, et qui même s'ils étaient correctement orthographiés n'auraient aucun intérêt


display: bock fait partie des CSS4, Kronenbourg edition [:dawa]
 
 
Avec display: block :
 
http://img331.imageshack.us/img331/9550/block8gc.png
 
Avec display: bock :
 
http://img331.imageshack.us/img331/4855/bock3bs.jpg
 
[:dawa]

Reply

Marsh Posté le 13-07-2005 à 09:51:04    

FlorentG a écrit :

display: bock fait partie des CSS4, Kronenbourg edition [:dawa]
 
 
Avec display: block :
 
http://img331.imageshack.us/img331/9550/block8gc.png
 
Avec display: bock :
 
http://img331.imageshack.us/img331/4855/bock3bs.jpg
 
[:dawa]


http://masklinnscans.free.fr/4chan/ok.jpg


Message édité par masklinn le 13-07-2005 à 09:53:35

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-07-2005 à 10:02:10    

http://masklinnscans.free.fr/fag.jpg
 
et merci pour callonme, je l'avais perdu et je le retrouvais plus  :love:  


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 13-07-2005 à 10:04:17    

effisk a écrit :

http://masklinnscans.free.fr/fag.jpg
 
et merci pour callonme, je l'avais perdu et je le retrouvais plus  :love:


http://masklinnscans.free.fr/4chan/FU_00.jpg


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-07-2005 à 10:56:58    

[hs]
marrant ça : http://sexystandards.skyblog.com/
[/hs]


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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