Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1829 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1904264
Positivist​e
Reaction Apathique
Posté le 10-07-2009 à 08:56:34  profilanswer
 

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
mood
Publicité
Posté le 10-07-2009 à 08:56:34  profilanswer
 

n°1904269
FlorentG
Unité de Masse
Posté le 10-07-2009 à 09:14:19  profilanswer
 

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
n°1904280
Positivist​e
Reaction Apathique
Posté le 10-07-2009 à 09:42:49  profilanswer
 

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
n°1904283
Pascal le ​nain
Posté le 10-07-2009 à 09:49:01  profilanswer
 

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>

n°1905907
Positivist​e
Reaction Apathique
Posté le 16-07-2009 à 18:09:56  profilanswer
 

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
n°1906037
Positivist​e
Reaction Apathique
Posté le 17-07-2009 à 09:21:37  profilanswer
 

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
n°1906343
Positivist​e
Reaction Apathique
Posté le 18-07-2009 à 17:57:00  profilanswer
 

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
n°1907187
tompouss
Petit chat
Posté le 21-07-2009 à 13:21:10  profilanswer
 

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
n°1907232
Positivist​e
Reaction Apathique
Posté le 21-07-2009 à 14:27:12  profilanswer
 

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
n°1907478
stealth35
Posté le 22-07-2009 à 03:39:55  profilanswer
 

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
mood
Publicité
Posté le 22-07-2009 à 03:39:55  profilanswer
 

n°1907554
Positivist​e
Reaction Apathique
Posté le 22-07-2009 à 11:11:28  profilanswer
 

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
n°1907579
phosphorel​oaded
Posté le 22-07-2009 à 12:10:59  profilanswer
 

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)

n°1907671
stealth35
Posté le 22-07-2009 à 15:41:07  profilanswer
 

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
n°1907739
phosphorel​oaded
Posté le 22-07-2009 à 20:07:05  profilanswer
 

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)

n°1907754
stealth35
Posté le 22-07-2009 à 20:51:47  profilanswer
 

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

n°1907814
Positivist​e
Reaction Apathique
Posté le 23-07-2009 à 07:32:18  profilanswer
 

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
n°1907825
Positivist​e
Reaction Apathique
Posté le 23-07-2009 à 08:44:52  profilanswer
 

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
n°1908109
stealth35
Posté le 23-07-2009 à 20:32:01  profilanswer
 

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  

n°1908130
tompouss
Petit chat
Posté le 23-07-2009 à 22:55:09  profilanswer
 

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
n°1908132
Positivist​e
Reaction Apathique
Posté le 23-07-2009 à 23:24:03  profilanswer
 

pas bien comic sans ms ?


---------------
ploum ploum tralala
n°1908137
tompouss
Petit chat
Posté le 24-07-2009 à 00:11:13  profilanswer
 

nan pas bien du tout


---------------
collectionneur de pâtes thermiques
n°1908275
Positivist​e
Reaction Apathique
Posté le 24-07-2009 à 13:16:07  profilanswer
 

pourquoi ?


---------------
ploum ploum tralala
n°1908299
FlorentG
Unité de Masse
Posté le 24-07-2009 à 14:14:51  profilanswer
 

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.

n°1908308
Positivist​e
Reaction Apathique
Posté le 24-07-2009 à 14:29:49  profilanswer
 

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
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Ecrire une page html en vbs[CSS] Positionner texte par rapport element precedent
[C#] Convertir caractères spéciaux HTMLFormulaire HTML & JS : un bouton pour changer tous les radios
Coder plusieurs fenêtres sous QtProblème intégration menu en flash dans une page HTML
Problème d'alignement CSS dans les balisesGénérer une page HTML à partir de formulaire PHP
XML + XSL vers tableau HTML(Novice) Frameset et incompatibilité IE toutes versions
Plus de sujets relatifs à : quel façon coder ce template épuré en CSS et html ?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.196 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR