Votre question

[css, html] problème de code css et de mise en page html [résolu]

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
28 Mars 2009 00:44:09

salut à tous.

j'ai un petit soucis. depuis peu, comme j'arrivai pas à m'en sortir avec une mise en page de site, j'ai été prendre un layout css sur le net, et quand j'ai regardé le code css, ô surprise : le bazar total !! j'ai donc commencé par l'adapter le plus grossièrement possible, mais ayant en permanence une marge gauche et droite imposée au corps de ma page, je me suis amusé à virer tout ce qui était de trop dans le code css, afin de mieux le comprendre.

Chose faite, et je le comprend mieux, mais "mieux" c'est pas "bien"...

Donc je me suis permis d'ouvrir ce sujet pour demander de l'aide, car je sèche un peu là...

Voici le code CSS qui reste :
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
  2. {margin:0;padding:0;}
  3. #yui-main
  4. .yui-b
  5. {position:static;}
  6. #yui-main
  7. {width:100%;}
  8. .yui-t4
  9. #yui-main,.yui-t5
  10. #yui-main,.yui-t6
  11. #yui-main
  12. {float:left;margin-right:-25em;}
  13.  
  14. .yui-t4
  15. #yui-main
  16. .yui-b
  17. {margin-right:150px;}
  18. .yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc
  19. .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u
  20. {float:left;}
  21. .yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g
  22. .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first
  23. {float:left;}
  24. .yui-u
  25. {width:82%;}
  26.  
  27. #bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after
  28. {content:".";display:block;height:0;clear:both;visibility:hidden;}



et le code html

  1. <html>
  2. <head>
  3. <title> titre de ma page</title>
  4.  
  5. <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
  6.  
  7. </head>
  8. <body bgcolor="black">
  9. <div id="doc3" class="yui-t4">
  10. <div id="hd" style="height:68px;">
  11. en-tête
  12. </div>
  13. <div id="bd">
  14. <div id="yui-main">
  15. <div class="yui-b">
  16. <div class="yui-gf">
  17. <div class="yui-u first" style="width:150px;">
  18. menu de gauche
  19. </div>
  20. <div class="yui-u" style="background-color: black; color: white;" width="100%">
  21.  
  22. corps du document qui commence a 150px du bord de gauche
  23. mais qui fait 82% :s (la taille du yui-u du fichier css)
  24. et qui saute à la ligne en dessous des menus quand on réduit
  25. la taille de la page par la souris (resize)
  26.  
  27. je veux qu'il commence à 150px du bord gauche effectivement
  28. mais qu'il s'arrête à 150px du bord de droite... et qu'on puisse
  29. le réduire en taille à volonté sans que la mise en page ne bouge...
  30.  
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="yui-b" align="right">
  36. menu de droite
  37. </div>
  38. </div>
  39. <div id="ft">
  40. pied de page
  41. </div>
  42. </div>
  43. </body>
  44. </html>


voilà si quelqun pouvait me venir en aide ce serait vraiment cool, parce que je comprend pas vraiment le principe de ce code css là... j'entrave rien. d'habitude oui mais là nan...

Autres pages sur : css html probleme code css mise page html resolu

28 Mars 2009 10:19:17

Tu peux réduire la taille de ta div pour qu'elle ne dépasse pas l'endroit que tu désire
tu utilises width pour la taille en longueur (en px ou en % c'est les + simple)
et height pour la hauteur

ex: .yui-b{ width: 60%
height: 30%}

bien que ne soit pas obligé de lui donner un height c'est seulement au besoin.

tu imagines ta page qui fait 100%
tu veux garder un menu à doite et un à gauche de la même taille par ex..pas difficile tu donne un width de 20%(droite) un 60%(centre) et 20%(gauche)...20+60+20=100%

tu joues comme ça partout, comme tu veux, sur n'importe quel div id ou class(#ou.)...voilà
28 Mars 2009 19:09:14

nan moi je veux des valeurs fixes, pas des %... c'est que je suis perfectionniste :p  mais j'attend de ce post une bonne âme qui aie la gentillesse soit de m'expliquer le code css, soit d'essayer de m'aider à le dechiffrer... j'essaye de pas demander l'impossible bref...
Contenus similaires
28 Mars 2009 21:57:56

je sais que c'est un peu gonflé, et limite complexe, mais bon... de l'aide serait vraiment la bienvenue, quelle qu'elle soit ;) 

sinon je vais (faut bien, ça dépasse tout le monde / ou c'est moi qui sent le poisson) carrément changer de layout, et repartir d'un autre moins bordelique, parce que le css je connais moyennement, et que je ne sais pas d'où repartir pour continuer à apprendre sans perdre de temps (pas tomber sur des trucs que je connais déjà, j'ai toute une partie des cours à sauter dans le cas d'une remise à niveau)

Donc (je demande ça à tout hasard) si quelqu'un conaissait un tuto css "de deuxième main" ou encore "de niveau 2"...
29 Mars 2009 23:34:07

bon je relance une dernière fois... snif :( 

EDIT : bon pour ceux que ça intéresseraient, j'ai résolu mon problème. j'ai été sur le site alsacreation ( http://www.alsacreations.com/ ), et je suis simplement parti du gabarit 11 et étape après étape ça marche...
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS