5568 sujets

Sémantique web et HTML

Aide pour mes marges svp

Bonjour,

J'essaie de crée un site en utilisant le CSS le plus possible, aucun tableau html.

J'ai crée des balises div id et class.

Tout se passe très bien sauf une chose.

J'ai disposé des images dans le conteneur sur la droite du texte.

Pourquoi le fait de mettre ces images crée une marge en bas entre la fin du texte et le footer ??

Je ne comprends pas du tout.

Merci de votre aide
Non rien n'est en ligne mais voici le code :




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Titre</title>
	   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
       <link rel="stylesheet" type="text/css" href="style.css"/>
   </head>
<body>
	<div id="conteneur">
    <div id="header1">
	  <img src="images/header1.png" alt=""/></div>
	<div id="header2">
	  <img src="images/header2.png" alt=""/></div>
	<div id="header3">
	  <img src="images/header3.png" alt=""/></div>
	<div id="tabs10">
		<ul>
    <li><a href="#" title="Lien1"><span>Lien1</span></a></li>
    <li><a href="#" title="Lien2"><span>Lien2</span></a></li>
    <li><a href="#" title="Lien3"><span>Lien3</span></a></li>
    <li><a href="#" title="Lien4"><span>Lien4</span></a></li>
    <li><a href="#" title="Lien5"><span>Lien5</span></a></li>
    <li><a href="#" title="Lien6"><span>Lien6</span></a></li>
	<li><a href="#" title="Lien7"><span>Lien7</span></a></li>
		</ul>
	</div>
	<br/><br/>
	<div class="en-tête">Bla Bla</div>
	<br/><br/>	
	<div class="titre">Bla Bla</div>
	<br/><br/>
	<div class="corps">Bla bla bla bla bla bla bla bla bla bla<br/>
		<br/>bla bla bla bla bla bla<br/>
		<br/>
		bla bla bla bla bla bla<br/>
		<br/>
		bla bla bla bla bla bla bla bla bla<br/>
		<br/>
		bla bla bla bla bla bla bla bla bla<br/>
		<br/></div>
	<div class="rouge">bla bla bla bla bla bla bla bla bla</div><br/>
		<br/>
	<div class="titre">bla bla bla bla bla bla bla bla bla</div>
		<br/>
	<div class="corps">bla bla bla bla bla bla bla bla bla<br/>
		<br>bla bla bla bla bla bla bla bla bla<br/></div>
		<br/>
	<div class="titre">bla bla bla bla bla bla bla bla bla</div>
		<br/>
	<div class="corps">bla bla bla bla bla bla bla bla bla<br/>
		<br/>bla bla bla bla bla bla bla bla bla<br/>
		<br/>bla bla bla bla bla bla bla bla bla<br/>
	</div>
		<br/><br/>
	<div id="numero"><img src="images/numero.gif" alt=""/></div>
		<br/><br/>	
		
	<img id="cinquante" src="images/50.png" alt=""/>
	<img id="soixante" src="images/60.png" alt=""/></a>
	<img id="dix" src="images/10.png" alt=""/></a>
	
	
	<div id="footer"><img src="images/footer.png" alt=""/></div>
	
	
	  
	</div>
</body>
</html>



Et le CSS :

body
{
	margin:0;
	padding:0;
	background-image:url(images/blue4.jpg) ;
}

#conteneur
{
	width:780px;
	margin:auto;
	border:2px solid #565656 ;
	background-attachment:scroll;
	padding:0;
	background-image:url(images/fond_bleu.png);
}

#header1
{
	float:left;
	margin:0;
	padding:0;
	margin-bottom:10px;
}

#header2
{
	float:left;
	margin:0;
	padding:0;
	margin-bottom:10px;
}
#header3
{
	float:left;
	margin:0;
	padding:0;
	margin-bottom:10px;
}

#tabs10 
{
      float:left;
      width:100%;
      font-size:93%;
	  border-bottom:1px solid #69df68;
      line-height:normal;
	  font-family:calibri, verdana, tahoma;
	  font-weight:300;
	  margin-bottom:30px;
	  
}
    
#tabs10 ul 
{
	  margin:0px;
	  padding:0px 10px 0 50px;
	  list-style:none;
}

#tabs10 li 
{
      display:inline;
      margin:0;
      padding:0;
}

#tabs10 a 
{
      float:left;
      background:url(images/tableft10.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
}

#tabs10 a span {
      float:left;
      display:block;
      background:url(images/tabright10.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs10 a span {float:none;}
    /* End IE5-Mac hack */
#tabs9 a:hover span 
{
      color:#FFF;
}
    
#tabs10 a:hover
{
      background-position:0% -42px;
}
    
#tabs10 a:hover span 
{
      background-position:100% -42px;
}

.en-tête
{
margin-left:35px;
color: #060d9e;
font-size:16px;
font-weight:900;
font-family:calibri, verdana, tahoma;
font-style:italic;
}

.titre
{
margin-left :20px;
color:#0621c2;
font-size:14px;
font-weight:900;
font-family:calibri, verdana, tahoma;
text-decoration:underline;
}

.corps
{
margin-left:25px;
color:#030303;
font-size:13px;
font-family:calibri, verdana, tahoma;
text-align:justify;
margin-right:250px;
}


.rouge
{
margin-left:25px;
margin-right:250px;
color:#B22222;
font-family:calibri, verdana, tahoma;
font-size:13px;
font-weight:600;
}

#numero
{
margin-left:20px;
}

#footer
{
margin:0;
padding:0;
}

img#cinquante
{

  position:relative;
  bottom:780px;
  padding:0;
  left:600px;
} 

img#soixante
{
  position:relative;
  bottom:500px;
  padding:0;
  left:430px;
  border:0;
} 

img#dix
{
  position:relative;
  bottom:180px;
  padding:0;
  left:220px;
  border:0;
} 


a{outline: none;}
:focus{-moz-outline-style: none;}


Merci beaucoup pour votre aide
Difficile à dire sans voir les images.
Il faudrait que tu puisse mettre à disposition une page en ligne Smiley cligne
Bonjour,

J'ai essayé de reproduire ton site chez moi, mais en l'absence d'images pour tester, je n'ai pas pu. Il faut vraiment que tu mettes cette page en ligne pour que nous puissions t'aider.

Sinon, j'ai remarqué que ton code contenait des erreurs, peut-être un outil de validation syntaxique pourrait t'aider.

Aussi, j'ai vu que tu utilisais beaucoup de classes de type "en-tête", "titre", etc. Cela va devenir fastidieux, tu ne crois pas? Je te propose donc d'utiliser les balises de titres et de paragraphes. Par exemple, "en-tête" correspond exactement à <h1> dans un document bien formé. "titre" pourrait être <h3>, le titre de paragraphe. Enfin, pour le texte, pourquoi pas une balise <p>, réservée aux paragraphes.

A partir de là, tu peux supprimer l'intégralité des <br /> que tu utilises. Ils doivent avoir une valeur sémantique, et non syntaxique. D'ailleurs, les <p> et <h#> incluent eux-mêmes des marges verticales suffisantes pour mettre le texte en forme, comme tu pourras le constater. Si vraiment tu veux marquer une coupure dans un document, je pense que <hr> sera plus pertinent qu'une série de <br>.

Enfin, réfléchis bien à l'intérêt d'une série d'images à suivre. Peut-être y a-t-il une meilleure manière de transmettre ces images ? D'autant plus qu'une image ne doit être présente dans un document HTML (avec ou sans tableaux) que si elle comporte une information sémantique réelle. C'est à dire si elle est un contenu et non une décoration - d'où l'attribut alt.

J'espère que ces quelques commentaires t'aideront à comprendre un fait qui devrait être à la base de notre "métier". L'usage des tables ou des divs n'a rien à avoir avec la qualité du code d'un site. Ce qui importe, c'est sa cohérence sémantique, la correspondance entre l'information que l'auteur veut transmettre et la façon dont elle est transmise.

Bien cordialement, SD.
a écrit :
"en-tête" correspond exactement à <h1> dans un document bien formé. "titre" pourrait être <h3>, le titre de paragraphe.


Et le h2 ? Smiley ravi Plus simplement respecter les niveaux de titrage (le h1 n'est pas forcément une entête hein Smiley cligne ...).

a écrit :
Ils doivent avoir une valeur sémantique, et non syntaxique.


Je n'ai pas compris cette phrase ... Smiley ohwell La syntaxe et sémantique ne sont pas la même chose ; elles travaillent toutes deux main dans la main.

a écrit :
D'autant plus qu'une image ne doit être présente dans un document HTML (avec ou sans tableaux) que si elle comporte une information sémantique réelle. C'est à dire si elle est un contenu et non une décoration - d'où l'attribut alt.


Non ... une image même si elle n'a que comme seul but de décorer peut tout à fait se trouver dans le flux HTML. Son alternative textuelle restera simplement vide (alt=""). Smiley ravi
Au temps pour moi. Smiley smile

J'utilise en général, dans mes documents, <h1> dans le header, et <h2> pour les titres de page. Après, c'est selon les goûts de chacun, mais puisque dans ce code-là les deux m'ont l'air confondus, j'ai préféré proposer <h1>.

Pour ce qui est des <br>, il s'agit d'une typo. Je voulais dire : "sémantique et non esthétique". Je ne sais pas pourquoi j'ai écrit "syntaxique", à vrai dire.

Pour ce qui est des images, il est tout à fait possible de les utiliser à but décoratif, mais je préfère toujours, lorsque cette "décoration" a un certain poids dans la page (ie. utilisée en header et footer) inviter à réfléchir sur la pertinence de cet usage. Par exemple, ici, l'usage de footer.jpg est très pertinent... même s'il manque l'attribut "alt". Pour ce qui est des 60, 50 et 10, ainsi que des headers, je pense qu'il pourrait être mieux de les externaliser via CSS, car elles rendent le document moins lisible à l'œil humain, et car j'ai le sentiment qu'elles sont utilisées pour le "layout" du document, qui lui devrait strictement se cantonner au CSS.
Merci pour vos réponses mais j'avance pas beaucoup.

J'avais déjà utilisé l'outil de validation synthaxique, ça passe.

Externaliser les images via CSS, j'ai essayé mais ça ne marche pas, et je ne sais pas pourquoi.

Sans doute erreur de ma part, pour le header par exemple, comment devrais-je faire ??

(moi j'avais fait div id="header" et en css background-image:url(images/header); mais rien ne s'affiche)

Merci
Modifié par shubakassw (18 May 2008 - 21:48)
Bonjour,

Non, ça ne passe pas. Il y a 8 erreurs.

Je comprend bien que c'est difficile la première fois, et donc tu as besoin de réponses précises, et surtout d'exemples de code (c'était en tout cas le cas pour moi). Toutefois, nous ne pouvons pas t'aider sans une version en ligne (ou au pire une archive zip). Si nous ne savons pas comment tu utilises tes images, et quel est le résultat souhaité, nous ne pouvons que spéculer sur la manière dont tu dois les utiliser.

Dans tous les cas, une image utilisée en header ou footer est une information réelle de la page, et doit donc contenir un attribut alt dûment complété. Pour les autres, si elles sont décoratives, il vaut mieux, à mon sens, trouver un moyen de les séparer du code HTML (sauf cas particuliers, qui se produisent souvent).

Maintenant, à toi de mettre la page en ligne.
J'ai crée un dossier zip du site, téléchargeable ici :

http://www.badongo.com/fr/index.php?page=upload_s_complete&s=&msg=Click+here+to+download+your+uploaded+file&url=http%3A%2F%2Fwww.badongo.com%2Ffile%2F9447789&url_kill=http%3A%2F%2Fwww.badongo.com%2Fdelete%2Ffile%2Fhw3ef7aj%2F9447789&affiliate=&thumb=

- Ce que je ne comprends pas, c'est l'espace entre l'image "dix" (le carré vert) et le footer.

- Egalement sous firefox, entre le bas de page et le footer, il y a un espace.

- Enfin sous IE sur on click sur les liens (j'ai pas mis la deuxième page), l'image de fond du conteneur disparait et réapparait, pourquoi ?

Si je voulais mettre l'image "divider" juste à gauche des images, pour qu"il s'agrandisse ou se reduise selon la taille de la page, comment je devrais faire ??

Merci encore
Modifié par shubakassw (18 May 2008 - 23:20)
Bonsoir,

J'ai repéré le problème. Toutefois, il est tard et je n'ai pas le temps de regarder ça dans le détail. Je te conseille de lire le tutoriel de Alsacréations sur les designs à deux colonnes, il te sera utile (pour utiliser le positionnement flottant).

Voici une proposition de code HTML qui me parait plus correct sémantiquement : à toi d'appliquer le CSS qui permettra de positionner tes éléments - le gros du travail était dans le div "images_droite".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Titre</title>
	   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
       <link rel="stylesheet" type="text/css" href="style.css"/>
   </head>
	<body>
		<div id="conteneur">
			<div id="header">
				<h1><img src="images/header.png" alt="Titre du site"/><h1>
				<!-- L'usage de H1 est une manie sémantique. Il n'est pas obligatoire, mais je te le conseille, car il donne plus de valeur au header pour les moteurs de recherche (même si ça oblige à des modifs de CSS, comme supprimer le margin du H1) -->
		    </div>
			<ul id="menu">
			<!-- Le nom menu permettra à quiconque doit retravailler ton code de le situer plus aisément. Bien nommer ses balises aide à la maintenance d'un site -->
			<!-- J'ai supprimé le div car tu peux aussi bien appliquer les informations au "ul", qui est aussi un élément en bloc. Utilise un autre div par exemple pour superposer des backgrounds -->
				<li><a href="#" title="Lien1"><span>Lien1</span></a></li>
				<li><a href="#" title="Lien2"><span>Lien2</span></a></li>
				<li><a href="#" title="Lien3"><span>Lien3</span></a></li>
				<li><a href="#" title="Lien4"><span>Lien4</span></a></li>
				<li><a href="#" title="Lien5"><span>Lien5</span></a></li>
				<li><a href="#" title="Lien6"><span>Lien6</span></a></li>
				<li><a href="#" title="Lien7"><span>Lien7</span></a></li>
			</ul>
			<div id="contenu">
			<!-- Ce div n'est pas toujours nécessaire, mais en général si -->
				<div id="texte_gauche">
					<h1>Bla Bla</h1>
					<h3>Bla Bla</h3>
					<p>Bla bla bla bla bla bla bla bla bla bla</p>
					<p>bla bla bla bla bla bla</p>
					<p>bla bla bla bla bla bla</p>
					<p>bla bla bla bla bla bla bla bla bla</p>
					<p>bla bla bla bla bla bla bla bla bla</p>
					<p class="rouge"><em>bla bla bla bla bla bla bla bla bla</em></p>
					<!-- Si tu veux mettre du texte en valeur, utilise plutot <em> et <strong>. Sinon, utilise une classe (tu peux toujours personnaliser <em> et <strong> via CSS) -->
					<h3>Bla Bla</h3>
					<p>Bla bla bla bla bla bla bla bla bla bla</p>
					<p>bla bla bla bla bla bla</p>
					<h3>Bla Bla</h3>
					<p>Bla bla bla bla bla bla bla bla bla bla</p>
					<p>bla bla bla bla bla bla</p>
				</div>
				<div id="images_droite">
				<!-- Je conseille fortement de mettre les images en "display: block" pour éviter les espaces perdus comme c'était le cas -->
					<img id="cinquante" src="images/50.png" alt=""/>
					<img id="soixante" src="images/60.png" alt=""/>
					<img id="dix" src="images/10.png" alt=""/>
				</div>
			</div>
			<div id="numero"><img src="images/numero.gif" alt=""/></div>
			<div id="footer"><img src="images/footer.png" alt=""/></div>
		</div>
	</body>
</html>


Voilà, en espérant que ça t'aide.
Merci beaucoup pour ton aide et tes conseils, je vais essayer de reprendre tout ce que j'ai fait et j'espère pouvoir régler le soucis.


Merci encore
Smiley bawling

Je ne m'en sors pas.

Pour le texte c'est ok, c'est vrai que c'est beaucoup plus simple à gérer.

Mais pour positionner les images, c'est le calvaire :

- Mon header étant découpé en 3 images, je n'arrive pas à le placer correctement.
- Un espace se crée entre le header et le menu ( j'ai mis margin et padding à 0).
- La ligne sous le menu, dépasse à droite sur le body, pourtant là je n'ai rien changé et ça ne le faisait pas avant.
- Impossible de positionner mes images de droites (1 en haut, 1 au milieu, 1 en bas), idem pour l'image de gauche.

Si j'ai un exemple pour cette page, je me débrouillerais pour les autres, mais là je coince.

Merci


Smiley rolleyes
Peut-être pourrais-tu présenter une version finie ou expliquer où tu as bloqué, pour aider ceux qui liront ces lignes plus tard ... ?

Au fait, pour les espaces sous les images : "display: block" sur l'image, ou encore "line-height: 1px" sur le conteneur.
Sujet clos
Aller à