Bonjour à tous!

Je suis nouveau, avec une question de....nouveau Smiley smile
Je tente de développer actuellement un site en HTML/CSS en autodidacte et je voudrais savoir où je peux poster les 2 codes afin d'avoir un avis éclairé sur la "propreté" et la validité du développement en cours....J'ai vu qu'il y avait une rubrique pour chaque langage dans ce forum...dois je donc scinder le code pour le poster?
Merci!

David
Bonjour et bienvenue Smiley smile

Je peux te déplacer ce poste dans "Critiques de vos sites: code et design" si tu veux et du coup tu précises que tu souhaites un retour sur le code ?
Une page en ligne sera plus simple à "critiquer" que le HTML/CSS brut d'ailleurs Smiley cligne
Merci beaucoup! Smiley smile
Oui volontiers!...Donc déplaces le et je le préciserai....par contre le site n'est pas en ligne encore, mais je peux mettre une copie d'écran de l'aperçu dans Fifox....
Donc voilà:
Bonjour à la communauté....

J'aimerais savoir ce que vous pensez de la "propreté du code" et de sa validité...
J'ai mis à la fin une capture d'écran de l'aperçu sous Fifox car le site n'est pas encore en ligne....merci pour vos lumières ! Smiley smile

<!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" lang="fr">
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style.css"/>
		<title>"Saint Césaire d'Arles"</title>
	</head>
	
	<body>
		<div id="page">
			<div id="header">
					
					<img src="images/chrisme.png" id="chrisme" />
					<h1>Saint Césaire d'Arles</h1>
					<p>Site consacré à  l'évèque et à l'archéologie de l'enclos</p>
					<div id="bloc_droite">
					<img src="images/icofb.png" id="fb"/>&nbsp;
					Recherche 
					<form><input type="search" name="search" text="Saisir un mot" /></form>
					
					 
					</div>
			
				<div id="bandeau_haut">
						<div id="busteh">
							<img src="images/bustehaut.jpg" alt="bustehaut" id="bustehaut" />
							<h3>Césaire</h3>
						</div>
						<div id="fouilleh">
							<img src="images/fouille_mosaiquehaut.jpg" alt="fouille_mosaiquehaut" id="fouille_mosaiquehaut" />
							<h3>Les fouilles archéologiques</h3>
						</div>
						<div id="colloqueh">
							<img src="images/colloquehaut.jpg" alt="colloquehaut" id="colloquehaut" />
							<h3>Colloque 2013</h3>
						</div>
				</div>	
			</div>	
			<div id="menu">	
				<ul>
				<li><a href="#">L'homme</a></li>
				<li><a href="#">L'enclos</a></li>
				<li><a href="#">Fouilles anciennes</a></li>
				<li><a href="#">Le chantier actuel</a></li>
				<li><a href="#">Les publications</a></li>
				</ul>
				
			</div>
		
			
			<div id="contenu">
				
				Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.
				
			</div>
			
			<footer>
			Mentions légales
			</footer>
		</div>
	</body>
</html>	


* {margin: 0; padding: 0;}
body
{
background-color:#000000;
font-family:"Arial", Verdana, sans-serif;
width:80%;
margin:0 auto;
}
#page
{
background-color:white;

 }
 
 #header
 {
 width:100%;
 height:155px;
 background-color:#cc6600;
 
 }
 
#header img
{
float:left;

}

h1,p
{font-family:"Gentium Basic";
font-style:bold;
}
#header h1

{padding-top: 30px;
padding-left:80px;
font-size:40px;}

p
{font-size:24px;
padding-left:80px;
}

#header #bloc_droite
{float:right;

margin:-80px 5px 0 0;
font-size:12px;
}

form, #fb
{display:inline-block;
}
#bandeau_haut
{padding-top:9px;
height:39px;
line-height:39px;
}
#busteh
{width:300px;border:1px black solid;

}

#fouilleh
{width:300px;
border:1px black solid;}

#colloqueh
{width:300px;
border:1px black solid;}

#bandeau_haut,h3
{font-family:"Arial";
font-size:15px;
font-style:normal;
text-align:center;

}

#busteh, #fouilleh, #colloqueh
{display:inline-block;
}

#menu {
margin-left: 77px;
height:30px;
width: 870px;
line-height:20px;
list-style-type: none;

color: white;
text-align: right;
}

 #menu li {

 float:left;
display: inline;

border-bottom:1px black solid;
border-right:1px black solid;
border-left:1px black solid;
margin-left:3px;
margin-right:8px;
width:140px;
text-align:center;

}
#menu li a
{color:black;text-decoration:none;}

#contenu
{float:left; 
width:100%;}


Copie d'écran:

upload/55061-copie-ecra.jpg
À priorie, c'est bien partie. Quelques points cependant:

-la balise footer est une balise html5 alors que tu es en xhtml 1.0 strict... passe dont tout ça en html5! <!doctype html>, Ainsi tu pourra utiliser des balise tel que header et nav.
-balise <html> en trop

Ça:
<div id="bandeau_haut">
						<div id="busteh">
							<img src="images/bustehaut.jpg" alt="bustehaut" id="bustehaut" />
							<h3>Césaire</h3>
						</div>
						<div id="fouilleh">
							<img src="images/fouille_mosaiquehaut.jpg" alt="fouille_mosaiquehaut" id="fouille_mosaiquehaut" />
							<h3>Les fouilles archéologiques</h3>
						</div>
						<div id="colloqueh">
							<img src="images/colloquehaut.jpg" alt="colloquehaut" id="colloquehaut" />
							<h3>Colloque 2013</h3>
						</div>
				</div>	
			</div>	
			<div id="menu">	
				<ul>
				<li><a href="#">L'homme</a></li>
				<li><a href="#">L'enclos</a></li>
				<li><a href="#">Fouilles anciennes</a></li>
				<li><a href="#">Le chantier actuel</a></li>
				<li><a href="#">Les publications</a></li>
				</ul>
				
			</div>
C'est pas jolie! Si j'ai bien compris, en regardant la capture écran, les div servent à "catégoriser" le menu? Sauf que comme tu vois si je n'avais pas regarder le visuelle je n'aurais pas su à quoi ça sert... Donc, un truc du genre serait beaucoup plus propre niveau sémantique:
<nav id="menu">	
		<ul>
                	<li><img src="images/bustehaut.jpg" alt="bustehaut" id="bustehaut" />
						<h3>Césaire</h3>
                    	<ul>
                            <li><a href="#">L'homme</a></li>
                            <li><a href="#">L'enclos</a></li>
                    	</ul>
                    </li>
                    <li><img src="images/fouille_mosaiquehaut.jpg" alt="fouille_mosaiquehaut" id="fouille_mosaiquehaut" />
						<h3>Les fouilles archéologiques</h3>
                    	<ul>
                            <li><a href="#">Fouilles anciennes</a></li>
                    		<li><a href="#">Le chantier actuel</a></li>
                    	</ul>
                    </li>
                    <li><img src="images/colloquehaut.jpg" alt="colloquehaut" id="colloquehaut" />
						<h3>Colloque 2013</h3>
                    	<ul>
                            <li><a href="#">Les publications</a></li>
                    	</ul>
                    </li>
		</ul>
				
</nav>
Bon c'est pas parfait, mais tu peux voir l'idée

<div id="contenu">
				
				Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.
				
			</div>

La balise p convient tout à fait ici puisque qu'il s'agit d'un paragraphe

Je ne me suis pas attardé au css, commence à corrigé la sémantique, ensuite attaque-toi au visuel.
juliesunset a écrit :
À priorie, c'est bien partie. Quelques points cependant:

-la balise footer est une balise html5 alors que tu es en xhtml 1.0 strict... passe dont tout ça en html5! &lt;!doctype html&gt;, Ainsi tu pourra utiliser des balise tel que header et nav.
-balise &lt;html&gt; en trop



Je ne me suis pas attardé au css, commence à corrigé la sémantique, ensuite attaque-toi au visuel.

oh mille merci Julie pour ton idée sur le menu...en effet, je voulais catégoriser ce dernier....je vais tester ta solution!

Oui, au départ je voulais faire du html5 puis j'ai abandonné l'idée car je maitrise pas encore les nouveautés...donc on verra un peu plus tard Smiley cligne ...et du coup je sais que "footer" doit être remplacé par <div id="footer">.....Comme j'ai finalisé le haut avant d'attaquer le contenu et le bas, j'avais laissé ce <footer> au milieu avant de le corriger.....
Merci encore....et donne moi des nouvelles sur mon css Smiley cligne
Tu peux très bien mettre un <!doctype html> et continuer de coder en xhtml 1.0 strict si tu veux.



Pour le css, rapidement...
#busteh
{width:300px;border:1px black solid;

}

#fouilleh
{width:300px;
border:1px black solid;}

#colloqueh
{width:300px;
border:1px black solid;}

ça, ça peut très bien être optimisé dans une seule règle:

#busteh, #fouilleh, #colloqueh{
width:300px;
border:1px black solid;
}


Les line-height du type : line-height:39px; perso, j'aime pas trop. Je trouve plus simple de travailler comme ça ex: line-height:1.2;

ça ici:
#contenu
{float:left; 
width:100%;}
ça ne sert à rien. ta div va prendre tout l'espace par défault et le float:left et inutile.


Voilà pour le moment, amuse-toi bien!
En effet, j'ai fait cette modification de "factorisation" des #busteh, #fouilleh, #colloqueh...bien vu Smiley smile

Quant au #contenu, je l'ai enfin changé...pas encore testé ton idée de menu (journée de 11h de "boulot officiel Smiley cligne ...mais je vais faire ça demain matin...merci!

PS : très joli chat!! Smiley biggrin