Se connecter avec
S'enregistrer | Connectez-vous

You are not allowed to do this.

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

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte

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à

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...

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"...
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde