Presentation "tableless" avec CSS

Presentation "tableless" avec CSS - HTML/CSS - Programmation

Marsh Posté le 28-10-2003 à 22:40:01    

Voila j'ai lu les divers techniques et articles sur ce sujets mais j'ai un peu de mal.
 
basiquement, mon site se presente ainsi :
 
1 banniére titre de 800x200
3 colonnes de contenu : 1 menu à droite, 1 news list au milieu, 1 menua gauche.
1 banniére 800*50 au fond de la page.
 
J'arrive à possitioner le <div> qui contient la 1e banniére avec un position:absolute ... mais pour le reste j'ai un probleme.
 
Chaque element des menus de droite et gauche sont générés par une fonction PHP qui va lire dans ma bdd mySQL le titre du menu et le nom du ficheir à inclure au sein du menu.
 
Comment determiner proprement la taille de ce menu et donc la position du <div> du menu suivant ??? Dois je utiliser position:float ??
 
Désolé de reposer cette question si elle fut aborder auparavant.
merci d'avance.

Reply

Marsh Posté le 28-10-2003 à 22:40:01   

Reply

Marsh Posté le 28-10-2003 à 23:20:22    

Le plus simple c'est ça :
 

Code :
  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  8. <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
  9. <title>test</title>
  11. <link href="css/test.css" rel="stylesheet" media="screen" />
  13. </head>
  15. <body>
  17. <div class="global">
  19. <div class="menu-gauche">tata</div>
  20. <div class="contenu">
  21. toto<br />
  22. toto<br />
  23. toto<br />
  24. toto<br />
  25. toto<br />
  26. toto<br />
  27. toto<br />
  28. toto<br />
  29. toto
  30. </div>
  31. <div class="menu-droite">tata</div>
  33. </div>
  35. </body>
  37. </html>


 
et pour les css :
 

Code :
  1. html,body {
  2. margin : 0px;
  3. padding : 0px;
  4. text-align : center;
  5. }
  7. .global {
  8. margin : 0px auto 0px auto;
  9. width : 760px;
  10. background-color : Olive;
  11. text-align : left;
  12. }
  14. .menu-gauche {
  15. position : absolute;
  16. margin : 0px 0px 0px 0px;
  17. background-color : Lime;
  18. width : 100px;
  19. }
  21. .contenu {
  22. position : absolute;
  23. margin : 0px 0px 0px 100px;
  24. background-color : Aqua;
  25. width : 560px;
  26. }
  28. .menu-droite {
  29. position : absolute;
  30. margin : 0px 0px 0px 660px;
  31. background-color : Lime;
  32. width : 100px;
  33. }


 


Message édité par Hermes le Messager le 28-10-2003 à 23:20:55
Reply

Marsh Posté le 28-10-2003 à 23:46:50    

Reply

Marsh Posté le 29-10-2003 à 08:12:39    

:jap: merci à tous c'est nickel :D
 
question subsidiaire :
y a t il des contr-indications à utiliser des <div> imbriqués ?


Message édité par Joel F le 29-10-2003 à 08:12:50
Reply

Marsh Posté le 29-10-2003 à 11:43:58    

Seulement si tu en rajoutes inutilement.
Après, les puristes peuvent râler pour la sémantique, mais tant que tu n'en abuses pas, il n'y a pas de problème. :)
 
Ah oui, sinon, évite simplement les <div> quand une autre balise a plus sa place : j'ai déjà vu quelqu'un mettre des <div>Titre</div> au lieu de <h2>Titre</h2> et tout styler comme une brute.

Reply

Marsh Posté le 29-10-2003 à 12:32:16    

Citation :

Ah oui, sinon, évite simplement les <div> quand une autre balise a plus sa place : j'ai déjà vu quelqu'un mettre des <div>Titre</div> au lieu de <h2>Titre</h2> et tout styler comme une brute.


 
Faut pas? :o
Faudrait peut etre que je fasse le menage dans mes DIV alors moi...

Reply

Marsh Posté le 29-10-2003 à 12:41:42    

Meerthyl a écrit :

Seulement si tu en rajoutes inutilement.
Après, les puristes peuvent râler pour la sémantique, mais tant que tu n'en abuses pas, il n'y a pas de problème. :)


 
En fait je pensais avoir un div pour la partie centrale de mon layout et géénré des div dans celui ci via PHP, chaque div contenant une news.
 

Code :
  1. <div class="contents>
  2. <div class="news">News 1</div>
  3. <div class="news">News 2</div>
  4. <div class="news">News 3</div>
  5. </div>


Reply

Marsh Posté le 29-10-2003 à 12:59:38    

@impule : nan faut pas ! :o
 
@Joel : Bin ça dépend de ce que tu as comme news : le <div> n'est pas gênant si par exemple il te sert à regrouper plusieurs balises composant la news.
 
Par exemple :
 

Code :
  1. <div class="news">
  2.   <h3>titre de la news</h3>
  3.   <p>Bla bla bla bla bla</p>
  4.   <a href="...">Un lien à la fin</a>
  5. </div>


 
C'est surtout une question de sémantique : le <div> n'en a pas, il sert à regrouper "logiquement".
Enfin c'est comme ça que je le vois. :)

Reply

Marsh Posté le 29-10-2003 à 13:02:14    

Meerthyl a écrit :


@Joel : Bin ça dépend de ce que tu as comme news : le <div> n'est pas gênant si par exemple il te sert à regrouper plusieurs balises composant la news.


 
c'est ce que je comptais faire, avec un style pour le h3 et le paragraphe :)
 

Code :
  1. <div class="news">
  2.   <h3 class="newstitle">titre de la news</h3>
  3.   <p class="newscontent">Bla bla bla bla bla</p>
  4.   <a href="...">Un lien à la fin</a>
  5. </div>

Reply

Marsh Posté le 29-10-2003 à 13:14:29    

Ca va aller tout seul alors. :)

Reply

Marsh Posté le 29-10-2003 à 13:14:29   

Reply

Marsh Posté le 30-10-2003 à 09:28:26    

et oui ca amrche nickel :D
des que le site est uplaodez je vous montre ca :D

Reply

Sujets relatifs:

Leave a Replay

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