[XHTML][CSS2] aux pros de DIV et du layout en CSS2 : les marges

aux pros de DIV et du layout en CSS2 : les marges [XHTML][CSS2] - Web design - Graphisme

Marsh Posté le 04-08-2002 à 00:56:52    

voici mon test de page réactualisé : g enfin atteri et découvert le DIV...g donc abandonné les tables...
 
ca donne ca :
 
http://jubijub.nerim.net
 
le design est nickel comme ca, sauf que je cherche à obtenir un petit détail en plus, et j'y arrive pas :  
 
je voudrais que la frame du bas, celle qui contient les logos W3C, fasse la longueur entière du doc, tt en maintenant une marge de 10px ...
 
g tt essayé, g pas réussi...je me retrouve avec une marge bizarre de 30px environ...je sais même pas de quoi elle dépend...
voilà ce que ca fait : normalement, la marge blanche devrait coller au bloc du haut :
http://jubijub.nerim.net/screen.png
 
le code :  
LE CODE MONTRE ICI EST CELUI DE LA VERSION DU SITE, pas de l'expérimentale dont l'image est plus haut
 

Code :
  1. INDEX.HTML
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
  5. <html dir="ltr" xml:lang="fr">
  7. <head>
  8.       <title>Depart pour Kent</title>
  9.       <!--  Partie destinée au référencement -->
  10.       <meta name="keywords" content="University of Kent, échange, ERASMUS, Université Jean Moulin Lyon III" />
  11.       <meta name="description" content="Informations destinées aux étudiants qui partent à Kent en 2002-2003" />
  12.       <meta name="authors" content="Jubijub" />
  13.       <!-- Partie destinée au navigateur -->
  14.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  15.       <!-- Declaration des CSS -->
  16.       <link rel="stylesheet" type="text/css" href="base.css" />
  17.       <link rel="stylesheet" type="text/css" href="layout.css" />
  18.    
  19. </head>
  21. <body>
  22. <div id="titre">
  23. Test titre
  24.       <div id="separatorTop">
  25.     <div id="layout1">
  26.    <div id="layout2">
  27.   <div id="layout3">
  28.   <pre>
  29.     Test
  30.     Test 1
  31.     Test
  32.     Test 1
  33.     Test
  34.     Test 1
  35.     Test
  36.     Test 1
  37.     Test
  38.     Test 1
  39.     Test
  40.     Test 1
  41.     Test
  42.     Test 1
  43.     Test
  44.     Test 1
  45.     Test
  46.     Test 1
  47.     Test 1<
  48.     Test
  49.     Test 1
  50.     Test
  51.     Test 1
  52.     Test
  53.     Test 1
  54.     Test
  55.     Test 1
  56.   Test 1
  57.     Test
  58.     Test 1
  59.     Test
  60.     Test 1
  61.     Test
  62.     Test 1
  63.     </pre>
  64.          <div id="separatorBottom">
  65.       <div id="pied">
  66.        <p class="validator">
  67.        <a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" style="border:0;width:88px;height:31px" alt="Valid XHTML 1.0!" /></a><a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></img></a>
  69.       </p>
  70.       </div>
  71.        </div>    </div>
  72.     </div>
  73.    </div>
  74.         </div>
  75.       </div>
  77. </body>
  80. </html>


la partie en gras est celle qui correspond au code de ce cadre...g essayé de le mettre un peu partout, ca marche pas...si je le met plus bas, entre 2 </DIV>, la frame fait effectivement tt la largeur, mais g un espace entre elle et le bloc du haut d'environ 30px...(pour mes test g mis le separatorBottom en blanc, pour bien le différencier du background...
 
-->visiblement ca semble un peu buggué sous ie, parce que g du forcer la height du separatorTop..
 
-->pour les css, je met que layout, base ne contient que la mise en forme du paragraphe
 

Code :
  1. LAYOUT.CSS
  3. body   {
  4.   margin: 10px 10px 10px 10px;
  5.   padding: 0px 0px 0px 0px;
  6.   background-color: #CCCCFF; /* bleu turquoise clair */
  7.   color: #000000;
  8.   }
  9. /* baniere de titre */
  10. #titre   {
  11.   background-color: #9999FF;
  12.   color: #000000;
  13.   }
  14. /* separateur haut */
  15. #separatorTop  {
  16.   background-color: #CCCCFF;
  17.   margin-top: 50px;
  18.   padding : 10px 0px 0px 0px;
  19.   height: 10px;
  20.   color: #000000;
  21.         }
  22. /* couleur de la frame gauche */
  23. #layout1  {
  24.   background-color: #666699; /* bleu turquoise sombre */
  25.   color: #000000;
  26.   }
  27. /* definition du separateur frame gauche - main frame */
  28. #layout2  {
  29.   background-color: #CCCCFF;
  30.   margin-left: 150px;
  31.   padding-left: 10px;
  32.   color: #000000;
  33.   }
  34. /* definition de la frame de droite */
  35. #layout3  {
  36.   background-color: #9999FF;
  37.   color: #000000;
  38.   }
  39. /* bottom frame */
  40. #pied   {
  41.   background-color: #9999FF;
  42.   height: 40px;
  43.   color: #000000;
  44.   }
  45. #separatorBottom {
  46.   background-color: #CCCCFF;
  47.     margin-bottom: 40px;
  48.   margin-top: 0px;
  49.   padding-top: 10px;
  50.   color: #000000;
  51.   }


Message édité par Jubijub le 04-08-2002 à 01:03:49

---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 04-08-2002 à 00:56:52   

Reply

Marsh Posté le 04-08-2002 à 02:56:26    

C'est bizarre, je sauve ton site en local, et puis ensuite rien à faire pour le faire marcher, IE ignore simplement les CSS
 
Edit : J'ai recopier le code ci-haut et cela marche maintenant, avec quelques différences au bas, et que le tag [b][/b] n'est pas reconnu et apparait comme du texte. C'est quoi ce tag?
 
http://www3.sympatico.ca/sylvain403/tag.png


Message édité par Gaboriau le 04-08-2002 à 03:18:30
Reply

Marsh Posté le 04-08-2002 à 05:38:24    

juste pour dire nerim powa  :D  :sol:

Reply

Marsh Posté le 04-08-2002 à 10:47:15    

Heu juste une question ?
 
Ça apporte quoi en plus ces div par rapport aux tables ?
 
merci :jap:


Message édité par AZorbas le 04-08-2002 à 11:00:54

---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
Reply

Marsh Posté le 04-08-2002 à 11:30:37    

AZorbas a écrit a écrit :

Heu juste une question ?
 
Ça apporte quoi en plus ces div par rapport aux tables ?
 
merci :jap:




Ben c'est fait pour la mise en page, pas les tables. Donc ca permet plein de trucs marrants comme la supperposition partielle, la semi-transparence, le mouvement, etc..

Reply

Marsh Posté le 04-08-2002 à 11:35:22    

Sinon, jubijub, j'ai pas bien compris ce que tu veux. Au final, tu cherche à obtenir l'image ou autre chose? Si c'est autre chose, tu peux nous faire une image factice, histoire de mieux visualiser.

Reply

Marsh Posté le 04-08-2002 à 21:00:44    

-->gaboriau : c ce que j'avais mis sous HFR pour que cette partie du code sorte en gras...c un tag HFR ;) :D
 
-->azorbas : ben g essayé de faire le même layout avec des tables, je me suis arraché les cheveux...pour des raisons de bug de l'héritage de la width et de la height...mes tables faisaient pas la taille maximum du conteneur...
 
pis c bien plus simple : par défaut un div prend tt la taille qu'il peut...et les div imbriqués permettent des trucs sympa...et c 100% compatible...
 
-->maxime : oui, nerim powah, je v les quitter, bouhouhouhou...mais pour la 155mbits de la fac de Kent :D
 
-->gizmo : tu vois sur mon  image le cadre qui contient les icones du W3C ?  
Il y a un espace entre la marge blanche et le reste des cadres (le menu, et le cadre principal)
-->je veux qu'il disparaisse...mais g pas réussi...
 
en fait, je voudrais que le cadre du bas et la marge collent au cadre du haut...comme ca je change le blanc en bleu pale, et ca me fait la marge de 10px que g entre chacun de mes cadres...
 
CE QUE JE VEUX OBTENIR
http://jubijub.nerim.net/screen2.png
 
 
CE QUE J'OBTIENS SI J'ESSAYE : (c normal le blanc de la bande, c pour le test...l'espace au dessus de cette bande est ce dont je veux me débarraser
http://jubijub.nerim.net/screen.png
 
CE QUE J'AI POUR LE MOMENT ET QUI ME PLAIT MOYEN :
http://jubijub.nerim.net


Message édité par Jubijub le 04-08-2002 à 21:01:20

---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 04-08-2002 à 21:10:17    

Jubijub a écrit a écrit :

-->gaboriau : c ce que j'avais mis sous HFR pour que cette partie du code sorte en gras...c un tag HFR ;) :D
 




:lol:  
ça me disait quelque chose aussi ce tag

Reply

Marsh Posté le 04-08-2002 à 21:12:31    

oui, pis en html c pas un tag valide, ca aurait du te mettre la puce à l'oreille
...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 04-08-2002 à 21:21:08    

Jubijub a écrit a écrit :

oui, pis en html c pas un tag valide, ca aurait du te mettre la puce à l'oreille
...




 
Je suis à l'aise avec le HTML, mais tous ces trucs PHP, DHTML, XHMTL, etc. jen'y ai jamais touché, ou bien sans le savoir ; je connais a peine le css et je n'ai jamais tâté du div, enfin tout ça pour dire que je prennais ce tag pour un de ces nouveaux trucs sans doute vachement WC3 compliant :D Mais tu me rassures, ceci dit c'est bien intéressant les div

Reply

Marsh Posté le 04-08-2002 à 21:21:08   

Reply

Marsh Posté le 04-08-2002 à 21:29:22    

les 2 pages qui m'ont ouvert les yeux sur les div :
 
http://glish.com/css/#techniques
 
et surtout :
http://www.webreference.com/author [...] /advanced/
 
-->pour le XHTML, c presque pas différent du HTML 4.01 strict...à par le xml:lang, tt ma page est HTML 4.01 compliant aussi...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 04-08-2002 à 21:36:17    

Jubijub a écrit a écrit :

les 2 pages qui m'ont ouvert les yeux sur les div :
 
http://glish.com/css/#techniques
 
et surtout :
http://www.webreference.com/author [...] /advanced/
 
-->pour le XHTML, c presque pas différent du HTML 4.01 strict...à par le xml:lang, tt ma page est HTML 4.01 compliant aussi...




[:gaboriau]

Reply

Marsh Posté le 04-08-2002 à 21:45:18    

en gros :  
 
XHTML :  
 
- t obligé de fermer tt les balises, et dans l'ordre ou tu les as ouverte genre <b><i></i></b>...et pour tt les balises, même celles qui ont pas de marqueurs de fin (tu met /> alors )
- tt en minuscule en ce qui concerne les balises
- tt les param entre guillemets...genre alt="joce totalement nu"...
-pour ce qui le permet, privilégier id au lieu de name
- mettre xml:lang au lieu de lang
-tt la mise en forme pour les css...(en strict...sinon en frame ou en transitionnal, tu peux continuer à utiliser la mise en forme dans le html
 
c tout...c pas éloigné du 4.01 strict...


Message édité par Jubijub le 04-08-2002 à 21:46:07

---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 05-08-2002 à 11:54:20    

quitte à faire du XHTML, autant faire du XML + XSL comme ça le contenu n'est pas dépendant de l'affichage... m'enfin c'est pas obligatoire :D


---------------
As the plane took off, the pilot turned to the co-pilot and said, “Have you ever flown solo?” Co-pilot: No. Typically I fly much higher than this.
Reply

Marsh Posté le 05-08-2002 à 14:28:50    

c plus pareil non plus...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 06-08-2002 à 09:41:26    

en effet, mais c'est pratique... entre 2 designs pour un même contenu tu n'as qu'à réécrire un template graphique en XSL...


---------------
As the plane took off, the pilot turned to the co-pilot and said, “Have you ever flown solo?” Co-pilot: No. Typically I fly much higher than this.
Reply

Marsh Posté le 06-08-2002 à 15:18:26    

bon, j'ai essayer de me débattre avec ton problème, mais pas moyen de faire exactement ce que tu veux uniquement avec des CSS, il faut une table.
 
De toute façon, j'a tout retravaillé parce que tu avais construit était inutilisable (notamment la frame de gauche). Donc voila ce que j'ai refais.
 
 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ strict.dtd">
 
<html dir="ltr" xml:lang="fr">
 
<head>
   <title>Depart pour Kent</title>
   <!--  Partie destinée au référencement -->
   <meta name="keywords" content="University of Kent, échange, ERASMUS, Université Jean Moulin Lyon III" />
   <meta name="description" content="Informations destinées aux étudiants qui partent à Kent en 2002-2003" />
   <meta name="authors" content="Jubijub" />
   <!-- Partie destinée au navigateur -->
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <!-- Declaration des CSS -->
   <link rel="stylesheet" type="text/css" href="test2.css" />
   
</head>
 
<body>
 <div id="titre">
  Test titre
 </div>
 <div id="layout1">
  Sommaire
 </div>
 <div id="layout2">
     <pre>
               Départ
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test 1<
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test 1
               Test
               Test 1
               Test
               Test 1
               Test
               Test 1
               </pre>
 </div>
 <div id="pied">
 </div>
</html>

 
 
et le css:
 


body  {
 margin: 10px 10px 10px 10px;
 padding: 0px 0px 0px 0px;
 background-color: #CCCCFF; /* bleu turquoise clair */
 color: #000000;
 }
 
/* baniere de titre */
#titre  {
 background-color: #9999FF;
 color: #000000;
 padding-bottom : 30px;
 margin-bottom: 50px;
 }
 
 
/* couleur de la frame gauche */
#layout1  {  
 background-color: #666699; /* bleu turquoise sombre */
 float: left;  
 width: 150px;
 color: #000000;
 }
 
/* definition du separateur frame gauche - main frame */
#layout2  {  
 background-color: #9999FF;
 margin-left: 160px;
 padding-left: 10px;
 color: #000000;
 }
 
/* bottom frame */
#pied  {
 background-color: #9999FF;
 clear: left;
 margin-top: 30px;
 height: 40px;
 color: #000000;
 }


Message édité par gizmo le 08-08-2002 à 12:12:47
Reply

Marsh Posté le 06-08-2002 à 20:20:34    

je sais, mais c pas fini...y manque les div dédiés au contenu pour les frames...
 
sinon je vois pas de table dans ton code, et t'a posté 2x le html :)


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 06-08-2002 à 21:23:04    

oups, et en plus je viens de bousiller les fichier :fou: bon, je le referai demain.

Reply

Marsh Posté le 06-08-2002 à 22:21:14    

arf...je parie que t'a conservé mon code, et que tu l'a rajouté dans une table avec 2 lignes et 1 col non ?


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 06-08-2002 à 23:11:23    

non, du tout. la solutio que je te proposais ne comportait pas de table mais montrait la bonne utilisation des css et surtout des DIV qui sont sensé séparré les différentes partie de texte et non être imbriqués les uns dans les autres.

Reply

Marsh Posté le 07-08-2002 à 20:07:12    

ah...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 08-08-2002 à 12:13:49    

voila, j'ai édité mon post précédent. Maintenant, si tu veux que les deux colonnes descendent ensemble, il faut obligatoirement que cela passe par un tableau

Reply

Marsh Posté le 08-08-2002 à 22:01:26    

ok...pas le temps ce soir, je teste demain ou ce WE


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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