18041 sujets

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

[résolu] Demande d'aides pour validation

Bonjour a vous tous

Voila je regarde Alsacréations depuis une bonne année et je me lance enfin a votre rencontre ^^

Je suis entrain de faire un site internet et j'aimerais l'heberger ...
le probleme est qu'il me parait plutot bien mais ce n'est pas pareil pour la validation de mes pages oO

de plus j ai un petit soucis avec les liens de mon menu, puisque je ne peut cliquer dessus sauf le dernier et le deuxieme mais seulement si je clique vers la derniere lettre du lien
Smiley sweatdrop

je pose mon code css et html pour que ce soit plus simple et j'esper que vous aiderez un p'tit jeune qui a un peu de mal Smiley ravi

1ere page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>EA/qui sommes nous ?</title>
		<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
	</head>
	<body>
		<div id="global">
			<h1 id="header"></h1>
		<ul id="menu">
			<li><a href="Ambiance1.html">Presentation</a></li>
			<li><a href="Ambiance2.html">Realisations</a></li>
			<li><a href="Ambiance3.html">Contact</a></li>

		</ul>
			<div id="center">
			<center> Notre profession </center>
			<p>tapez votre texte ici !!
		</p>
				
			</div>
			<div id="footer">
				<p>taper votre pied de page ici!</p>
			</div>
		</div>
	</body>
</html>


2eme page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>EA/Nos realisations</title>
		<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
		<script type="text/javascript" src="script.js">
		</script>
	</head>
	<body>
		<div id="global">
			<h1 id="header"></h1>
		<ul id="menu">
			<li><a href="Ambiance1.html">Presentation</a></li>
			<li><a href="Ambiance2.html">Realisations</a></li>
			<li><a href="Ambiance3.html">Contact</a></li>
		</ul>
			<div id="center">
			
			<div id="galerie">
	<ul id="galerie_mini">
		<li><a href="IM-testg/1.png" ><img src="IM-test/1.png" alt="mise en place ecran" /></a></li>

		<li><a href="IM-testg/2.png" ><img src="IM-test/2.png" alt="jolie ^^" /></a></li>
		<li><a href="IM-testg/3.png" ><img src="IM-test/3.png" alt="Le titre de la photo 3" /></a></li>
		<li><a href="IM-testg/4.png" ><img src="IM-test/4.png" alt="Le titre de la photo 4" /></a></li>

		<li><a href="IM-testg/5.png" ><img src="IM-test/5.png" alt="Le titre de la photo 5" /></a></li>
		<li><a href="IM-testg/6.png" ><img src="IM-test/6.png" alt="Le titre de la photo 6" /></a></li>
		<li><a href="IM-testg/7.png" ><img src="IM-test/7.png" alt="Le titre de la photo 7" /></a></li>
		<li><a href="IM-testg/8.png" ><img src="IM-test/8.png" alt="Le titre de la photo 8" /></a></li>
		<li><a href="IM-testg/9.png" ><img src="IM-test/9.png" alt="Le titre de la photo 9" /></a></li>
	    <li><a href="IM-testg/10.png" ><img src="IM-test/10.png" alt="Le titre de la photo 10" /></a></li>

	</ul>

	
	<dl id="photo">
		<dd><img id="big_pict" src="images/photo1.png" alt="">
		</dd>
	</dl>
</div>
				
			</div>
			<div id="footer">
				<p>Ambiance</p>
			</div>
		</div>
	</body>
</html>


3eme page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>EA/Nous contacter</title>
		<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
		
		<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
function valider() {
var form_err = " "
if ( document.ecrire.Mail.value.length < 1) {
form_err += "Il manque l adresse Mail. - ";
}
if ( document.ecrire.NOM.value.length < 1) {
form_err += "Il manque le Nom. ";
}
if ( form_err != " ") {
alert(form_err);
return false;
}
return true
}
//-->
</script>
	</head>
	<body>
		<div id="global">
			<h1 id="header"></h1>
		<ul id="menu">
			<li><a href="Ambiance1.html">Presentation</a></li>
			<li><a href="Ambiance2.html">Realisations</a></li>
			<li><a href="Ambiance3.html">Contact</a></li>
		</ul>
			<div id="center">
			
						<div id="galerie">
<form method="POST" action="mailto:eambiance@hotmail.com?subject=Fomulaire Je javascript" name="ecrire" onSubmit="return valider();">
<div align="center"><font size="+1"><b>Pour nous contacter :</b></font><br>
</div>
<table width="500" border="0" align="center">
<tr>
<td valign="top"><b>Votre E-mail : </b></td>
<td valign="top">
<input name="email"size=50 maxlength=50>
</td></tr><tr>
<td valign="top"><b>Nom : </b></td>
<td valign="top">
<input name="nom"size=50 maxlength=50>
</td></tr><tr>
<input type="hidden" name="subject" value="Formulaire ecrivez-moi" size=50 maxlength=50>
</td></tr><tr>
<td valign="top"><b>Commentaires : </b></td>
<td valign="top">
<textarea name="COMMENTS" cols=50 rows=4></textarea>
</td></tr></table>
<table width="500" border="0" align="center">
<tr><td colspan="2">

</td></tr><tr>
<td width="250">
<div align="center">
<INPUT TYPE=submit VALUE="Envoyer">
</div></td>
<td width="250">
<div align="center">
<INPUT TYPE="reset" VALUE="Effacer">
</div></td></tr>
</table>
</form>
</div>
				
			</div>
			<div id="footer">
				<p>Ambiance </p>
			</div>
		</div>
	</body>
</html>


CSS
html, body {
	height: 100%;
	margin: 0;
	}
div#footer p{
	padding: 0 10px;
	}
div#center {
	padding-bottom: 50px;
	overflow: auto;
}
html {
	background: #ddd url(fond.png) center repeat-x;
	}
div#global {
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	padding: 0 10px;
	background: url(IM-amb/global.png) center repeat-y;
	text-align: left;
	}
h1#header {
	background: url(IM-amb/Bann.png) ;

	height: 80px;
	margin: 0;
	padding: 0;
	}

ul#menu
{
	height: 37px ;
	margin: 0 ;
	padding: 0 ;
	background: url(IM-amb/menu.png) ;
	list-style-type: none ;
}

ul#menu li
{
float:left;
width: 140px;

}

ul#menu li a
{

	line-height: 30px ;
	font-size: 1.0em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #da0404 ;
	display: block ;
	text-decoration: none ; 
	margin-left:180px;

}

ul#menu li a:hover
{
	color: white ;
}
div#footer {
	position: absolute;
	width: 750px;
	bottom: 0;
	background: url(IM-amb/foot.png) repeat-x;
	color: #da0404;
	}

body {
	font: 90% "Comic sans MS", sans-serif;
	position: relative;
	padding: 0;
	text-align: center;
}
div#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	}
a {
	color: #6c0;
	font-weight: bold;
	}
a:hover {
	color: #c00;
	}
div#galerie
{
    height: 400px;
	width: 720px ;
	background: url(fondphoto.png) center repeat-x ;
	border: 1px solid red ;
	padding: 4px ;
	margin: 1px 10px;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	float: right ;
}

ul#galerie_mini li a img
{
	margin: 10px 5px ;
	border: 1px solid red ;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic 2.5em/1.5em Georgia, serif ;
	color: red ;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	;
}


Merci beaucoup de votre attention, je sais qu'on a pas forcement le temps de s'occuper des problemes des autres ^^'

a bientot Smiley cligne
Modifié par Northsyde (07 Sep 2007 - 17:36)
Hello et bienvenue à toi sur le forum,

Northsyde a écrit :
le probleme est qu'il me parait plutot bien mais ce n'est pas pareil pour la validation de mes pages oO

Ben... il suffit de lire les erreurs données par le navigateur, non?

Par exemple, pour la première page, il te dit: «Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtml.» Je trouve ça assez explicite: il te manque un attribut xmlns pour l'élément html, et la valeur de cet attribut devrait être "http://www.w3.org/1999/xhtml". Donc on corrige en fonction:
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

Et paf, la page est valide.

Pour la deuxième page, tu as le même problème, plus une balise <img /> qui n'est pas fermée correctement, ce qui mets le bazar. On corrige ça, et les erreurs suivantes disparaissent (toujours penser à corriger les erreurs en amont... les erreurs en aval sont peut-être juste la conséquence d'un validateur perturbé par une première erreur de syntaxe Smiley cligne ).

Pour la troisième page, tu as des br marqués <br> au lieu de <br />, des input pas fermés (<input />), des balises écrites en majuscules, des attributs pas entourés de guillemets, un élément script sans attribut type, etc.
Bref, beaucoup de copier/coller de code HTML (avec syntaxe HTML, donc), alors que tu déclares tes pages comme du XHTML.

Conseil: reste en XHTML, et corrige. Il n'y a pas vraiment d'avantage concret autre que pédagogique, mais un peu de rigueur ça ne peut pas faire de mal. Smiley smile
Merci beaucoup Smiley biggrin

Oui je fais ca par moi meme donc j ai un peu de mal et etant tete en l'air ( oui sa va etre dur de continuer sans rigueur ) je ne dois pas respecter beaucoup de regles ^^"

Enfin encor une fois merci beaucoup pour votre aide Smiley ravi

Par contre, j'ai toujours se probleme avec les liens de mon menus; en faite j'ai bien l'ecriture, mais j ai beau cliquer dessus rien ne se passe, sauf pour le dernier lien qui est prit en compte .
Pour etre plus precis :
-je double clique sur Presentation c'est Realisations qui devient surligné
-je double clique sur Realisations c'est au tour de Contact d etre surligné
-puisque j'ai fait un effet pour le passage sur un lien je remarque que seul le s de Realisations me conduit a la page de realisations
-et enfin si je clique sur contact il m'emmene bien a contact

oO une idée ? Smiley murf
Modifié par Northsyde (07 Sep 2007 - 16:23)
Northsyde a écrit :
Par contre, j'ai toujours se probleme avec les liens de mon menus; en faite j'ai bien l'ecriture, mais j ai beau cliquer dessus rien ne se passe, sauf pour le dernier lien qui est prit en compte.

Pour le coup, ça ne vient pas de ton code HTML (les liens fonctionnent) mais de tes styles CSS.

Tu donnes aux li de ton menu une largeur de 140px. Puis, tu passes les liens en affichage de type bloc et tu leur donnes une marge à gauche de 180px. Donc chaque lien est recouvert par le li qui le suit, sauf pour le dernier lien. Et donc c'est inutilisable.
Lorsque tu double-cliques sur le lien, tu double-cliques en fait sur le li qui contient le lien «suivant», et ça sélectionne le texte de ce lien suivant. CQFD.

Solution: ne pas utiliser de méthode aussi bricolée pour positionner ses éléments. Smiley cligne

Pour centrer des liens dans une liste non ordonnée:
ul#navigation {
text-align: center;
}
ul#navigation li {
display: inline;
margin: 0 20px;
}
Merci enormement je commencais a paniquer Smiley lol

et bien je marque résolu a mon probleme et te dit encor merci pour ton aide Smiley ravi
Sujet clos
Aller à