mise en forme CSS

mise en forme CSS - HTML/CSS - Programmation

Marsh Posté le 12-07-2004 à 12:03:55    

salut,
je me lance dans le CSS, après avoir lu que la mise en forme avec des tableau, cai mal  :o  
seulement un petit probleme, et quelques questions ( :D )
deja voila le code :

Code :
  1. <html>
  3. <head>
  4.   <title>test CSS</title>
  5. <style>
  6. .menuhaut
  7. {
  8. float: left;
  9. width: 185;
  10. height: 39;
  11. background-image: url("php/newsite/haut.bmp" );
  12. }
  14. .menuback
  15. {
  16. float: left;
  17. width: 185;
  18. background-image: url("php/newsite/background.bmp" );
  19. }
  21. .menubas
  22. {
  23. float: left;
  24. width: 185;
  25. height: 50;
  26. background-image: url("php/newsite/bas.bmp" );
  27. }
  28. </style>
  29. </head>
  31. <body>
  32. <div class="menuhaut">
  33. </div>
  34. <br><br>
  35. <div class="menuback">
  36. tata<br>
  37. tete<br>
  38. titi<br>
  39. toto<br>
  40. tutu<br>
  41. tyty<br>
  42. </div>
  43. <br><br><br><br><br><br>
  44. <div class="menubas">
  45. </div>
  48. </body>
  50. </html>


 
et voila le résultat:
http://progimethodes.free.fr/css.png
c'est pas mal pour un debut :)
par contre pourquoi les menus haut et background sont mal assemblés (ligne blanche ?)
aussi y a t'il besoin de tout mes <br> pour que la partie du menu aille bien en dessou du précédent ?
aussi je voudrais que la partie background "s'allonge" selon la longueur du texte contenu a gauche (on m'a dit d'utiliser "repeat-y", mais dois-je l'associer à un background ?)
idéalement je voudrais avoir ca :
http://progimethodes.free.fr/menu.png
et pas ca :
http://progimethodes.free.fr/menupasbien.png
 
merci de votre aide  :jap:


Message édité par $man le 13-07-2004 à 11:09:47
Reply

Marsh Posté le 12-07-2004 à 12:03:55   

Reply

Marsh Posté le 13-07-2004 à 11:11:03    

:bounce:

Reply

Marsh Posté le 13-07-2004 à 11:13:25    

$man a écrit :

:bounce:


 
les br cai mal
 
et les bmp aussi :o


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 13-07-2004 à 11:13:47    

img {display:block} pour les images

Reply

Marsh Posté le 13-07-2004 à 11:14:51    

Et pour ton histoire d'etirement, faut que les hauteurs soient corrélées, c'est a dire que les deux parties texte et menu doivent etre dans un meme conteneur div.


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 13-07-2004 à 11:19:17    

merci, de vos réponses!
bien evidenmment le bmp c'est parce que je suis en local, et comme je me suis pas encore arréter sur un design précis, je les laisse en bmp pour les modif sans perdre en qualité :)
avec  img {display:block} je pourrais écrire par dessus ?
merci


Message édité par $man le 13-07-2004 à 11:19:59
Reply

Marsh Posté le 13-07-2004 à 11:21:38    

img {display:block} s'utilises si t'as des balises <img> avec des espaces en dessous ce qui n'est pas ton cas pour l'instant. Je pense que ca vient plutot de tes <br> entre les divs.


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 13-07-2004 à 11:26:37    

merci,
je me documente :)

Reply

Marsh Posté le 13-07-2004 à 11:53:17    

salut,
j'ai pas mal avancé, mais pour l'étirement je vois pas
j'ai bien mis le morceau de menu que je veut étiré dans le meme div que mon texte mais il se passe rien :

Code :
  1. <div>
  2. <div class="menuback">
  3. tata<br>
  4. tete<br>
  5. titi<br>
  6. toto<br>
  7. tutu<br>
  8. tyty<br>
  9. </div>
  10. <div class="contenu">
  11. salut<br>salut<br>salut<br>salut<br>salut<br>salut<br>salut<br>salut<br>salut<br>salut<br>
  12. salut<br>salut<br>salut<br>salut<br>salut<br>
  13. </div>
  14. </div>


Message édité par $man le 13-07-2004 à 11:53:35
Reply

Marsh Posté le 13-07-2004 à 11:58:39    

Bah il faut mettre une classe au conteneur aussi et jouer avec le positionnement, la hauteur et la largeur pour avoir l'effet désiré. Enfin c'est un peu prise de tête et les css montrent vite leur limites pour des mises en pages un peu complexe, c'est pour cela que j'utilise des tableaux  pour ma mise en page.  
 
En tout les cas, on t'as surement deja parlé de ce site, il possède de bon tutoriaux css pour le positionnement et l'émulation de frames.
http://www.alsacreations.com/articles/


Message édité par boulax le 13-07-2004 à 11:59:07

---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 13-07-2004 à 11:58:39   

Reply

Marsh Posté le 13-07-2004 à 12:30:36    

ok, mais meme avec les tableau je ne sais pas faire!
au debut je voulais faire ca mais je n'y suis pas arrivé :(
sur ce je vais aller déjeuner :o
bon app @ tous les lecteurs


Message édité par $man le 13-07-2004 à 12:30:53
Reply

Marsh Posté le 19-07-2004 à 11:46:36    

personne n'a une idée :(

Reply

Sujets relatifs:

Leave a Replay

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