Des conseils svp ^^

Question

Ccile13

18 Jun 2014 à 19:51

Bonjour,

Pourrais-je avoir des conseils sur mon code ? Surtout le CSS mais pourquoi pas le HTML. Je ne sais plus où j'ai lu qu'il valait mieux utiliser les pourcentages, mais on m'a aussi dit que les pixels et les em seraient mieux. Qu'en pensez-vous ?

Merci d'avance

<!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">
    <head>
        <title>Mon petit bazar</title>
		<link rel="stylesheet" type="text/css" href="styles/style.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>

    <body>
		
		<div id="titre_site">
			<!-- mettre une image-->
			<p>
				Mon petit bazar
			</p>
		</div>
		
		<div id="titre_page">
			<!-- mettre une image-->
			<p>
				Accueil
			</p>
		</div>
		
		<div id="menu_site">
			<ul class="rubriques">
				<li><a href="coups_de_coeur.html"> Coups de coeur </a> </li>
				<li><a href="mes_projets.html"> Mes projets </a></li>
				<li><a href="moi.html"> Qui suis-je ? </a></li>
				<li id="actif">Accueil</li>
			</ul>
		</div>
		
		<div id="menu_page">
			<ul class="items" >
				<li><a href="coups_de_coeur.html"> Coups de coeur </a> </li>
				<li><a href="mes_projets.html"> Mes projets </a></li>
				<li><a href="moi.html"> Qui suis-je ? </a></li>
			</ul>
			<ul class="items" >
				<li> <a href="index.html"> Haut de la page</a></li>
				<li> <a href="#ancre_1">Ancre 1</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
			</ul>
			<div id="plus">
				<p>
					contact : <a href="mailto:monpetitbazar@outlook.fr">monpetitbazar@outlook.fr </a> 
				</p>
				<p>
					<a href="http://jigsaw.w3.org/css-validator/check/referer">
						<img style="border:0;width:88px;height:31px"
						src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
						alt="CSS Valide !" />
					</a>
				</p>
				<p>
					<a href="http://validator.w3.org/check?uri=referer"><img
						src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
				</p>
			</div>
		</div>
		
		<div id="contenu">
			<h1 id="ancre_1"> Un titre</h1>
			<p>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			</p>
			
			<h1 id="ancre_2">Un autre titre</h1>
				<p>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			</p>
			
			
		</div>
    </body>
</html>

body 
{
	margin : 5% 5% 5% 5%;
	font-family : verdana, arial, sans-serif;
	font-size : 12px;
	width : 90%;
}

#titre_site
{
	background-color : #99CFFB;
	padding : 0%;
	margin : 0%;
	border-bottom : 1px dotted;
}

#titre_site p
{
	color : #AA0000;
	font-size : 300%;
	font-style : italic;
	text-align : center;
	padding : 1%;
	margin:0%;
}

#titre_page
{
	background-color : #99CFFB;
	padding : 0%;
	margin:0%;
	
}

#titre_page p
{
	font-size : 200%;
	font-style : italic;
	text-align : right;
	padding : 1%;
	padding-right: 15%;
	margin:0%;
}	

#menu_site
{
	background-color : #FFC6AA;
	overflow-y: auto;
	margin : 0%;
	padding : 0%;
}

.rubriques
{
	list-style-type: none;
	margin : 0%;
	padding : 0.5%;
	padding-right : 5%;
	font-size : 110%;
}

.rubriques li
{
	float : right;
	border : 1px dotted black;
	padding : 1%;
	margin-left : 0.2%;
}

.rubriques a:hover
{
	color : black;
	background-color : #99CFFB;
}

.rubriques a 
{
	display: block;
	color: black;
	text-decoration: none;
}

.rubriques #actif 
{
	background-color: #99CFFB;
}

#menu_page
{
	float : left;
	background-color : #FFC6AA;
	width : 15%;
	position : fixed;
	top: 29.5%;
	bottom : 2%;
	margin : 0%;
	padding : 0%;
	overflow : auto;
}

#contenu
{
	margin-left : 20%;
}


.items
{
	border : 1px solid #FFECB7;
	border-radius : 40%;
	width : 90%;
	overflow-y : hidden;
	background-color : #FFD3C1;
	padding : 0%;
	margin-bottom : 7%;
	margin-left: auto;
	margin-right: auto;
}

.items a
{
	color : black;
	display: block;
	text-decoration : none;
}

.items li
{
	list-style : none;
	line-height : 200%;
	text-align : center;
	padding-right : 5%;
	padding-left : 5%;
	margin : 0%;
}

PS Je connais le lorem ipsum, mais j'avais envie de mettre ce texte-là Smiley lol

c_bertho

19 Jun 2014 à 08:50

Bonjour.

D'abord d'un point de vue purement esthétique, je dirais que le choix des couleurs laisse à désirer mais ce n'est que mon avis.

Ensuite tu pourrais d'abord commencer par changer ton Doctype par <!DOCTYPE HTML>, le tien ne correspondant pas vraiment à ce que tu as fais ensuite.

Sinon est-ce voulu que ton menu à gauche ne soit pas fixe ?

Ensuite tu pourrais utiliser des balises type h1,h2,h3 pour les titres ou textes importants sur ta page, c'est plus pertinent que du simple texte avec de la déco CSS.

Enfin pour l'usage des pixels,em... ça dépends surtout de ce que tu veux faire, comme rendre ton site responsive ou non.

Voila Smiley smile

Ccile13

19 Jun 2014 à 22:08

Bonjour,

Merci de cette réponse.
Je n'ai jamais été douée pour les couleurs, mais pour l'instant elles ne me font pas trop mal aux yeux donc je ferai le changement plus tard (si nécessaire Smiley langue

)

Mon doctype ne correspond pas ? C'est-à-dire ?

En fait, je voulais qu'il y ait une colonne verticale à gauche fixe et que le contenu suive la scrollbar, mais je n'arrive pas à mettre une hauteur sur la div (je galère avec les pourcentages) pour qu'elle soit comme je le souhaite : toujours occupant le maximum de place en hauteur (mais sans se superposer aux div des titres), donc je me suis adaptée à ce que je savais faire.

Pour les titres -> malgré les images à mettre ?

J'aimerais le rendre lisible par le plus de lecteur possible. Je sais que pour qu'il soit responsive il faut utiliser @media et tout ça mais je le ferai plus tard (sinon, je trouve que c'est trop d'un coup non ?). Je pensais donc utiliser des pourcentages pour commencer, est-ce une bonne idée ?

Merci encore

thierry

20 Jun 2014 à 15:07

Bonjour,

Mon doctype ne correspond pas ? C'est-à-dire ?

Si tu utilises des balises appartenant au HTML5 (j'ai pas lu attentivement ton code, tu dos utiliser le doctype HTML5, soit : <doctype html>.

Pour une colonne fixed de toute la hauteur de la fenêtre :

#menu_site {
  position: fixed;
  top: 0;
  bottom: 0;
  (...)
}

Attention à la divite ! tout enrober dans des divs n'est pas nécessaire, l'élément ul peut parfaitement jouer le même rôle qu'un div.

<div id="menu_site">
  <ul class="rubriques">
    <li><a href="coups_de_coeur.html"> Coups de coeur </a> </li>
    <li><a href="mes_projets.html"> Mes projets </a></li>
    <li><a href="moi.html"> Qui suis-je ? </a></li>
    <li id="actif">Accueil</li>
  </ul>
</div>

Bonne continuation.

Ccile13

20 Jun 2014 à 19:14

Bonjour,

Merci de ses réponses.
Comment savoir d'où viennent les balises ? Et si j'ai vérifié avec le validateur de W3C, est-ce que ça ne m'assure pas d'être "correcte" ?

Pour la colonne, oui, mais si on voit les titres (de la page et du site) ça se superposerait, chose que je ne veux pas...

Ah d'accord, en fait (je ne sais plus si je l'ai dit) ça vient d'un code que j'ai eu en cours où une div englobait une liste de cette façon...

Merci encore

thierry

20 Jun 2014 à 19:46

Et si j'ai vérifié avec le validateur de W3C, est-ce que ça ne m'assure pas d'être "correcte" ?

Non. le Validateur du W3C est un validateur syntaxique : il peut vérifier s'il manque des balises ouvertes et fermantes, si des balises sont bien imbriquées, quelles balises ne peuvent pas être contenues dans quelles autres, mais il ne peut pas dire si des balises sont utilisées de manière sémantiquement correcte ou si des balises sont superflues (divite).

Pour la colonne, oui, mais si on voit les titres (de la page et du site) ça se superposerait, chose que je ne veux pas...

Pourrais-tu préciser, éventuellement avec une image ? Je ne vois pas ce que tu veux dire.

Bonne continuation.

Ccile13

20 Jun 2014 à 21:09

Ah d'accord... Je pensais que ça prenait au moins en compte les "types" de balises (HTML5, ou autres versions).

Voilà ce que ça donne quand on est tout en haut de la page avec top et bottom à 0.
Ce que je voudrais c'est plutôt :

et

thierry

20 Jun 2014 à 21:53

Rebonjour.

Pour l'image 3, c'est facile, tu donnes à ta colonne de gauche une valeur de top supérieure à zéro pour qu'il soit positionné sous ton menu horizontal, mais, si j'ai bien compris, si tu veux que ton menu gauche remonte jusqu'en haut de page en scrollant, quand le header et le menu horizontal disparaissent, il te faut du JavaScript, et là, je ne peux pas t'aider.

Bonne continuation.

PS : les icônes de validation, c'est moche et c'est ringard, et de toute façon, pour le surfeur lambda, ça ne veut rien dire.

Ccile13

20 Jun 2014 à 23:08

Ok merci

Ah ? Je trouvais ça classe moi Smiley langue

Javscript hein ? Bon, c'est peut-être pas la priorité... Sinon, pour revenir à ma question principale (euh, je l'ai posée non ?) plutôt pour ou contre les pourcentages ?

Merci encore

thierry

21 Jun 2014 à 19:49

Heu, ça dépend. De ton projet (site adaptatif ou non), de tes connaissances en webdesign, etc.

Il n'y a pas que les pourcentages. En fait, la problématique oppose les unités relatives (pourcentages, mais aussi em, rem, ex) et les unités absolues (px, cm, mm, pt).

De plus, tu peux très bien utiliser à la fois des unités relatives et des unités absolues pour des éléments différents de ton site. Ou utiliser des unités relatives dépendant d'unités absolues. Par exemple :

p {
  font-size: 14px;
  line-heignt: 1.5;
}

Je t'invite à lire l'article http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html concernant l'utilisation des ems en webdesign.

Par contre, l'emploi des unités relatives nécessite une bonne compréhension de l'héritage en CSS pour ne pas te retrouver dans des casse-tête de design, voir http://marcarea.com/weblog/2008/04/16/la-taille-des-polices-en-pixels-hell-yeah et http://www.alsacreations.com/tuto/lire/545-Comprendre-l-heritage-et-la-parente-des-styles-CSS.html, http://wdfriday.com/blog/2012/02/font-size-responsive-accessibilite/.

(...) si tu veux que ton menu gauche remonte jusqu'en haut de page en scrollant, quand le header et le menu horizontal disparaissent, il te faut du JavaScript, et là, je ne peux pas t'aider.

... ou alors, tu mets également ton header et ton menu horizontal en position fixed et tout descendra avec le scroll.

Bonne continuation.
Modifié par thierry (22 Jun 2014 - 01:11)

6l20

21 Jun 2014 à 20:13

Salut,

En passant :

thierry a écrit :
...et les unités absolues (px, cm, mm, pt).

Tiens, j'aurai bien vu le pixel comme une unité relative moi, mais je chipote Smiley cligne

thierry

21 Jun 2014 à 21:21

C'est vrai, on tend à l'oublier, la taille des pixels peut varier selon les écrans. Bonne remarque Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Des conseils svp ^^