Conseils conception page web

**redah75** · 20/10/2009, 17h21

Bonjour tout le monde

alors, j'ai corrige toutes les errors que le validateur me retournait sur mon site http://iifiir.org/new/index-home.php, mais je me retrouve face a des erreurs du type "non SGML character" mais je vois pas trop ce que je peux faire!!

j'avoue que je suis un peu perdu car c'est la premiere fois que je cree un site sans tableau et utilisant UNIQUEMENT les divs, de ce fait, j'aurais 4 petites question a vous poser:
1- quel est le meilleur doctype qu'il faut utiliser ??
j'ai mis actuellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">

est ce correct?

2- j'utilise enormement les identifiants de div dans les css (#nom-div),
dans quels cas faut il utiliser les # et les . (pour les class)
je vous serai tres reconnaissant si vous pouvez jeter un coup d'oeil sur ma feuille de style.

3- lorsque j'ai des elements imbriques: faut il creer un code de ce genre ? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="parent">
    <div id="fils1"></div>
    <div id="fils2"></div>
</div>

ou vaut il mieux eviter de creer le div "parent" ???

4- (derniere

) lorsque j'ai juste du texte/image a afficher, est il conseillé de le faire de cette maniere ?:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="id-div">
<div>texte texte text <img src=""...></div>
<div> un autre texte ...</div>
</div>

ou plutot comme ca ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="id-div">
texte texte text <img src=""...><br>
un autre texte ...
</div>

Merci infiniment et bonne soiree

**12monkeys** · 20/10/2009, 21h53

Bonsoir

Envoyé par redah75

1- quel est le meilleur doctype qu'il faut utiliser ??
j'ai mis actuellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">

est ce correct?

Il n'y as pas vraiment de "meilleur" DOCTYPE, il faut choisir selon tes besoins... Chaque DOCTYPE a ses caractéristiques... Celui que tu as choisi est plus permissif que le Strict par exemple...

Envoyé par redah75

2- j'utilise enormement les identifiants de div dans les css (#nom-div),
dans quels cas faut il utiliser les # et les . (pour les class)
je vous serai tres reconnaissant si vous pouvez jeter un coup d'oeil sur ma feuille de style.

Les # ou identifiants (id) ne doivent se trouver qu'une seule fois par page (HTML), si tu dois réutiliser plusieurs fois cet élément alors utilise une classe plutôt qu'un id...

Envoyé par redah75

3- lorsque j'ai des elements imbriques: faut il creer un code de ce genre ? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="parent">
    <div id="fils1"></div>
    <div id="fils2"></div>
</div>

ou vaut il mieux eviter de creer le div "parent" ???

Il faut créer des éléments quand c'est nécessaire, si tu n'as pas besoin du div parent, il ne faut pas le créer, il faut simplifier au maximum. Tout dépend de la situation...

Envoyé par redah75

4- (derniere

) lorsque j'ai juste du texte/image a afficher, est il conseillé de le faire de cette maniere ?:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="id-div">
<div>texte texte text <img src=""...></div>
<div> un autre texte ...</div>
</div>

ou plutot comme ca ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="id-div">
texte texte text <img src=""...><br>
un autre texte ...
</div>

Merci infiniment et bonne soiree

Réponse à combiner à la précédente. De plus la divite est une maladie qu'il faut combattre : c'est le fait d'utiliser des div partout. Il faut utiliser un code sémantique : les balises ont un sens qu'il faut respecter : <p> pour un paragraphe, <ul> pour une liste <li> quand la liste est non ordonnée...
Dans ton exemple précédent, si tes fils sont du texte, il faut utiliser <p> au lien du div...

**redah75** · 21/10/2009, 13h45

Il n'y as pas vraiment de "meilleur" DOCTYPE, il faut choisir selon tes besoins... Chaque DOCTYPE a ses caractéristiques... Celui que tu as choisi est plus permissif que le Strict par exemple...

d'accord, je garde alors le doctype que j'utilise actuellement

et concernant la balise html, faut il mettre <html xmlns="http://www.w3.org/1999/xhtml"> ou <html lang="fr"> ??

Il faut créer des éléments quand c'est nécessaire, si tu n'as pas besoin du div parent, il ne faut pas le créer, il faut simplifier au maximum. Tout dépend de la situation...

dans mon cas sur http://www.iifiir.org/new/index-home.php et dans le header, j'ai imbriqué les div de cette maniere, penses tu que c'est correct??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="header">
			<div id="header1">
                <div id="header1-logo"><img src="img/logo.png" width="513" height="60" alt="IIF"></div>
                <div id="header1-lang">
                	<div style="float: left; padding-top: 12px;">Fran&ccedil;ais<br><a href="javascript:;" title="English web site" class="t">English</a></div>
                    <div style="float: right;"><img src="img/language.png" width="6" height="48" alt="language"></div>
            	</div>
            </div>
 
            <div id="header2">
                <div id="header2-menu"><ul id="menu">
                    <li class="active"><a href="javascript:;">Accueil</a></li>
                    ...
                  </ul>
                </div>
                <div id="header2-search"><form name="form-search" action="" method="post"><input name="kw" type="text" maxlength="30" value="Recherche rapide" class="search"></form></div>
            </div>
 
            <div id="header3">
                <div id="header3-menu-sub"><ul id="menu-sub">
                    <li><a href="javascript:;">Boutique en ligne</a></li>
                    ...
                  </ul>
                </div>
                <div id="header3-date"><? /*afficher la date*/ ?></div>
			</div>
		</div>

éponse à combiner à la précédente. De plus la divite est une maladie qu'il faut combattre : c'est le fait d'utiliser des div partout. Il faut utiliser un code sémantique : les balises ont un sens qu'il faut respecter : <p> pour un paragraphe, <ul> pour une liste <li> quand la liste est non ordonnée...
Dans ton exemple précédent, si tes fils sont du texte, il faut utiliser <p> au lien du div...

OK merci, et en parlant des <p> et <ul>, je vais devoir redefinir ces balises:
-<p>: me conseilles tu de redefinir directement la balise p pour un affichage correct sans retrait... ou plutot lui associer une classe?
idem pour les <ul>, devrais je redefinir cette balise pour personnaliser les puces???

Merci beaucoup a toi et a ce magnifique forum

**12monkeys** · 21/10/2009, 18h25

Envoyé par redah75

d'accord, je garde alors le doctype que j'utilise actuellement

et concernant la balise html, faut il mettre <html xmlns="http://www.w3.org/1999/xhtml"> ou <html lang="fr"> ??

L'attribut xmlns n'est obligatoire que pour les DOCTYPES XHTML : http://xhtml.developpez.com/faq/?pag...#html_doctypes (voir la dernière ligne)

Envoyé par redah75

dans mon cas sur http://www.iifiir.org/new/index-home.php et dans le header, j'ai imbriqué les div de cette maniere, penses tu que c'est correct??

Il y a surement des choses à améliorer dans le sens d'une simplification et d'une réduction du code... Comme : supprimer <div id="header1-logo"> et attribuer le code directement à l'image ; remplacer <div id="header1-lang"> par une liste non ordonnée ; supprimer directement <div id="header2"> et <div id="header2-menu"> et mettre à ce niveau la liste non ordonnée en y incluant si nécessaire le div <div id="header2-search">... Idem pour le <div id="header3"> et <div id="header3-menu-sub">

Je ne suis pas allé plus loin...

Envoyé par redah75

OK merci, et en parlant des <p> et <ul>, je vais devoir redefinir ces balises:
-<p>: me conseilles tu de redefinir directement la balise p pour un affichage correct sans retrait... ou plutot lui associer une classe?
idem pour les <ul>, devrais je redefinir cette balise pour personnaliser les puces???

Merci beaucoup a toi et a ce magnifique forum

Tes paragraphes s'affichent avec un retrait à gauche ? Sinon toujours faire au plus simple : tous tes paragraphes sont ils stylés de la même manière ? alors modifier le style en utilisant p, sinon utiliser une classe...

Mais tu peut aussi profiter de la cascade :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
p { style par défaut pour toute la page }
 
div#element p { style particulier de tous les paragraphes se trouvant dans un div avec un id 'element' }

**redah75** · 21/10/2009, 19h38

L'attribut xmlns n'est obligatoire que pour les DOCTYPES XHTML...

OK, merci beaucoup

Il y a surement des choses à améliorer dans le sens d'une simplification et d'une réduction du code... Comme : supprimer <div id="header1-logo"> et attribuer le code directement à l'image...

ummm, j'ai un peu de mal a comprendre, mais je vais quand meme m'y pencher plus en details demain

quel style devaris je mettre pour la liste non ordonnee pour la langue?

Tes paragraphes s'affichent avec un retrait à gauche ? Sinon toujours faire au plus simple : tous tes paragraphes sont ils stylés de la même manière ? alors modifier le style en utilisant p, sinon utiliser une classe...

OK pour les <p> et concernant les liste (<ul>) daudrait il definir directement cette balise ou plutot creer une classe??

MErci encore une fois

**12monkeys** · 21/10/2009, 19h51

Envoyé par redah75

ummm, j'ai un peu de mal a comprendre, mais je vais quand meme m'y pencher plus en details demain

quel style devaris je mettre pour la liste non ordonnee pour la langue?

Je dis simplement que tu pourrais simplifier ton code ; au lieu de mettre plusieurs balises parfois inutiles...

Envoyé par redah75

OK pour les <p> et concernant les liste (<ul>) daudrait il definir directement cette balise ou plutot creer une classe??

MErci encore une fois

Comme je disais ça dépend des circonstances : si le style que tu veut définir est prépondérant alors attribue le sur la balise p. Si le style que tu veux attribuer ne touche que 5 ou 10% des paragraphes, utilises une classe.

Conseils conception page web

CSS

Vue hybride

Discussions similaires

Partager

Partager