Bonjour Neva, bienvenue sur Alsacréations
En fait, lorsque j'ai regardé ton code, je me suis rendu compte qu'il y avait plusieurs notions que tu n'avais pas encore réellement assimilées.
Dans un premier temps, il y a la sémantique du document. A vrai dire, tu mets des div à tout va alors qu'il faudrait mettre des balises représentatives de leur contenu.
Par exemple, pour le bloc "zone_menu_i", c'est une liste non ordonnée et le bloc "zone_contact_i" ressemble plus à un paragraphe.
voir cet article :
http://openweb.eu.org/articles/respecter_semantique/
Ton code aurait donc dû plus ressembler à ceci :
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exemple</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="stylesIE.css" /><![ endif]--> <!-- Supprimer l'espace au sein du endif -->
</head>
<body>
<ul>
<li>
<a href="index.html"><img src="img/menu_portfolio-off.gif" width="76" height="10" alt="portfolio" /></a>
</li>
<li id="exp">
<a href="experiences.html"><img src="img/menu_exp-off.gif" width="89" height="10" alt="expériences" /></a>
</li>
<li id="illus" >
<img src="img/menu_illus-on.gif" width="104" height="10" alt="illustrations" />
</li>
</ul>
<p>
<a href="cv-gaelle-le-floc-h.pdf" target="_blank"><img src="img/bt_cv.gif" width="15" height="15" alt="cv" /></a>
<img src="img/bt_slash.gif" width="7" height="15" alt="/" />
<a href="mailto:******"><img src="img/bt_contact.gif" width="54" height="15" alt="contact" /></a>
</p>
</body>
</html>
styles.css
@media screen, projection
{
html
{
font-size: 100%;
font-family: Optima, "Trebuchet MS", Lucida, Arial, Geneva, Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
background-color: white;
color: black;
}
body
{
font-size: .85em;
}
ul
{
list-style-type: none;
padding-left: 10px;
}
img
{
border: 0;
}
p
{
margin-left: 120px;
}
#exp
{
padding-left: 10px;
}
#illus
{
padding-left: 20px;
}
}
stylesIE.css
@media screen
{
ul
{
margin-left: 0;
}
}
Le deuxième problème est, comme tu peux le remarquer, que tu n'as pas besoin de toutes ces classes... d'autant plus que parfois, un id semble préférable du fait seul un élément est affecté d'un style particulier.
voir cet article :
http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id
Pour le positionnement, de simples remplissages (padding) et marges (margin) suffisent. Il est inutile de passer par un positionnement flottant (float).
voir ces articles sur le positionnement (à connaitre par coeur) :
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/
Une autre chose, qui n'a rien à voir mais qui a toute son importance, ton site est complètement inaccessible pour celui qui ne dispose pas des images. Il te faut, pour parer à cette éventualité, renseigner correctement l'attribut alt de tes images. Ainsi, l'utilisateur peut toujours naviguer.
voir cet article:
http://openweb.eu.org/articles/accessibilite_images/
Du coup, je crois que tu as un peu de lecture aujourd'hui.
Modifié par koala64 (03 Sep 2007 - 07:05)
