quel façon coder ce template épuré en CSS et html ?

quel façon coder ce template épuré en CSS et html ? - HTML/CSS - Programmation

Marsh Posté le 10-07-2009 à 08:56:34    

Slt à tous,
 
Je souhaite faire un site au design trés trés simple.
 
voila le fond :http://www.mough-lee.fr/newsite.png
 
Comme vous avez pu constater, c'est trés simple.
 
mais la forme ?
 
En fait, j'hésite pour le CSS car je me dis qu'il y aurai plusieur méthode :
 

Citation :

body {
 
background-color: black;
height: 768px;
widht: 1024px;
}


 
çà commence cool, mais maintenant pour image01, image02, les liens :
 
- l'image 01, en div, l'image02 un div et tous les liens en div ?
- l'image01 inclus ds le body{}, l'image 02 un div et les liens en div ?
 
Je suis sur qu'il y a plein d'autre façon encore mais qu'il y en a une plus optimisé ou plus mieux que les autres.
 
Comment feriez-vous ?
 
merci de vos idées surtout si elles sont expliquées.
 
a+


Message édité par Positiviste le 22-07-2009 à 11:10:28

---------------
ploum ploum tralala
Reply

Marsh Posté le 10-07-2009 à 08:56:34   

Reply

Marsh Posté le 10-07-2009 à 09:14:19    

Trop de divs tue les divs. Faut utiliser les éléments pour leur sémantique. La liste de liens en bas sera un <ul> avec un <li> dedans par lien.

Message cité 1 fois
Reply

Marsh Posté le 10-07-2009 à 09:42:49    

FlorentG a écrit :

Trop de divs tue les divs. Faut utiliser les éléments pour leur sémantique. La liste de liens en bas sera un <ul> avec un <li> dedans par lien.


 
c'est ce que je comptai faire pour les liens en bas (et en haut) mais inclu ds un div en fait.
 
Donc trop de div tu le div, c'est ce que je pensais un peu. Alors quel choix ?
 
 
l'image01 en div, les liens en haut en liste float left


---------------
ploum ploum tralala
Reply

Marsh Posté le 10-07-2009 à 09:49:01    

Il est inutile de placer les liens et images dans des div. En effet, les deux peuvent aussi contenir les attributs "class" et "style".

Code :
  1. <img src="gnagna.jpg" style="ton style comme si c'était un div" />
  3. <a href="gnagna.html" style="ton style comme si c'était un div">kikoo</a>

Reply

Marsh Posté le 16-07-2009 à 18:09:56    

slt à tous et dsl pour cette absence !
 
Alors en suivant vos conseil, voici ce que j'obtiens http://www.mough-lee.fr/newsite.html . Mais bon je suis sur qu'on peut optimiser le codage :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Bienvenue sur mon site !</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.          <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  8.    </head>
  9.    <style type="text/css">
  10.       li {
  11.           display:inline;
  12.       }
  13.   img {
  14.   display: block;
  15.   }
  16.   </style>
  18.  
  19.    <body>
  20.      
  21.    <div id="gris">
  22.  
  24.  <ul style="float:right; margin-top:20px;">
  26.   <li><a href="page1.html" style ="margin-right:10px;">Lien</a></li>
  27.   <li><a href="page2.html"style ="margin-right:20px;">Lien</a></li>
  29.        </ul>
  31. <img src="03.jpg" style ="position:absolute; top:300px; left:400px;"/>
  35.   <ul style ="position: absolute; bottom: 0px;">
  36.   <li><a href="page3.html" style ="position: absolute; left:20px;">Lien</a></li>
  37.   <li><a href="page4.html" style ="position: absolute; left:60px;">Lien</a></li>
  38.   <li><a href="page5.html" style ="position: absolute; left:100px;">Lien</a></li>
  39.   <li><a href="page6.html" style ="position: absolute; left:140px;">Lien</a></li>
  40.   <li><a href="page7.html" style ="position: absolute; left:180px;">Lien</a></li>
  41.   <li><a href="page8.html" style ="position: absolute; left:220px;">Lien</a></li>
  42.   </ul>
  46. </div>
  47.  
  48.  
  49.  
  50.  
  51.    </body>
  52. </html>


 

Code :
  1. ody {
  2. background-color: black;
  3. height: 768px;
  4. width: 1024px;
  5. margin: auto;
  6.    margin-top: 20px;
  7.    margin-bottom: 20px;
  8. }
  10. #gris{
  12. background-image: url("gris.png" );
  13. height: 600px;
  14. width: 800px;
  15. margin: auto;
  16. margin-top:84px;
  17. background-repeat: no-repeat;
  19. }


 
c'est mieux là ? que puis-je améliorer comme codage ?


Message édité par Positiviste le 16-07-2009 à 18:10:38

---------------
ploum ploum tralala
Reply

Marsh Posté le 17-07-2009 à 09:21:37    

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Bienvenue sur mon site !</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.          <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  8.    </head>
  9.    <style type="text/css">
  10.       li {
  11.           display:inline;
  12.       }
  13.   img {
  14.   display: block;
  15.   }
  16.   </style>
  18.  
  19.    <body>
  20.      
  21.    <div id="gris">
  22.  
  24.  <ul style="float:right; margin-top:50px;">
  26.   <li><a href="page1.html" style ="margin-right:15px;">Contact</a></li>
  27.   <li><a href="page2.html" style ="margin-right:25px;">Lien</a></li>
  29.        </ul>
  31. <img src="image01.png" style ="position:absolute; top:400px; left:225px;"/>
  35.   <ul style="text-align:left; margin-top:510px;">
  36.   <li><a href="page3.html" style ="margin-right:95px;">Accueil</a></li>
  37.   <li><a href="page4.html" style ="margin-right:15px;">Portrait</a></li>
  38.   <li><a href="page5.html" style ="margin-right:15px;">Paysage</a></li>
  39.   <li><a href="page5.html" style ="margin-right:15px;">Noir et Blanc</a></li>
  40.   <li><a href="page6.html" style ="margin-right:15px;">Reportage</a></li>
  41.   <li><a href="page7.html" style ="margin-right:15px;">Architectures</a></li>
  42.   <li><a href="page8.html" style ="margin-right:100px;">Divers</a></li>
  43.   <li><a href="page8.html" style ="margin-right:5px;">Commandez des Tirages</a></li>
  44.   </ul>
  46. <h6 style="text-align:center; margin-top:40px;">Mough-Lee Création. Touts droits réservés
  47. Toutes les oeuvres présentes sur ce site appartienne à l'auteur sauf indications contraires.<br />
  48. Toutes reproductions sont prohibées sauf accord de l'auteur.</h6>
  49. </div>
  50.  
  51.  
  52.  
  53.  
  54.    </body>
  55. </html>


 

Code :
  1. body {
  2. background-color: black;
  3. height: 768px;
  4. width: 1024px;
  5. margin: auto;
  6.    margin-top: 20px;
  7.    margin-bottom: 20px;
  8. }
  10. #gris{
  12. background-image: url("gris03.png" );
  13. height: 600px;
  14. width: 800px;
  15. margin: auto;
  16. margin-top:84px;
  17. background-repeat: no-repeat;
  19. }
  21. a
  22. {
  23.    text-decoration: none;
  24.    color: black;
  25.    font-size: 12px;
  26. }
  28. a:hover
  29. {
  30.    color: #8C8C8C;
  31. }
  33. a:active
  34. {
  35.    color: #8C8C8C;
  36.  
  37. }
  40. a:focus
  41. {
  42. background-color: #8C8C8C;
  43.    text-decoration: underline;
  44.    color: white;
  45. }


 
un peu mieux la nan  le html ?


Message édité par Positiviste le 17-07-2009 à 09:22:26

---------------
ploum ploum tralala
Reply

Marsh Posté le 18-07-2009 à 17:57:00    

bonjour à tous,
 
j'ai un template hyper simple mais je pense que je l'ai mal codé car sur FF et opéra c'est pas bon mais ie7 çà passe :
 
http://www.mough-lee.fr/galerie_java/galerie  la page concernée
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Bienvenue sur mon site !</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.          <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  8.    </head>
  9.    <style type="text/css">
  10.       li {
  11.           display:inline;
  12.       }
  13.   img {
  14.   display: block;
  15.   }
  16.   </style>
  18.  
  19.    <body>
  20.      
  21.    <div id="gris">
  22.  
  24.  <ul style="float:right; margin-top:50px;">
  26.   <li><a href="page1.html" style ="margin-right:15px;">Contact</a></li>
  27.   <li><a href="page2.html" style ="margin-right:25px;">Lien</a></li>
  29.        </ul>
  31. <img src="image01.png" style ="position:absolute; top:400px; left:225px;"/>
  35.   <ul style="text-align:left; margin-top:510px;">
  36.   <li><a href="page3.html" style ="margin-right:95px;">Accueil</a></li>
  37.   <li><a href="portrait.html" style ="margin-right:15px;">Portrait</a></li>
  38.   <li><a href="page5.html" style ="margin-right:15px;">Paysage</a></li>
  39.   <li><a href="page5.html" style ="margin-right:15px;">Noir et Blanc</a></li>
  40.   <li><a href="page6.html" style ="margin-right:15px;">Reportage</a></li>
  41.   <li><a href="page7.html" style ="margin-right:15px;">Architectures</a></li>
  42.   <li><a href="page8.html" style ="margin-right:100px;">Divers</a></li>
  43.   <li><a href="page8.html" style ="margin-right:5px;">Commandez des Tirages</a></li>
  44.   </ul>
  46. <h6 style="text-align:center; margin-top:40px;">Mough-Lee Création &copy;. Touts droits réservés
  47. Toutes les oeuvres présentes sur ce site appartienne à l'auteur sauf indications contraires.<br />
  48. Toutes reproductions sont prohibées sauf accord de l'auteur.</h6>
  49. </div>
  50.  
  51.  
  52.  
  53.  
  54.    </body>
  55. </html>


 

Code :
  1. body {
  2. background-color: black;
  3. height: 768px;
  4. width: 1024px;
  5. margin: auto;
  6.    margin-top: 20px;
  7.    margin-bottom: 20px;
  8. }
  10. #gris{
  12. background-image: url("gris03.png" );
  13. height: 600px;
  14. width: 800px;
  15. margin: auto;
  16. margin-top:84px;
  17. background-repeat: no-repeat;
  19. }
  21. a
  22. {
  23.    text-decoration: none;
  24.    color: black;
  25.    font-size: 12px;
  26. }
  28. a:hover
  29. {
  30.    color: #8C8C8C;
  31. }
  33. a:active /* Quand le visiteur clique sur le lien */
  34. {
  35.    color: #8C8C8C;
  36.  
  37. }
  40. a:focus /* Quand le visiteur sélectionne le lien */
  41. {
  42.    background-color: #8C8C8C;
  43.    text-decoration: underline;
  44.    color: white;
  45. }


 
qu'en pensez-vous ?


---------------
ploum ploum tralala
Reply

Marsh Posté le 21-07-2009 à 13:21:10    

pq tu mets des CSS dans le HTML alors que tu as une feuille de style externe?
 
mets une ID à tes menus et une classe pour chaque LI si tu veux leur appliquer le même style à chaque fois


---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 21-07-2009 à 14:27:12    

C'est corrigé merci. Voila ce que çà donne pour le moment : http://www.mough-lee.fr/galerie_java/galerie.html
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Photographie numérique et argentique, book-photos</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.    <meta name="robots" content="index, follow" />
  7.   <meta name="keywords" content="Book, photographie noir et blanc, photo paysage, photo portrait, photo de voyage, photo reportage, tirage photo, traitement noir et blanc" />
  8.   <meta name="description" content=" Mough-lee's Pictures est un book de photographies argentiques et numériques. Ce book interactif est divisé en plusieurs rubriques : portrait, paygage, photo de voyage, reportage photographique." />
  9.      
  10.    <link href="design/css/style_ff.css" rel="stylesheet" type="text/css" />
  11. <!--[if IE]>
  12. <link href="design/css/style_ie.css" rel="stylesheet" type="text/css" />
  13. <![endif]-->
  15.    </head>
  16.  
  19.    <body>
  20.      
  21.  
  22.    <div id="gris">
  25.  <ul class="haut">
  27.   <li class ="haut"><a href="mailto:adventure@mough-lee.fr" title="contact">Contact</a></li>
  28.   <li class ="haut"><a href="galerie\lien.html" title="ressources">lien</a></li>
  30.         </ul>
  32. <p><img src="design/images/image01.png" alt="Triptyque" title="Triptyque book-photo" id="triptyque" /></p>
  36.   <ul class="bas">
  37.   <li class ="bas"><a href="galerie.html" title="Page d'accueil">Accueil</a></li>
  38.   <li class ="bas"><a href="galerie/portrait.html" title="Photo de portraits">Portrait</a></li>
  39.   <li class ="bas"><a href="galerie/paysage.html" title="Photos de paysages">Paysage</a></li>
  40.   <li class ="bas"><a href="galerie/nb.html" title="Photos en noir et blanc">Noir et Blanc</a></li>
  41.   <li class ="bas"><a href="galerie/reportage.html" title="Photos de reportages">Reportage</a></li>
  42.   <li class ="bas"><a href="galerie/architecture.html" title="Photos d'architectures">Architecture</a></li>
  43.   <li class ="bas"><a href="galerie/divers.html" title="Photos diverses">Divers</a></li>
  44.   <li class ="bas"><a href="galerie/voyage.html" title="Photos de voyages">Voyage</a></li>
  45.   <li class ="bas"><a href="galerie/tirage.html" title="Pour commander des tirages">Tirages</a></li>
  46.   </ul>
  48. </div>
  50. <div id="foot">
  51. <h6>Mough-Lee Création &copy;. Touts droits réservés
  52. Toutes les oeuvres présentes sur ce site appartiennent à l'auteur sauf indications contraires.<br />
  53. Toutes reproductions sont prohibées sauf accord de l'auteur.</h6>
  55. <p>
  56.     <a href="http://validator.w3.org/check?uri=referer">
  57. <img src="http://www.w3.org/Icons/valid-xhtml10"
  58.      alt="Valid XHTML 1.0 Strict"
  59.   style="border:0;width:88px;height:31px" /></a>
  62.     <a href="http://jigsaw.w3.org/css-validator/check/referer">
  63.         <img style="border:0;width:88px;height:31px"
  64.             src="http://jigsaw.w3.org/css-validator/images/vcss"
  65.             alt="CSS Valide !" />
  66.     </a>
  67. </p>
  69. </div>
  70.  
  71.    
  72.  
  73.    </body>
  74. </html>


 

Code :
  1. body {
  2. background-color: black;
  3. text-align:center;
  4. margin-top:50px;
  5. margin-bottom:50px;
  6. padding:0px;
  8. }
  10. #gris{
  12. background-image: url("../images/gris03.png" );
  13. height: 600px;
  14. width: 800px;
  15. background-repeat: no-repeat;
  16. margin:auto;
  17. text-align:left;
  19. }
  21. #gris02{
  23. background-image: url("../images/gris04.png" );
  24. height: 925px;
  25. width: 800px;
  26. background-repeat: no-repeat;
  27. margin:auto;
  28. text-align:left;
  30. }
  32. ul {
  33. padding:0;
  34. margin:0;
  35. list-style-type:none;
  36. }
  38. li {
  39. float:left; /*pour IE*/
  40. margin-right:15px;
  41. width:65px;
  42. }
  44. ul li a {
  45. display:block;
  46. float:left;
  47. width:65px;
  48. line-height:21px; /*hauteur de l'image de fond*/
  49. background:none;
  50. text-decoration:none;
  51. text-align:center;
  53. }
  55. ul li a:hover {
  56. background:url(../images/bouton_01.png) no-repeat;
  57. text-decoration:none;
  59. } 
  61. ul li a:focus {
  62. background:url(../images/bouton_on.png) no-repeat;
  63. text-decoration:none;
  64. outline: none;
  65. }
  67. ul li a:active{
  68. background:url(../images/bouton_on.png) no-repeat;
  69. text-decoration:none;
  70. outline: none;
  71. }
  74. ul.haut{
  76. float:right;
  77. margin-top:50px;
  78.   }
  79.  
  80. ul.bas{
  82. text-align:left;
  83. margin-top:373px;
  84. margin-left:50px;
  85.   }
  86.  
  87.  
  88. #triptyque {
  90.   position:relative;
  91.   top:290px;
  92.   left: 110px;
  93.   }
  95. a
  96. {
  97.    text-decoration: none;
  98.    font-size: 12px;
  99. }
  101. a:active {
  102. text-decoration:none;
  103. outline: none;
  104. }
  106. a:focus {
  107. text-decoration:none;
  108. outline: none;
  109. }
  111. h6 {
  113. text-align:center;
  114. color: white;
  115. }


Message édité par Positiviste le 21-07-2009 à 14:28:58

---------------
ploum ploum tralala
Reply

Marsh Posté le 22-07-2009 à 03:39:55    

Hello, quelques petits conseils d'optimisation,
dans ta balise <head> la balise <meta http-equiv="Content-Type"..  c'est a mettre en premier avant le <title>
les autre balise <meta> servent pas a grand chose a par pour les moteur de recherche que personne n'utilise,

 

pour le xml:lang="fr", enleve le c'est pour un autre DTD, pas sur qu'il ai le namespace.

 

pour le CSS, si il est bien fait t'as pa besoin d'en faire 2, (test sous webkit aussi ;) )

 


dans le <body>

 

les class  sur les '<li>' servent a rien, puisque tu peu les recuper en CSS comme ca :
#haut li{  }

 


la balise <h6> sert a rien, change le style simplement avec la <div>
(tu peu afficher tout les H..., en cochant "show outline" sur le site du w3c

 


pour le CSS

 

tu peux grouper les margin  au lieu de
margin-top:50px;
margin-bottom:50px;

 

t'a
margin:50px 0;  ou margin:50px 0 50px 0;

 

voir pour ton cas au lieu de fair un center qui sert a rien lui aussi (et tu pourras virer les text-align:left;),
c'est
margin:50px auto;

 

idem pour background tu peu regrouper les element;

 

pour les lien:

 

tu peu juste faire

 

a{
}

 

a:hover{
}

 

sachant que chaque position herite de "a",
donc inutile de dupliquer genre "text-decoration", puisque que tu la mis dans le "a"

 

(ducoup pareil pour les coup des <li> plus haut)

 


pour le fond de tes menu pourquoi ne pas avoir simplement mis une couleur de fond, au lieu d'avoir fais des bandes sur ton image ?

 

change la police aussi avec  "font-family" dans le body (genre sergio, tahoma, trebuchet.......  ou arial tout simplement)

 

et si tu te sent chaud, bosse en UTF-8   ;)
 

 



Message édité par stealth35 le 22-07-2009 à 04:19:01
Reply

Marsh Posté le 22-07-2009 à 03:39:55   

Reply

Marsh Posté le 22-07-2009 à 11:11:28    

oh pinaise, la vache. Cte claque. Merc merci je m'y met de suite §§§§ :jap:  :jap:


Message édité par Positiviste le 22-07-2009 à 11:13:32

---------------
ploum ploum tralala
Reply

Marsh Posté le 22-07-2009 à 12:10:59    

Salut,
 
rajoute lang="fr" à côté de xml:lang="fr" : les outils qui ont besoin de cette indication de la langue de la page ne comprennent que lang, pas xml:lang :/ (mais garde les deux tant que tu as un doctype xhtml)
 
+1 pour h6 : les éléments ne doivent pas être utilisés dans le code HTML en fonction de leur aspect ("tiens h6 c'est petit, je vais utiliser ça" ) mais doivent être cohérents: un seul h1 = titre de page ou bien un h1 par "section" et à l'intérieur des h2 sous-titres, des h3 sous-sous-titres si besoin est mais jamais un h3 après un h1 s'il n'y a pas un h2 entre les deux (on passe pas de 3. à 3.1.1. sans qu'il y ait un 3.1 hu?)
Et tu les styles en CSS comme tu le souhaites, deux h2 dans une page n'ayant pas forcément le même style (vive la cascade CSS et les id/class)

Reply

Marsh Posté le 22-07-2009 à 15:41:07    

exact phosphoreloaded,  c'est les 2 sachant que lang est juste rajouté pour la compatibilité, (suffis de regarder dans de dtd)
 
sinon je te conseilerai plus de fair ca aussi
 

<ul id="haut" class="menu">
  <li><a href="mailto:adventure@mough-lee.fr" title="contact">Contact</a></li>
  <li><a href="galerie\lien.html" title="ressources">lien</a></li>
        </ul>
<p><img src="design/images/image01.png" alt="Triptyque" title="Triptyque book-photo" id="triptyque" /></p>
  <ul id="bas" class="menu">
  <li><a href="galerie.html" title="Page d'accueil">Accueil</a></li>
  <li><a href="galerie/portrait.html" title="Photo de portraits">Portrait</a></li>
  <li><a href="galerie/paysage.html" title="Photos de paysages">Paysage</a></li>
  <li><a href="galerie/nb.html" title="Photos en noir et blanc">Noir et Blanc</a></li>
  <li><a href="galerie/reportage.html" title="Photos de reportages">Reportage</a></li>
  <li><a href="galerie/architecture.html" title="Photos d'architectures">Architecture</a></li>
  <li><a href="galerie/divers.html" title="Photos diverses">Divers</a></li>
  <li><a href="galerie/voyage.html" title="Photos de voyages">Voyage</a></li>
  <li><a href="galerie/tirage.html" title="Pour commander des tirages">Tirages</a></li>
  </ul>

Message cité 1 fois
Message édité par stealth35 le 22-07-2009 à 15:41:20
Reply

Marsh Posté le 22-07-2009 à 20:07:05    

lang et xml:lang> Je précisais ça parce que les lecteurs d'écran ignorent xml:lang :/ (et pour les moteurs de recherche, y a des risques qu'ils fassent pareil)

Reply

Marsh Posté le 22-07-2009 à 20:51:47    

je suis d'accord avec toi, c'est moi qui mettais trompée.

Reply

Marsh Posté le 23-07-2009 à 07:32:18    

ok merci, j'ai tout pris en compte sauf :
 

stealth35 a écrit :


 

<ul id="haut" class="menu">
  <li><a href="mailto:adventure@mough-lee.fr" title="contact">Contact</a></li>
  <li><a href="galerie\lien.html" title="ressources">lien</a></li>
        </ul>
<p><img src="design/images/image01.png" alt="Triptyque" title="Triptyque book-photo" id="triptyque" /></p>
  <ul id="bas" class="menu">
  <li><a href="galerie.html" title="Page d'accueil">Accueil</a></li>
  <li><a href="galerie/portrait.html" title="Photo de portraits">Portrait</a></li>
  <li><a href="galerie/paysage.html" title="Photos de paysages">Paysage</a></li>
  <li><a href="galerie/nb.html" title="Photos en noir et blanc">Noir et Blanc</a></li>
  <li><a href="galerie/reportage.html" title="Photos de reportages">Reportage</a></li>
  <li><a href="galerie/architecture.html" title="Photos d'architectures">Architecture</a></li>
  <li><a href="galerie/divers.html" title="Photos diverses">Divers</a></li>
  <li><a href="galerie/voyage.html" title="Photos de voyages">Voyage</a></li>
  <li><a href="galerie/tirage.html" title="Pour commander des tirages">Tirages</a></li>
  </ul>



 
car j'ai pas saisie ce que çà apporte et m'apporterait de mettre un id + un class ds <ul> alors qu'à la base j'ai déjà un class.


Message édité par Positiviste le 23-07-2009 à 07:34:07

---------------
ploum ploum tralala
Reply

Marsh Posté le 23-07-2009 à 08:44:52    

Bon j'ai encore un souci.
 
C'est l'utilisation d'une seule feuille de style. J'y arrive pas il y a un decalage sous FF par rapport à IE ds la postion des listes/liens. et de l'image. Le seul truc que je vois c'est fair une 2ème CSS en changeant juste la valeur margin-top: de
 
 
ul.haut{
 
text-align:right;
margin-top:50px;
   }
   
ul.bas{
 
text-align:left;
margin-top:373px;
margin-left:50px;
   }  
 
 
Comment y remedier ?  
 

Code :
  1. body {
  2. background-color: black;
  3. margin:50px auto;
  4. padding:0px;
  5. font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
  6. font-size: 12px;
  7. }
  9. #gris{
  11. background-image: url("../images/gris03.png" );
  12. background-repeat: no-repeat;
  13. height: 600px;
  14. width: 800px;
  15. margin:auto;
  16. }
  18. #gris02{
  20. background-image: url("../images/gris04.png" );
  21. height: 925px;
  22. width: 800px;
  23. background-repeat: no-repeat;
  24. margin:auto;
  26. }
  28. ul {
  29. padding:0;
  30. margin:0;
  31. list-style-type:none;
  32. }
  34. li {
  35. float:left; /*pour IE*/
  36. margin-right:12px;
  37. width:65px;
  38. }
  40. ul li a {
  41. display:block;
  42. float:left;
  43. width:65px;
  44. line-height:21px; /*hauteur de l'image de fond*/
  45. background:none;
  46. text-decoration:none;
  47. text-align:center;
  49. }
  51. ul li a:hover {
  52. background:url(../images/bouton_01.png) no-repeat;
  54. } 
  56. ul li a:focus {
  57. background:url(../images/bouton_on.png) no-repeat;
  58. outline: none;
  59. }
  61. ul li a:active{
  62. background:url(../images/bouton_on.png) no-repeat;
  63. outline: none;
  64. }
  67. ul.haut{
  69. text-align:right;
  70. margin-top:50px;
  71.   }
  72.  
  73. ul.bas{
  75. text-align:left;
  76. margin-top:373px;
  77. margin-left:50px;
  78.   }
  79.  
  80.  
  81. #triptyque {
  83.   position:relative;
  84.   top:290px;
  85.   left: 110px;
  86.   }
  88. a
  89. {
  90.    text-decoration: none;
  91.    font-size: 11px;
  92.    color: black;
  93. }
  95. a:active {
  96. }
  100. #foot {
  102. text-align:center;
  103. color: white;
  104. font-size: 10px;
  105. }


Message édité par Positiviste le 23-07-2009 à 08:45:25

---------------
ploum ploum tralala
Reply

Marsh Posté le 23-07-2009 à 20:32:01    

aaaaaaaaaaaah  , du Comic Sans MS (hihi).
je te ai dis pour t menu t'aurai pas du faire la barre grise sur l'image, maus plutot faire la barre grise avec le CSS t'aurai pas de probleme de décalage  

Reply

Marsh Posté le 23-07-2009 à 22:55:09    

http://img521.imageshack.us/img521/8175/nocomicsans.gif
 
 
 
 :whistle:


Message édité par tompouss le 23-07-2009 à 22:56:05

---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 23-07-2009 à 23:24:03    

pas bien comic sans ms ?


---------------
ploum ploum tralala
Reply

Marsh Posté le 24-07-2009 à 00:11:13    

nan pas bien du tout


---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 24-07-2009 à 13:16:07    

pourquoi ?


---------------
ploum ploum tralala
Reply

Marsh Posté le 24-07-2009 à 14:14:51    

Comic Sans MS était une police qui allait bien avec le mode BD de Microsoft Chat. Mais surtout pas pour le texte normal d'un site sérieux.
 
La typographie faisant partie du design, utiliser Comic donne tout de suite un côté gamin et pas sérieux. Comme si t'avais 12 ans et que c'était ton premier site.

Reply

Marsh Posté le 24-07-2009 à 14:29:49    

merde c'est cqu'on me dit tout le temps. Ceci expliquerait cela.
 
Bin enfait je trouvais cette écriture "douce" du à ses courbes et pas morne, d'un pédant classicisme bien qu'elle fut un "classic" . Pas d'empattement je souhaite. Verdana alors p-ê ?. De toute façon c'est pas un site pro et jme prend pas (encore) au sérieux. J'ai pas vraiment de quoi de toute façon.
 
 
stealth35---------> "je te ai dis pour t menu t'aurai pas du faire la barre grise sur l'image, maus plutot faire la barre grise avec le CSS t'aurai pas de probleme de décalage "
 
Je viens de piger. Merci. Je regarde çà ce w-e. merci  
 
 
merci des tuyaux


---------------
ploum ploum tralala
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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