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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1507926
monster-mu​nch
Miam
Posté le 28-01-2007 à 09:59:44  profilanswer
 

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

mood
Publicité
Posté le 28-01-2007 à 09:59:44  profilanswer
 

n°1508452
zecrazytux
Posté le 30-01-2007 à 01:00:38  profilanswer
 

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
n°1508579
monster-mu​nch
Miam
Posté le 30-01-2007 à 12:25:18  profilanswer
 

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

n°1508603
rufo
Pas me confondre avec Lycos!
Posté le 30-01-2007 à 14:03:07  profilanswer
 

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

n°1508613
zecrazytux
Posté le 30-01-2007 à 14:33:11  profilanswer
 

ouille :D


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
n°1508676
rufo
Pas me confondre avec Lycos!
Posté le 30-01-2007 à 16:13:38  profilanswer
 

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>...;)

n°1508720
zecrazytux
Posté le 30-01-2007 à 16:56:27  profilanswer
 

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
n°1509808
monster-mu​nch
Miam
Posté le 01-02-2007 à 20:35:41  profilanswer
 

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 !

n°1509835
zecrazytux
Posté le 01-02-2007 à 22:19:31  profilanswer
 

probleme de css probablement


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
n°1509847
monster-mu​nch
Miam
Posté le 01-02-2007 à 22:48:19  profilanswer
 

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

mood
Publicité
Posté le 01-02-2007 à 22:48:19  profilanswer
 

n°1509858
zecrazytux
Posté le 01-02-2007 à 23:24:33  profilanswer
 

poste le code


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
n°1510017
monster-mu​nch
Miam
Posté le 02-02-2007 à 12:42:44  profilanswer
 

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

n°1510036
zecrazytux
Posté le 02-02-2007 à 13:37:19  profilanswer
 

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
n°1510162
monster-mu​nch
Miam
Posté le 02-02-2007 à 16:00:03  profilanswer
 

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>


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

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

 

Sujets relatifs
Aide phpmyadminAfficher des news sur son site... Module de news ?
probleme phpMon site marche plus sur IE 7 ?
Nombre d'occurences => toujours besoin d'aideAdministration site: CSS/PHP/Mysql,etc...
[HTML/CSS/JavaScript]Projet interface site web 3d inspiré de XGlProblème pour Remonter d'un dossier
Executer une requête sql à l'aide de C# qui retourne un seul enregistrProblème de bloc.
Plus de sujets relatifs à : nouveaux site, beaucoup de probleme... un peu d'aide serai la bienvenu


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