nouveaux site, beaucoup de probleme... un peu d'aide serai la bienvenu

nouveaux site, beaucoup de probleme... un peu d'aide serai la bienvenu - HTML/CSS - Programmation

Marsh Posté le 28-01-2007 à 09:59:44    

salut,
je viens de me lancer dans le html et le css; j'ai donc crée un site web ( http://idle.levrai.com/ ) et j'ai pas mal de probleme ( ce qui me semble normal pour un debutant ) .
1) mon site s'affiche "correctement" avec firefox mais avec internet explorer il est tout modifier
2) je n'arrive pas a "center" mon site ; il est decaler vers la droite, je ne comprend pas !
merci de m'aider
 
css :

Citation :


body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-color: #b0c3de;
}
#en_tete
{
margin-left: auto;
   width: 700px;
   height: 200px;
   left: 150px;
   background-image: url("banniere.png" );
   background-repeat: no-repeat;
   margin-bottom: 20px;
}
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
{
margin-left : auto;
top: 180px;
left: 150px;
z-index: 100;
width: 100%;
position: absolute;
right: 50%
}
#menu dl {
float: left;
width: 12em;
margin: 10px;
}
#menu dt {
 
text-align: center;
font-weight: bold;
background: #fbe2f4;
border: 5px outset #feffa2;
}
#menu dd {
border: 5px outset #feffa2;
display:none
}
#menu li {
text-align: center;
background: #cdf6f7;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
a  
{text-decoration: none;
color: black;
color: #222;
}
 
#corps
{
   width: 800px;
   margin-left: 20px;
   margin-bottom: 20px;
   padding: 5px;
   color: #5b2c76;
   background-color: #f0f8ff;
   background-repeat: repeat-x;
   border: 5px outset #feffa2;  
}
a
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   color: red; /* Les liens seront en rouge au lieu de bleu */
   font-style: italic; /* Les liens seront en italique  */
}
#corps h1
{
   color: #7c7915;
   text-align: center;
   font-family: "Comic Sans MS", "Times New Roman", Times, serif;
}
#corps h2
{
   font-family: "Comic Sans MS", "Times New Roman", Times, serif;
   color: #6d0c82;
   text-align: center;
}
 
#pied_de_page
{
   padding: 0px;
   margin-left: 100px;
   margin-bottom: 20px;
   text-align: center;
   color: red;
   background-color: #f0f8ff;
   background-repeat: repeat-x;
   font-family: "Comic Sans MS", "Times New Roman", Times, serif;
   border: 5px outset #feffa2;
}
a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
   position: center;
}
#news
{
text-align: center;
vertical-align: middle;
}


 
html de l'index :

Citation :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>le site de Gui et Hayd</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
//window.onload=montre;  supprimé
//active la feuille de style dynamique
document.getElementsByTagName("link" )[0].href="dynmenu.css"
 
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
 
 
 
<body>
                               
 
 
  <div id="en_tete">
   
 
   <title> CSS externe </title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
       <link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="design.css" href="sansJS.css" href="dynmenu.css" />
   
 
     
  </div>
   
                                       
   
 <div id="menu">
 <dl>
  <dt onmouseover="javascript:montre();"><a href="accueil.html">Accueil</a></dt>
 
 </dl>
 
 <dl>    
  <dt onmouseover="javascript:montre('smenu1');">Information</dt>
   <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
    <ul>
     <li><a href="actualite.html">Actualité</a></li>
     <li><a href="archives.html">Archives</a></li>
     <li><a href="humour.html">Humour</a></li>
     <li><a href="moi.html">Moi</a></li>
     
     
    </ul>
 
   </dd>
 </dl>
 
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu2');">Graphisme</dt>
   <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
    <ul>
     <li><a href="graphisme.html">Infographie</a></li>
     <li><a href="dessin.html">Dessin</a></li>
 
     
    </ul>
   </dd>
 </dl>
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu3');">Téléchargement</dt>
 
   <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
 
    <ul>
     <li><a href="logiciel.html">Logiciel</a></li>
     <li><a href="musique.html">Musique</a></li>
     <li><a href="video.html">Vidéo</a></li>
     
 
    </ul>
   </dd>
 </dl>
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu4');">Contact</dt>
 
   <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
 
    <ul>
     <li><a href="achat.html">Achat</a></li>
     <li><a href="gagner de l'argent.html">Gagner de l'argent</a></li>
     <li><a href="pub.html">Pub</a></li>
     
 
    </ul>
   </dd>
 </dl>
 
 
 
 
</div>
     
                                     
  <div id="corps">
 
           
   
 <br>
 <br>
 <br>
 <br>
 
    <p>
 
   
   <img src="bienvenue.jpg" alt="bienvenue" />
</p>
 
 
 He he he ben voila !! il est en ligne !!! cela c'est fait plus vite que je ne le pensait !!! donc il va falloir progresser encore plus en programmation pour vite remplir ce site....
               
   
 
<p> Envoie moi vos création que se soit un dessin, un vidéo, une musique... je le mettrai volontier sur mon site </p>
 
 
 
<p> N'hesiter pas à m'envoie un mail pour critiquer ce site afin que je l'améliore: idle.gui@gmail.com ou en clikant juste en dessous... là où sa clignote :d </p>
 
<br>
<p> ps : se site n'est pas du tout fait pour internet explorer !! si vous voulez voir toutes les capacitées de ce site utilisé firefox </p>Vous pouvez le télécharger dans la partie téléchargement !!! (originale  ...) </p>  </br>
 
 
 
 </div>
 
         
  <div id="pied_de_page">  
   
Pour contacter le webmaster, <a href="mailto:idle.gui@gmail.com">cliquez ici</a>  
<p> <embed src="Mono - Are You There.wav" loop="-1" autostart="true" height="50"> </p>
 
   
  </div>
   
  </body>
</html>


 
merci de votre aide  :p

Reply

Marsh Posté le 28-01-2007 à 09:59:44   

Reply

Marsh Posté le 30-01-2007 à 01:00:38    

Code :
  1. #corps
  2. {
  3.    width: 800px;
  4.    margin-left: 20px;
  5.    margin-bottom: 20px;
  6.    padding: 5px;
  7.    color: #5b2c76;
  8.    background-color: #f0f8ff;
  9.    background-repeat: repeat-x;
  10.    border: 5px outset #feffa2; 
  11. }


 

Code :
  1. body
  2. {
  3.    width: 760px;
  4.    margin: auto;
  5.    margin-top: 20px;
  6.    margin-bottom: 20px;   
  7.    background-color: #b0c3de;
  8. }


 
- ça te semble pas un peu con de vouloir rentrer 800px dans 760px ?
 
- c'est crade de mettre un body de taille fixée. il serai plus judicieu de laisser le body tranquille et si tu veux vraiment faire ton site de taille fixe, faire un div avec les bons parametres
 
tu as 2 solutions simples (les 2 autres solutions sont moins faciles) pour placer tes élements:
 
- tout relatif: le plus courant. les élements sont placés en fonction de l'agencement des élements parents et freres
 
- tout absolue: tu fixe l'affichage au pixel pres. ça passe bien pour tel site sur tel plateforme, tel browser, tel résolution, c'est pas tres bon pour l'accessibilité par contre
 
tu devrait donc laisser en raltif.
 
ensuite, pour placer tes élements, tu doit penser aux élements parents et freres.
 
si tu as un parent de 760px, le fils ne peux faire 800px (ça force quoi)
quand tu place un élement avec  margin, left, top, right, bottom, etc ça le place par rapport à l'élément parent.
 
tu dois donc penser à la hierarchie de tes élements...
pour ensuite déterminer le style adéquat pour chacun d'entre eux
 
je te laisse chercher tes erreurs maintenant
j'espere t'avoir été d'une petite utilité


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 30-01-2007 à 12:25:18    

ok merci ! je vais faire un peu le menage ;)

Reply

Marsh Posté le 30-01-2007 à 14:03:07    

Voici ce que le plugin Tidy pour firefox me dit :  
 
line 28 column 3 - Warning: <title> isn't allowed in <div> elements
line 28 column 3 - Warning: <meta> isn't allowed in <div> elements
line 33 column 8 - Warning: <link> dropping value "design.css" for repeated attribute "href"
line 33 column 8 - Warning: <link> dropping value "sansJS.css" for repeated attribute "href"
line 28 column 3 - Warning: <link> isn't allowed in <div> elements
line 122 column 2 - Warning: <br> element not empty or not closed
line 123 column 2 - Warning: <br> element not empty or not closed
line 124 column 2 - Warning: <br> element not empty or not closed
line 125 column 2 - Warning: <br> element not empty or not closed
line 141 column 83 - Warning: replacing <p> by <br>
line 141 column 83 - Warning: inserting implicit <br>
line 141 column 83 - Warning: <br> element not empty or not closed
line 146 column 1 - Warning: <br> element not empty or not closed
line 147 column 218 - Warning: replacing <p> by <br>
line 147 column 218 - Warning: inserting implicit <br>
line 161 column 70 - Warning: '<' + '/' + letter not allowed here
line 97 column 10 - Warning: <a> escaping malformed URI reference
line 99 column 10 - Warning: <a> escaping malformed URI reference
line 141 column 1 - Warning: trimming empty <p>
 
0 erreur / 19 avertissements

Reply

Marsh Posté le 30-01-2007 à 14:33:11    

ouille :D


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 30-01-2007 à 16:13:38    

bof, c'est pas bien méchant, j'ai déjà vu bien pire (genre le site de google :D). Y'a beaucoup d'erreurs sur <br> à la place de <br />...
 
Par contre, y'en a une qui est assez marrante :  
document.write('<scr'+'ipt language="javascript" src="'+bseuri+'"></scr'+'ipt>');
 
Faudra m'expliquer l'intérêt de scinder en 2 chaînes "</script>" :??:
 
Y'a celle-là aussi :  
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="design.css" href="sansJS.css" href="dynmenu.css" />
 
Si t'as 3 feuilles de styles, faut mettre 3 balises <link>...;)

Reply

Marsh Posté le 30-01-2007 à 16:56:27    

lol sympa le scindage de script en js :D
 
google, c'est juste le non respect de la balise single tag en xhmtl strict


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 01-02-2007 à 20:35:41    

je suis en train de nettoyer mes scripts par contre j'ai un probleme, mon site est decaler vers la droite ! enfin je peux me deplacer vers la droite et je n'arrive pas a supprimer cette partie inutile !

Reply

Marsh Posté le 01-02-2007 à 22:19:31    

probleme de css probablement


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 01-02-2007 à 22:48:19    

c'est ce que je pense mais je n'arrive pas a trouver l'erreur !

Reply

Marsh Posté le 01-02-2007 à 22:48:19   

Reply

Marsh Posté le 01-02-2007 à 23:24:33    

poste le code


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 02-02-2007 à 12:42:44    

voilà !
de plus je n'arrive pas a center mes images  
 

Citation :


body
{
   width: 800px;
   margin: auto;
   margin-top: center;
   margin-bottom: center;    
   background-color: #b0c3de;
}
 
 
 
 
#en_tete
{
 
margin-left: auto;
   width: 700px;
   height: 200px;
   left: 150px;
   background-image: url("banniere.png" );
   background-repeat: no-repeat;
   margin-bottom: 20px;
}
 
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
 {
margin-left : auto;
top: 180px;
left: 150px;
z-index: 100;
width: 100%;
position: absolute;
right: 50%
}
#menu dl {
float: left;
width: 12em;
margin: 10px;
}
#menu dt {
 
text-align: center;
font-weight: bold;
background: #fbe2f4;
border: 5px outset #feffa2;
}
#menu dd {
border: 5px outset #feffa2;
display:none
}
#menu li {
text-align: center;
background: #cdf6f7;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
a  
{text-decoration: none;
color: black;
color: #222;
}
 
 
 
#corps
 
{
   
   width: 760px;
   margin-left: 20px;
   margin-bottom: 20px;
   padding: 5px;
   color: #5b2c76;
   background-color: #f0f8ff;
   background-repeat: repeat-x;
   border: 5px outset #feffa2;  
}
a
{
   text-decoration: none;  
   color: red;  
   font-style: italic;  
}
 
#corps h1
{
   color: #7c7915;
   text-align: center;
   font-family: "Comic Sans MS", "Times New Roman", Times, serif;
 
}
 
#corps h2
{
   
   font-family: "Comic Sans MS", "Times New Roman", Times, serif;
   color: #6d0c82;
   text-align: center;
}
 
 
/* Le pied de page  */
 
#pied_de_page
{
 
   padding: 0px;
   margin-left: 20px;
   margin-bottom: 20px;
   text-align: center;
   color: red;
   background-color: #f0f8ff;
   background-repeat: repeat-x;
   font-family: "Comic Sans MS", "Times New Roman", Times, serif;
   border: 5px outset #feffa2;
 
}
 
a img  
{
   border: none;
   position: center;
}
#news
{
 
text-align: center;
vertical-align: middle;
 
}


 
merci

Reply

Marsh Posté le 02-02-2007 à 13:37:19    

Citation :

a img  
{  
   border: none;  
   position: center;  
}


 
ça existe ça, position center ? xD
 
 
j'ai pas ton code htmleumleu, donc je vois pas trop
 
mais fais plutot:
 
- enleve le width du body, ça suxxx
- met un "margin-left: xxx" a ton corps, pour l'éloigner du bord gauche


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 02-02-2007 à 16:00:03    

voila !
 

Citation :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>le site de Gui et Hayd</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
//window.onload=montre;  supprimé
//active la feuille de style dynamique
document.getElementsByTagName("link" )[0].href="dynmenu.css"
 
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
 
 
<body>
                           
  <div id="en_tete">
   
 
   <title> CSS externe </title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
       <link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="design.css"/>
   
 </div>
 
 <div id="menu">
 <dl>
  <dt onmouseover="javascript:montre();"><a href="index.html">Accueil</a></dt>
 
 </dl>
 
 <dl>    
  <dt onmouseover="javascript:montre('smenu1');">Information</dt>
   <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
    <ul>
     <li><a href="actualite.html">Actualité</a></li>
     <li><a href="archives.html">Archives</a></li>
     <li><a href="humour.html">Humour</a></li>
     
     
     
    </ul>
 
   </dd>
 </dl>
 
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu2');">Graphisme</dt>
   <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
    <ul>
     <li><a href="graphisme.html">Infographie</a></li>
     <li><a href="dessin.html">Dessin</a></li>
     <li><a href="photos.html">photos</a></li>
 
     
    </ul>
   </dd>
 </dl>
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu3');">Multimédia</dt>
 
   <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
 
    <ul>
     <li><a href="logiciel.html">Logiciel</a></li>
     <li><a href="musique.html">Musique</a></li>
     <li><a href="video.html">Vidéo</a></li>
     
 
    </ul>
   </dd>
 </dl>
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu4');">Contact</dt>
 
   <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
 
    <ul>
     <li><a href="achat.html">Achat</a></li>
     <li><a href="gagner de l'argent.html">Gagner de l'argent</a></li>
     <li><a href="pub.html">Pub</a></li>
     <li><a href="livre dor.html">Livre d'or</a></li>
     <li><a href="blog.html">Blog</a></li>
     
 
    </ul>
   </dd>
 </dl>
 
</div>
  <div id="corps">  
 <br>
 <br>
 <br>
 <br>
 
    <p><img src="maj.gif"  alt="bienvenue" /></p>
 
 Petit à petit, le site se rempli...
       
<p> Envoyez moi vos créations que ce soit un dessin, une vidéo, une musique... je les mettrai volontier sur mon site </p>
<p> Ceux qui voudraient un compte gmail, contactez moi, je vous l'offre ! </p>
<p> N'hésitez pas à m'envoyer un mail pour critiquer ce site afin que je l'améliore: idle.gui@gmail.com ou en cliquant juste en dessous...  </p>
 
 </div>        
             
  <div id="pied_de_page">  
Pour contacter le webmaster, <a href="mailto:idle.gui@gmail.com">cliquez ici</a>  
 </div>
</body>
</html>

Reply

Sujets relatifs:

Leave a Replay

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