18041 sujets

Questions générales et questions de débutants

Problème avec mon code

Salut à tous est ce que quelqu'un arrive à détecter ce qui déconne avec mon code : mon footer ne s'affiche pas correctement !
merci !
[code=html]
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="contact_style.css" />
<title>contacter mon équipe html</title>
</head>
<Body>
<div id="conteneur">
<header>
<h1>HTML 5 </h1>
</header>
<nav>
<ul>
<li> <a href="#">Présentation </a></li>
<li><a href="#">Actualités</a></li>
<li><a href="#">Médias </a></li>
<li><a href="#">Equipe</a></li>
<li><a href="#">Contact </a></li>

</ul>
</nav>

<div id="contenu">
<section id="formulaire">
<form>
<p>
<label for="name">Nom: </label>
<input id="name" name ="name" required placeholder="entrez votre nom"/>
</p>

<p>
<label for="email"> e-mail </label>
<input id="email" name="email" type= "email" required placeholder="saisissez votre e-mail/>
</p>

</form>

</section>
</div>

<aside>

<h2> Bienvenu sur le site de l'équipe HTML5! </h2>

</aside>


<footer>
<p>Akyleo 2011, certains droits réservés <a href="#"> - Plan du site</a> <a href="#"> Mentions légales </a></p>
</footer>
</div>



</div>
</Body>

</html>
Bon, tout d'abord, il y a des validateurs HTML pour ça, sur le web, dans les éditeurs de code, dans des extensions navigateur. Tu aurais dû valider ton code, ça t'aurait sans doute évité de poser ta question sur ce forum.

En vitesse et en vrac !

Ton doctype est incorrect : <!DOCTYPE.html> -> <!DOCTYPE html>, un doctype, c'est pas un nom de fichier, et <!DOCTYPE.html>, ça équivaut à pas de doctype du tout.

Ta balise <link> manque d'attributs : <link rel="stylesheet" href="contact_style.css" /> -> <link href="contact_style.css" rel="stylesheet" type="text/css" />. Je ne sais pas si ça a des conséquences, mais on met l'attribut type="text/css" dans la balise <liink>.

Dans <input id="email" name="email" type= "email" required placeholder="saisissez votre e-mail/> , il y a un espace entre type= et "email" et il n'y a pas de guillemets fermants après "saisissez votre e-mail.

De manière générale, ton codage n'est pas assez rigoureux : espaces ou absence d'espaces avant le slash des balises fermantes (il y a beau temps que les espaces avant les /> sont inutiles ; ils étaient employés pour d'anciens navigateurs ne comprenant pas la syntaxe XHTML, genre IE4) balises <Body> </Body> avec, majuscule initiale, guillemets fermants oubliés, balise <title> non placée avant <meta charset="utf-8"/>, etc. Donc, davantage de rigueur et passage du code au(x) validateur(s).

Autre chose (là aussi, manque de rigueur), pourquoi dans le texte du formulaire "entrez votre nom"
et "saisissez votre e-mail" ? De toute manière, les termes "entrer" et "saisir", au sens informatique du terme sont à mon avis peu compris des utilisateurs lambda. Des termes comme "écrire" ou "taper" seraient plus clairs pour ceux-ci.

Bonne continuation.
Modifié par thierry (14 Dec 2014 - 12:01)
Guillemet oublié sur :

<input id="email" name="email" type= "email" required placeholder="saisissez votre e-mail"/>

Tu peux aussi sortir le "-" du lien "Plan de Site".
Merci pour vos réponses,

j'ai pris note et ai corrigé. J'ai utlisé W3C pour valider mon code html et il me dit que mon code html est clean. Pourtant mon footer ne s'affiche toujours pas correctement (il s'affiche sur la droite en dessous de mon header !)
J'ai fait la meme chose pour mon css et W3C n'a pas trouvé d'erreur...
Est ce que qqn saurait d'ou vient ce probleme ?

Merci

voici le code :


header
{background: purple; font-size: 20px; height: 90px;}

nav
{background-color: grey; float:left;display: inline-block; width: 200px; height:500px; border: solid black 1px}

ul
{list-style: none;}
a
{color:black;}
a:hover
{color:blue;}
nav ul li a
{text-decoration: none;}

#conteneur
{height: 700px;}
#contenu
{ float: left; display: inline-block; padding: 20px; height:500px;background-color:yellow; width:600px; border: black 1px solid }

aside
{border: black solid 1px;float: right; margin-top: 10px; height:400px; font-size:15px;}

footer
{background-color: red; border: solid black 1px; color: white; }

footer p a
{text-decoration: none;float: right;}
Salut David,

Pour commencer, je suis complètement d'accord avec Thierry quant à la qualité de ton code et à la rigueur que tu dois avoir. Tu t'y retrouveras mieux, tu feras moins d'erreurs si ton code est bien organisé, bien indenté et validé.

Difficile de t'aider efficacement quand on n'a pas la maquette de ce que tu veux mais je tente et ai corrigé ton code pour te proposer quelque chose.

Est-ce que tu veux un truc dans le genre ?

Ton problème majeur est que tu ne maîtrises pas les "float" (ou le "display: inline-block"). Tu peux en savoir plus par là.

Si c'est le résultat attendu, je peux t'en dire un peu plus sur la manière de disposer tes blocs.

Matthieu
ouai c'est exactement ça ! Merci
Je vais lire les infos dans ton lien et je serai ravi que tu m'en dises plus sur la disposition des blocs ! thanks !
Sujet clos
Aller à