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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : nouveaux site, beaucoup de probleme... un peu d'aide serai la bienvenu

monster-munch

Miam

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 </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

Publicité

zecrazytux

Code :

#corps
{
width: 800px;
margin-left: 20px;
margin-bottom: 20px;
padding: 5px;
color: #5b2c76;
background-color: #f0f8ff;
background-repeat: repeat-x;
border: 5px outset #feffa2;
}

Code :

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #b0c3de;
}

- ç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

monster-munch

Miam

ok merci ! je vais faire un peu le menage

rufo

Pas me confondre avec Lycos!

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

zecrazytux

ouille

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

rufo

Pas me confondre avec Lycos!

bof, c'est pas bien méchant, j'ai déjà vu bien pire (genre le site de google ). 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>...

zecrazytux

lol sympa le scindage de script en js

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

monster-munch

Miam

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 !

zecrazytux

probleme de css probablement

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

monster-munch

Miam

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

Publicité

zecrazytux

poste le code

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

monster-munch

Miam

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

zecrazytux

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

monster-munch

Miam

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>

FORUM HardWare.fr

Programmation

HTML/CSS

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

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

Page générée en 0.059 secondes