[CSS] Mise en page

Mise en page [CSS] - HTML/CSS - Programmation

Marsh Posté le 20-08-2005 à 22:00:57    

Bonjour à tous,
 
Il y a peu je faisais les m-e-p via des tables, par facilité et surtout parce que mon éditeur (Namo) permet de travailler en prévisualiation constante avec les tables, ce que je trouve fort pratique.
 
Après avoir épluché quelques tutoriaux et forums spécialisés, notemment ici, il apparait que les tables pour un usage autre que tabulaire (forums etc) ne sont pas appropriées et que les div sont plus adaptés.
 
Chose emebetante, lorsque je travaille avec les div mon éditeur ne fais pas de prévisualisation constante, je suis donc obligé de visualiser de temps à autre l'avancement. Si quelqu'un pouvait me renseigner sur un éditeur qui permet de faire ça ça serait sympa :)
 
Concernant l'emploi des balises, je travaille un peu au petit bonheur, sachant que je ne connais pas très bien les utilités spécifiques de chacunes, j'ai lu les descriptions sur w3schools, mais c'est un peu flou.
 
J'ai fais une petit esquisse avec des div:
 

Citation :

<!DOCTYPE html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
 
<head>
<title>T E S T</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
body {
 background-color: #000000;
 margin: 10px 0;
 padding: 0;
 text-align: center;
}
.contenu_bas_gauche_vide {
 float: left;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 width: 250px;
 margin: 0px;
 height: 18px;
}
.contenu_bas_centre_vide {
 float: left;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 width: 298px;
 margin: 0px;
 height: 18px;
}
.contenu_milieu_vide {
 float: left;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 width: 800px;
 margin: 0px;
 height: 13px;
}
.contenu_bas_gauche_cellule_1 {
 float: left;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 width: 90px;
 margin: 0px;
 height: 30px;
 text-align: left;
 font: bold 12px Verdana, Arial, Helvetica, sans-serif;
 color: #808080;
 padding-left: 20px;
}
.contenu_bas_gauche_cellule_2 {
 float: left;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 width: 138px;
 margin: 0px;
 height: 30px;
 text-align: left;
 font: normal 12px Verdana, Arial, Helvetica, sans-serif;
 color: #808080;
 padding-left: 0px;
}
.tableau_bas {
 border-style: solid;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 border-top-style: none;
 width: 800px;
 margin: 0 auto;
 height: 180px;
 background: url(images/splash_degrade.jpg);
}
.contenu_bas_centre {
 float: left;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 border-right-style: solid;
 width: 298px;
 margin: 0px;
 height: 200px;
}
.contenu_bas_droite {
 float: right;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 width: 250px;
 margin: 0px;
 height: 200px;
}
.contenu_bas_gauche {
 float: left;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 border-right-style: solid;
 width: 250px;
 margin: 0px;
 height: 200px;
}
.tableau_haut {
 border-style: solid;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 width: 800px;
 margin: 0 auto;
 background: url(images/splash_screen2.jpg);
 height: 403px;
}
.tableau_milieu {
 border-style: solid;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 border-top-style: none;
 width: 800px;
 margin: 0 auto;
 height: 13px;
 font: bold 13px Verdana, Arial, Helvetica, sans-serif;
 text-align: left;
 color: #003399;
}
.contenu_milieu_gauche {
 float: left;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 border-right-style: solid;
 width: 230px;
 margin: 0px;
 height: 13px;
 padding-left: 20px;
}
.contenu_milieu_droite {
 float: right;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 width: 230px;
 margin: 0px;
 height: 13px;
 padding-left: 20px;
}
.contenu_milieu_centre {
 float: left;
 border-style: none;  
 border-width: 1px;  
 border-color: rgb(51,51,51);
 border-right-style: solid;
 width: 278px;
 margin: 0px;
 height: 13px;
 padding-left: 20px;
}
 
</style>
</head>
 
<body>
 
<div class="tableau_haut">
</div>
 
<div class="tableau_milieu">
 
    <div class="contenu_milieu_gauche">
        <p>Texte 1</p>
    </div>
    <div class="contenu_milieu_centre">
        <p>Texte 2</p>
    </div>
    <div class="contenu_milieu_droite">
        <p>Texte 3</p>
 
    </div>
</div>
</body>
 
</html>


 
 
Le problème c'est qu'en prévisualisant avec IE, ça passe nickel, mais sous FF le texte se trouve hors des cellules.
je ne sais pas si ça vient de la CSS ou des div, mais je patauge un peu.
 
Sinon j'ai lu que les balises headers sont recommandées pour les haut de structures, mais je ne comprends pas la différence avec les div.
 
Enfin voilà, si quelqu'un pouvait m'éclairer un peu j'apprécierais  :)


Message édité par wannamaker le 20-08-2005 à 22:03:51
Reply

Marsh Posté le 20-08-2005 à 22:00:57   

Reply

Marsh Posté le 20-08-2005 à 23:04:32    

Dreamweaver MX 2004 le fait plus ou moins bien, la nouvelle version doit faire cela plutot pas mal.

Reply

Marsh Posté le 21-08-2005 à 20:25:23    

up.
J'essaierai la dernière version de dreameaver  :)  
 
Sinon personne ne peut m'aider pour la mise en page Mozilla qui foire ?

Reply

Marsh Posté le 21-08-2005 à 21:11:27    

c'est tes <p></p> qui font sortir ton texte en dehors de la cellule.
Ta cellule est trop petite par rapport au texte donc le texte sort de ton DIV pour firefox.
 
c'est IE qui te fait des miseres.
 
enleve les height: 13px, tu verra par toi meme


Message édité par Badze le 21-08-2005 à 21:16:37
Reply

Marsh Posté le 21-08-2005 à 21:33:42    

Hmm en fait après avoir retiré les 'height 13px' pour les informations de hauteur de cellules / tableau, j'obtiens ça:
 
http://img335.imageshack.us/img335/9817/cssdiv5gq.jpg
 
Les marges verticales apparaissent bien, mais la ligne du dessous est collée à celle de 'tableau_haut' :/
 
Edit: sous IE c'est toujours nickel  :sarcastic:


Message édité par ANViL le 21-08-2005 à 21:35:13
Reply

Marsh Posté le 21-08-2005 à 21:52:03    

Dans la foulée, et comme je n'ai pas envie de faire un nouveau post, j'expose un petit dillemme que je ne comprends pas:
 
si j'écris ça:
 

Citation :

body {
 background: url(images/truc.jpg)
        background-attachement: fixed;  
}


 
...IE n'en veut pas.
 
Par contre:
 

Citation :

body {
 background: url(images/truc.jpg) fixed;
}


 
là ça marche ôô
 
Je sais qu'IE est sécial mais si quelqu'un avait une explication rationnelle j'aimerais autant  :hello:


Message édité par ANViL le 21-08-2005 à 21:52:38
Reply

Marsh Posté le 21-08-2005 à 21:53:48    

j'ai le meme probleme XD

Reply

Marsh Posté le 22-08-2005 à 01:13:57    

Voila ce que j'arrive a obtenir en refaisant ce que ta fait, je ne pense pas que j'ai fait le top du top, mais cela fonctionne sous IE et Firefox. Ton probleme proviens de plusieurs facteurs, bref.
 

Code :
  1. <!DOCTYPE html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>T E S T</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  6. <style type="text/css">
  7. body {padding: 0; text-align: center; font: 13px Verdana, Arial, Helvetica, sans-serif; }
  8. .tableau_haut { border: 1px black solid; width: 752px; margin: 0; height: 400px;margin-left: auto; margin-right: auto;}
  9. .tableau_milieu2 {padding: 0; bottom: 0px; width: 754px; margin-left: auto; margin-right: auto;}
  10. .contenu_milieu_gauche { border: 1px black solid; border-top: none; width: 250px; margin: 0; padding: 0; background: blue; float: left;}
  11. .contenu_milieu_centre { border: 1px black solid; border-top: none; border-left: none; width: 250px; margin: 0; padding: 0; background: #FFF; float: left;}
  12. .contenu_milieu_droite { border-bottom: 1px black solid; border-right: 1px black solid; width: 250px; margin: 0; padding: 0; background: red; float: left;}
  13. </style>
  14. </head>
  15. <body>
  17. <div class="tableau_haut"></div>
  18. <div class="tableau_milieu2">
  19.     <div class="contenu_milieu_gauche">test 1</div>
  20.     <div class="contenu_milieu_centre">test 2</div>
  21.     <div class="contenu_milieu_droite">test 3</div>
  22. </div>
  24. </body>
  25. </html>

Reply

Marsh Posté le 22-08-2005 à 01:24:44    

un point virgule ";" est surement la solution

Citation :

body {
 background: url(images/truc.jpg);
        background-attachement: fixed;  
}

Reply

Marsh Posté le 22-08-2005 à 10:14:57    

moi meme avec le ";" c'est pareil. Z'avais meme pas vu qu'il l'avait oublier :£

Reply

Marsh Posté le 22-08-2005 à 10:14:57   

Reply

Marsh Posté le 22-08-2005 à 10:22:37    

Désolé pour la faute effectivement je n'avais pas vu.
Mais comme kirua le dit, ça ne change tout de même rien avec IE  :(

Reply

Marsh Posté le 22-08-2005 à 10:33:19    

de toute facon je ne pense pas qu'il soit possible d'expliquer toutes les idioties qu'IE a dans le crane.... ton fait restera inexplicaple :oops:

Reply

Marsh Posté le 22-08-2005 à 10:34:38    

-> badze  :sol:  
 
Ca fonctionne nickel !
Je pense que je vais grandement m'insipirer de ton code CSS  :bounce:  
 
J'ai vu que tu avais gérer les margins (source de mes problèmes ?)
Merci à tous pour l'aide  :)
 
P.S: Je confirme le comportement erratique d'IE avec la syntaxe de background 'correcte'


Message édité par wannamaker le 22-08-2005 à 10:36:58
Reply

Sujets relatifs:

Leave a Replay

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