débutant en html à besoin de quelque renseignements

débutant en html à besoin de quelque renseignements - HTML/CSS - Programmation

Marsh Posté le 04-03-2006 à 12:07:48    

Bonjours, je viens tout juste de me mettre à "essayer" de réaliser un petit site web et j'ai déjà quelques problèmes :sweat: .
 
Alors déjà je voudrais utiliser les feuille de styles avec le css. Par exemple pour le logo j'ai fais:
 
dans le "format.css":
 
#entete {  
background-color:transparent;
width:100%;
height:10%;
float:left;
margin-left:0px;
margin-top:0px;
}
 
et dans le html:
 
<div id="entete"> <img src=img/entete.jpg alt="Logo title="Logo" >
</div>
 
 
J'ai deux petites questions, je voudrais qu'il n'y ai aucune marges de chaques coté du logo, et pourtant même après avoir rajouté "margin-left et margin top" rien n'a changé, il reste une marge.
 
et ensuite j'ai vu que l'on pouvait mettre l'adresse de l'image dans le css pour plus de souplesse mais j'ai essayé de rajouter la ligne background-image: url(".....jpg" ) en enlevant l'adresse du document .html mais dans le navigateur rien ne s'affiche :??: .
 
voila :hello:


Message édité par Profil supprimé le 04-03-2006 à 12:11:09
Reply

Marsh Posté le 04-03-2006 à 12:07:48   

Reply

Marsh Posté le 04-03-2006 à 12:14:18    

Met au début de ton CSS
 
 
* {
margin:0;
padding:0;
}
 
Comme ça tu vire à tout les éléments les marges spécifié d'origine ;)

Reply

Marsh Posté le 04-03-2006 à 12:16:58    

merci ;)


Message édité par Profil supprimé le 04-03-2006 à 12:17:05
Reply

Marsh Posté le 04-03-2006 à 12:29:30    

sinon pour définir la taille global de ma page, il faut bien ajouter dans le css  :heink:  
 
html,body {
background-color : #FFFF88;  
width:100%;
height:100%;
}
 
ensuite les images contenu dans le body seront dimensionner par rapport à ce bout de code?

Reply

Marsh Posté le 04-03-2006 à 13:59:58    

up, et sinon maintenant j'ai un marge à droite, comment l'enlever :whistle:

Reply

Marsh Posté le 04-03-2006 à 14:34:06    

c'est encore moi :ange: .
 
Bon voilà, mis à part les petits problèmes évoqués ci-dessus, je suis content de mon avancé. Cependant, je vérifiais toujours la mise en page avec IE et lorsque j'ai essayé avec Firefox  :fou: , toute la mise en page est désordonnée. Pourriez vous m'aider à trouver où ca coince. merci
 

Code :
  1. html,body {
  2. background-color : #FFFF88;
  3. }
  4. * {
  5. margin:0;
  6. padding:0;
  7. }
  8. p,ul,li,td {
  9. font-size : 100%;
  10. font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
  11. color : #000000;
  12. background-color : #FFFF33;
  13. }
  14. h1 {
  15. font-size : 100%;
  16. font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
  17. color : #000000;
  18. text-align: center;
  19. }
  20. h2 {
  21. font-size : 150%;
  22. font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
  23. color : #000000;
  24. padding-right:50px;
  25. }
  26. #entete {
  27. background-color:transparent;
  28. width:101.75%;
  29. height:10%;
  30. float:left;
  31. }
  32. #menu {
  33.     height: 40px;
  34.     width: 996px;
  35.     border: solid #000 2px;
  36.     background-image: url("img/menu.jpg" )
  37. }
  38. #menu ul {
  39.     margin: 0px;
  40.     padding: 0px;
  41.     font-family: Arial, Helvetica, sans-serif;
  42.     font-size: 14;
  43.     color: #FFF;
  44.     line-height: 40px;
  45.     white-space: nowrap;
  46. }
  47. #menu li {
  48.     list-style-type: none;
  49.     display:inline;
  50. }
  51. #menu li a {
  52.     text-decoration: none;
  53.     padding: 7px 10px;
  54.     color: #000000;
  55. }
  56. #grille {
  57. background-color:transparent;
  58. width:1000px;
  59. height:1000px;
  60. float:left;
  61. background-image: url("img/grille.jpg" )
  62. }
  63. #bas {
  64. background-color:transparent;
  65. width:1000px;
  66. height:50px;
  67. float left;
  68. background-image: url("img/bas.jpg" )
  69. }


 
 
et pour le fichier html
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title></title>
  6. <link href="format.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div id="entete"> <img src=img/entete.jpg alt="Logo title="Logo" >
  10. </div><div id="menu">
  11. <ul>
  12. <li><a href="acceuil.html" title="Page d'accueil" >Accueil</a> </li>
  13. &nbsp &nbsp &nbsp &nbsp &nbsp
  14. <li><a href="top.html">Top</a></li>
  15. &nbsp
  16. <li><a href="faq.html">FAQ</a></li>
  17. &nbsp
  18. <li><a href="contact.html">Contact</a></li>
  19. </ul>
  20. </div></div><div id="grille">
  21. </div><div id="bas">
  22. </div>
  23. </body>
  24. </html>

Reply

Marsh Posté le 04-03-2006 à 17:54:44    

up :hello:

Reply

Marsh Posté le 04-03-2006 à 18:58:34    

please :ange:

Reply

Marsh Posté le 04-03-2006 à 20:12:36    

[updéguisé]pas beaucoup de réponses! j'aurai beina aimer t'aider mais je ne connais pas la réponse![/updéguisé]

Reply

Marsh Posté le 05-03-2006 à 11:42:49    

merci quand même  :D

Reply

Marsh Posté le 05-03-2006 à 11:42:49   

Reply

Marsh Posté le 05-03-2006 à 15:47:28    

Manquent les guillements de fermeture après "Logo", ligne 10.
 
Pour l'espacement entre les <li>, à mon avis tu devrais plutôt définir un "margin" (left ou right) dans le CSS.
 
 
Pour la question principale, je sais pas, faudrait regarder en détail :D Proablement une histoire de boites.

Reply

Marsh Posté le 05-03-2006 à 16:59:04    

je prend note ;)

Reply

Marsh Posté le 05-03-2006 à 18:56:00    

1. Tu as un </div> fermant de trop
 
2. On écrit &nbsp; avec un ; à la fin. Mais de toute façon on utilise pas de &nbsp; pour faire de la présentation, donc tu les vires.
 
3. Pourquoi mettre #entete en flottant ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-03-2006 à 16:51:40    

ok ;)  
 
Sinon lorsque l'on utilise la fonction map, il se créer une bordure bleu autour de l'image. Comment l'enlever?

Reply

Marsh Posté le 12-03-2006 à 19:38:42    

border:none;

Reply

Marsh Posté le 12-03-2006 à 19:46:59    

merci mais ca c'est si l'image viens du css :??: . Moi je l'ai insérée dans ma page html par <img =src.......

Reply

Marsh Posté le 12-03-2006 à 19:54:32    

dans ton css tu defini la balise image avec attributs border:none;
 
IMG {
    border:none;
}
 
Si tu veux en savoir un peu plus sur les css je t'invite à aller sur ce site :http://www.alsacreations.com


Message édité par zebestt le 12-03-2006 à 19:58:43
Reply

Marsh Posté le 12-03-2006 à 19:59:57    

ok merci, je vais aller y faire un tour

Reply

Marsh Posté le 12-03-2006 à 20:13:50    


 
 :o ça réponse qui passe trés mal ;)
 
donc fait comme conseillé...informe toi bien sur alsa de comment marche une page web  :ouch:  ;)

Reply

Marsh Posté le 12-03-2006 à 20:16:02    

xtof_83 a écrit :

:o ça réponse qui passe trés mal ;)
 
donc fait comme conseillé...informe toi bien sur alsa de comment marche une page web  :ouch:  ;)


Oui mais on est tous passé par là  :wahoo:  n'est-ce pas :)

Reply

Marsh Posté le 12-03-2006 à 20:42:11    

zebestt a écrit :

Oui mais on est tous passé par là  :wahoo:  n'est-ce pas :)


 
 
 :ange: heu je vois pas de quoi tu parles  :lol:

Reply

Marsh Posté le 12-03-2006 à 21:41:45    

idem mdrr xDD


---------------
A LIRE     Tout en surfant sur HARDWARE ECOUTE DLA BONNE MUSIC Clic ici tu écoutera DIRECTEMENT et là pour aller sur site de la Web radio
Reply

Marsh Posté le 21-03-2006 à 20:50:56    

salut, alors voilà j'ai un dernier petit problème. Dans le css, j'ai mis:
 

Code :
  1. body {
  2. background-color:#e1e1ff;
  3. margin:0px;
  4. padding:0px;
  5. text-align:left;
  6. wight:100%;
  7. heidth:100%;
  8. }

 
 
En faite, je voudrais que quelque soit la résolution employé par le visiteur, la page soit centrée.
 
merci

Reply

Marsh Posté le 22-03-2006 à 00:22:56    

Il faut que tu utilises :
 

Code :
  1. body
  2. {
  3. margin-left:auto;
  4. margin-right:auto;
  5. width:px;
  6. }


 
Tu dois définir une taille après width, en px ou %
 
Quelques remarques cependant :
 
-Range ton code, c'est assez fouilli. Utilises une tabulation par couche de contenant :
 

Code :
  1. <body>
  2. <div>
  3.  <div>
  4.  </div>
  5. </div>
  6. </body>


 
 
-Tu définis les Hx et pourtant tu ne t'en sers pas! Ils permettent de structurer la sémantique de la page. Tu dois utiliser le h1 autour de ton logo puisque tu n'as aucun gros titre pour ta page par la suite.
 
Donc à la place de ton "entete", et à la place de ton alt, mets alt="Bienvenue_blabla"
 
 
-Utilise un alt explicite pour tes images.


Message édité par Shinuza le 22-03-2006 à 00:42:56
Reply

Marsh Posté le 22-03-2006 à 17:55:04    

Merci pour tes conseils shinuza. Le problème de résoltution est résolu et j'ai mieux organiser le code html  ;)

Reply

Marsh Posté le 22-03-2006 à 19:02:03    

No pro, keep the Internet clean


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 23-03-2006 à 19:07:42    

Bon allez jvai vais encore (ce devrait bientôt etre fini). Je voulais savoir quel étais l'avantage de valider son site par W3C? Parce qu'avec un tutorial de net j'avais mis au début du doc html:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>


 
mais en faite j'ai pas l'impression d'avoir fait du xhtml. J'ai fais mon site avec les balise normal du html... En plus j'ai essayé de tester la validation d'une page sur le site de W3C et il m'a trouvé 50 fautes :whistle:

Reply

Marsh Posté le 23-03-2006 à 20:02:43    

Ben et alors 50 fautes c'est pas grave corrige tout ça vite fais ;)
 
Sinon change de doctype

Reply

Marsh Posté le 23-03-2006 à 20:39:05    

xtof_83 a écrit :

Ben et alors 50 fautes c'est pas grave corrige tout ça vite fais ;)
 
Sinon change de doctype


 
 
Pourquoi et par quoi :(

Reply

Marsh Posté le 23-03-2006 à 20:51:03    

Ben si tu veux pas faire du xhtml, fait du html 4.1...
 
et si tu veux pas du strict fais du transitional
 
c'est toi qui choisi

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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