besoin de votre avis

SVP

Sujet résolu

26 avril 2006 à 20:24:29

bonjour a tous
Bon je vous vois deja venir en disant c'est quoi encore cet emer**** mais je prend le risque.
En fait je voulais savoir ce que vous pensiez de cette "page" je vien juste de finir d'aprendre le XHTML et le CSS donc je ne suis pas du tout fort donc je voufrais que vous me disiez ce qui va pas ...
primo le XHTML :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="cdf.css" />
</head>
<body>
<div id="en_tete"> 

</div>
<div id="menu" > 
<div class="element_menu" >
<h3>Modélisme </h3> 
<ul>
<li> <a href="float_html.html"> lien </a> </li>
<li> <a href="essai2.html"> lien </a> </li>
<li> <a href="essai.html"> lien </a> </li>
</ul>
</div>

<div class="element_menu" >
<h3>Informatique</h3>
<ul>
<li> <a href="essai_tableau_organise.html"> lien </a> </li>
<li> <a href="essai_tableau_non_ordone.html"> lien </a> </li>
<li> <a href="essai_letrine.html"> lien </a> </li>
</ul>

</div>

</div>
<div id="corp"> 
<h1> Bienvenue sur mon site de modelisme et d'informatique</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici‚ c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :–D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes‚ on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken‚ ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah‚ c'est moi‚ quelle question :–p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs‚ de les rendre accros à mon site‚ puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait‚ j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>
<div id="pied_de_page"> 
<p>Copyright "Tout pourri Corporation" 2005‚ tous droits réservés</p>
</div>
</body>
</html>

secondo le CSS

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("image/fond2.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
}

#en_tete
{
width: 760px;
height: 100px;
background-image: url("image/baniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

#menu
{
float : left ;
widht : 120px ; /* tres important la taille du menu */
}
.element_menu
{
background-color : blue ;
background-image : url("image/.jpg") ;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.element_menu h3 /* tout les h3 de "element_menu" */
{
color : purple ;
font-family : "Comic Sans MS" , serif ;
text-align: center;
}
.element_menu ul/* Toutes les listes à puces se trouvant dans un menu */
{
list-style : circle ;
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: green ;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}
#corp
{margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #B3B3B3;
background-color: #626262; /* Une couleur de fond pour le corps */
backgroundimage: url("images/motif.png"); /* le code est faut car pas besoin de tof */
backgroundrepeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut IDEM */

border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corp h1 /* Tous les titres h1 du corps */
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;

background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */

padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
#pied_de_page
{
padding: 5px;

text-align: center;

color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;
}

a oui il vous faut aussi le lien pour la baniere et le fond
baniere:

et le fond :

PS : je suis desole de vous dire ca mais vous allez devoir creer un fichier qui s'appelle : image et y mettre ces deux derniers images a oui et tous les fichiers doivent etre au meme endroit.

Merci par avance
cordialement Benjamin
EDIT : la baniere doit s'appeller baniere et le fond doit s'appelle fond2

strucky

26 avril 2006 à 21:07:45

Salut,

Alors :

1- Il manque le doctype.
2- Problème avec les caractères - (tiret) au début de ton html.
3- Dans ton css c'est baniere.jpg et non .png
4- Dans ton css il manque également des tirets entre background et image.

Juste comme ça, où as tu fais le copier/coller du début de ton html si tu en as fait un, ou quel éditeur de texte utilises-tu ?, car j'ai remarqué que ce problème apparaissait souvent ces derniers temps.

Pense à passer ton code au validateur, les erreurs te sauteront aux yeux, ou un éditeurs comme pspad qui te signale les caractères problématiques.

Si tu veux ton code corrigé je te le mets.

Héxor

26 avril 2006 à 21:20:50

1) desole c'est du a mon copier/coller des fois je selectionne tout et ca me met ce que ca veu.
2)j'ai pas compris ce que tu voulais dire
3)autan pour moi c'est qu j'ai changer trois fois la baniere a cause de probleme de poid pour mettre sur le forum
4)a un moment c'est fait expres c'est meme marqué en comentaire c'est pour savoir que je pouvais faire ca en fait lol
Le copier/coller vien du sdz dans un des tutos, j'utilise notepad++
C'est quoi un validateur et si tu as un lien je suis preneur

Je te remercie de m'avoir repondu

strucky

26 avril 2006 à 21:37:07

Validateur HTML
Validateur CSS

Voici ce que j'obtiens comme erreur pour par exemple ta balise meta :
line 4 column 8 - Warning: <meta> attribute name "httpÂ–equiv" (value="ContentÂ–Type") is invalid

Le code corrigé :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>
Bienvenue sur mon site !
</title>
<meta http-equiv="Content-type" content="text/html; charset=iso–8859–1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="cdf.css" />
</head>
<body>
<div id="en_tete">

</div>
<div id="menu" >

<div class="element_menu" >
<h3>Modélisme </h3>

<ul>
<li>
<a href="float_html.html">lien </a></li>
<li>
<a href="essai2.html">lien </a></li>
<li>
<a href="essai.html">lien </a></li>
</ul>
</div>
<div class="element_menu" >
<h3>Informatique</h3>
<ul>
<li>
<a href="essai_tableau_organise.html">lien </a></li>
<li>
<a href="essai_tableau_non_ordone.html">lien </a></li>
<li>
<a href="essai_letrine.html">lien </a></li>
</ul>
</div>
</div>
<div id="corp">

<h1>Bienvenue sur mon site de modelisme et d'informatique</h1>
<p>
Bienvenue sur mon super site !
<br /> Vous allez adorer ici‚ c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :–D
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes‚ on va m'accuser de discrimination ;o)
<br /> Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken‚ ce site est fait pour vous ! Si si !
</p>
<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah‚ c'est moi‚ quelle question :–p
<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs‚ de les rendre accros à mon site‚ puis de les mettre en mon pouvoir.
<br /> Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait‚ j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>
<div id="pied_de_page">

<p>
Copyright "Tout pourri Corporation" 2005‚ tous droits réservés
</p>
</div>
</body>
</html>

/* CSS Document */

body
{
width: 760px;
margin: 20px auto; /* Pour centrer notre page */
/* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
/* Idem pour le bas du navigateur */
background-image: url("image/fond2.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
}

#en_tete
{
width: 760px;
height: 100px;
background-image: url("image/baniere.jpg");
margin-bottom: 10px;
}

#menu
{
float : left ;
width : 120px ; /* tres important la taille du menu */
}

.element_menu
{
background-color : blue ;
background-image : url("image/.jpg") ;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.element_menu h3 /* tout les h3 de "element_menu" */
{
color : purple ;
font-family : "Comic Sans MS" , serif ;
text-align: center;
}

.element_menu ul/* Toutes les listes à puces se trouvant dans un menu */
{
list-style : circle ;
padding: 0 0 0 20px; /* Tous les côtés ont une marge intérieure de 0 pixels */
/* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0 0 5px 0; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
/* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: green ;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}

#corp
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: #B3B3B3;
background-color: #626262; /* Une couleur de fond pour le corps */
background-image: url("images/motif.png"); /* le code est faut car pas besoin de tof */
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut IDEM */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#corp h1 /* Tous les titres h1 du corps */
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;
background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}

Sur quel tuto tu as copié le code ?

Héxor

26 avril 2006 à 21:43:58

je pensse que c'est le code html ou il y a beaucoup de verre mais je suis pas sur
http://www.siteduzero.com/tuto-3-62-1-creons-le-design-de-votre-site-web.html#ss_part_1

Desole mais je ne vois pas la difference entre mon code et ton code pour la balise meta

Webokage

26 avril 2006 à 21:46:58

Il a tout simplement rajouté le doctype.

Découvrez les grandes inventions et inventeurs qui font de notre monde ce qu'il est aujourd'hui :)

Héxor

26 avril 2006 à 21:48:51

a ok
EDIT :
http://validator.w3.org/check
je ne comprend pas les erreurs du stule la 20
Pouvez vous m'expliquer ce qui vas pas ?

strucky

26 avril 2006 à 21:52:55

Oui, c'est celui-ci, suffit de le passer au validateur pour voir le problème.

Citation : PieR

Il a tout simplement rajouté le doctype

Oui, et également remplacer les caractères problématiques et les deux petites erreurs dans le css, pas grand chose, je l'admet

Héxor

26 avril 2006 à 21:55:03

je ne comprend pas certaine erreur par exemple il me souligne un "<" et il dise : Line 9 column 24: element "DIV" undefined.

<div id="en_tete"> 
la il m'on souligne le ">" qui est juste apres en_tet je comprend pas

strucky

26 avril 2006 à 21:58:25

Fais un copier/coller du code que je t'ai mis, il est valide.

Héxor

26 avril 2006 à 21:59:15

ok merci bien tout le monde
EDIT : comment a tu fais pour avoir le code html valide ?
RE-EDIT : maintenant que tout ca est valide que pensez vous du design du menu et tout ?

Héxor

27 avril 2006 à 10:28:35

up please

Héxor

28 avril 2006 à 20:02:22

toulurs personne
allez s'il vous plait

webshinra

28 avril 2006 à 20:17:51

ben si tu ne l'a pas en ligne c'est dificile de te dire ci cela nous plaît

Héxor

28 avril 2006 à 20:23:54

ouai si vrai bon ba tampi le seule moyen est d'enregistrer tout les fichiers et je reconnais que c'est chi*** donc je met probleme resolui et on en parle plus