Aide pour la mise en forme xhtml/css

Question

italiasky

6 Jan 2008 à 12:09

Bonjour,

J'aurais besoin d'aide pour découper mon site en le rendant valide xhtml/css.

Comment le découperiez-vous ?
Y a-t-il des méthodes de bases sur lesquelles partir en fonction des types de design ?
Faut-il des containers ?

J'ai lu les tutos mais j'aurais besoin de vos réponses concernant mon cas ?

Voici ce que je ferais déjà en xhtml :
Est-ce que je pars bien ou pas ?


<body>
<img id="badge" src="images/ruban.png" alt="" width="127" height="129" />

<div id="container">

  	<div id="header">
    
                <img id="logo" src="images/logo.jpg" width="153" height="76" alt="" />
		<img id="slogan" src="images/slogan.jpg" width="241" height="44" alt="" />
  		<ul id="menu">
		  	<li id="presentation" class="presentation_active"><a href="#"></a></li>			
			<li id="inscription" class="inscription_noactive"><a href="#"></a></li>
                        <li id="espace_membre" class="espace_membre_noactive"><a href="#"></a></li>
		</ul>
        </div>
    
</div>
</body>

Voici le design
http://private.monwebcv.com/essaiMCV.jpg

Alors déja pour le badge (le ruban) en haut a gauche, j'ai mis ca :
C'est un png transparent, donc sous IE6 il ne faut pas qu'il se mette.


#badge
{
	display: block;
	visibility: visible !important;
	visibility: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
}

Merci de votre aide
++
Modifié par italiasky (06 Jan 2008 - 12:10)

fvsch

6 Jan 2008 à 13:18

italiasky a écrit :
Comment le découperiez-vous ?

Heu... en se basant sur les différents éléments de contenu, et en rajoutant un conteneur pour englober différents éléments voire pour doubler un conteneur (<div id="header"><div id="header-inner">...</div></div>), par exemple?

Difficile d'être plus précis sans faire le découpage à ta place. Smiley cligne

(Au passage, je n'aime pas trop la notion de «découpage», un peu trop orientée «grille avec tableaux de mise en page» à mon gout. Une petite lecture: Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?)

italiasky a écrit :
Voici ce que je ferais déjà en xhtml :
Est-ce que je pars bien ou pas ?

Non. Tu as oublié le texte alternatif d'un certain nombre d'images qui en auraient besoin. Et tu n'as pas placé d'intitulés pour les liens de ton menu (liens vides).
Mais sinon c'est plutôt correct.

En passant: je ne suis pas sur qu'un conteneur global pour tous les éléments du site soit très utile pour ce design. Je ferais plutôt:

<body>
	<div id="header"><div id="header-inner">
		<h1><img src="..." alt="Mon Ouaibecévé (beta)" /></h1>
		<p id="sous-titre"><img src="..." alt="Le CV simple, rapide et gratuit" /></p>
		<ul id="menu">...</ul>
		<p id="bouton-gauche"><a href="..."><img src="..." alt="Cévé sur Internet" /></a></p>
		<p id="lien-contact"><a href="..."><img src="..." alt="Nous contacter" /></a></p>
		<!-- Les boutons agrandir/réduire le texte sont générés ici en Javascript par un script JS externe -->
	</div></div><!-- #header -->

	<div id="main"><div id="main-inner">
		...
	</div></div><!-- #main -->

	<div id="footer"><div id="footer-inner">
		...
	</div></div><!-- #footer -->
</body>

J'ai doublé à chaque fois les principaux conteneurs. À priori, ça n'est nécessaire que pour l'en-tête, mais ça pourrait s'avérer utile pour les autres aussi et ça ne fait pas de mal, tant qu'on n'alourdit pas excessivement la structure HTML au point de ne plus s'y retrouver. Smiley smile

italiasky a écrit :
C'est un png transparent, donc sous IE6 il ne faut pas qu'il se mette.

Nonsense, comme disent nos amis anglo-saxons. Pour plusieurs raisons:
- un correctif pour IE6 en bonne et due forme passera en priorité par des commentaires conditionnels (voir la FAQ du forum au sujet des hacks CSS et des commentaires conditionnels);
- de toute façon, il n'y a pas besoin d'utiliser un PNG transparent dans ce cas précis (le fond de l'en-tête étant régulier).
Sinon, le positionnement absolu est effectivement ce qu'il faut utiliser ici.

italiasky

6 Jan 2008 à 13:36

Florent V. a écrit :

Heu... en se basant sur les différents éléments de contenu, et en rajoutant un conteneur pour englober différents éléments voire pour doubler un conteneur (<div id="header"><div id="header-inner">...</div></div>), par exemple?

Euh je ne comprends pas trop pourquoi doubler un conteneur ?
Si il y a un div directement dans un div, on peut en laisser que un et mettre dans le premier div, toutes les propriétés non ?
Enfin je ne vois pas très bien l'intérêt de doubler a chaque fois les conteneurs, vous pouvez m'expliquer svp ?

Florent V. a écrit :
Une petite lecture: Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?)

Oui j'ai déjà lu mais la pratique c'est un peu plus dur ! lol

Florent V. a écrit :
Non. Tu as oublié le texte alternatif d'un certain nombre d'images qui en auraient besoin. Et tu n'as pas placé d'intitulés pour les liens de ton menu (liens vides).

Pour le texte alternatif des images, j'avais bien mis la balise alt, j'ai juste rien mis dedans pour pas surcharger pour le moment.
Et pour les liens de mon menu, en fait, ce sont que des images donc il n'y a pas de textes... c'est pour ca que je n'en ai pas mis, je suppose que c'est une mauvaise approche ? lol

Florent V. a écrit :
En passant: je ne suis pas sur qu'un conteneur global pour tous les éléments du site soit très utile pour ce design.

Donc plutôt un conteneur "global" pour chaque partie c'est ca j'ai bien compris ce que vous voulez dire ?

Florent V. a écrit :
<body>
	<div id="header"><div id="header-inner">
		<h1><img src="..." alt="Mon Ouaibecévé (beta)" /></h1>
		<p id="sous-titre"><img src="..." alt="Le CV simple, rapide et gratuit" /></p>
		<ul id="menu">...</ul>
		<p id="bouton-gauche"><a href="..."><img src="..." alt="Cévé sur Internet" /></a></p>
		<p id="lien-contact"><a href="..."><img src="..." alt="Nous contacter" /></a></p>
		
	</div></div>

	<div id="main"><div id="main-inner">
		...
	</div></div>

	<div id="footer"><div id="footer-inner">
		...
	</div></div>
</body>
J'ai doublé à chaque fois les principaux conteneurs. À priori, ça n'est nécessaire que pour l'en-tête, mais ça pourrait s'avérer utile pour les autres aussi et ça ne fait pas de mal, tant qu'on n'alourdit pas excessivement la structure HTML au point de ne plus s'y retrouver.

Je comprends pas pourquoi vous dites avoir oublier a chaque fois les principaux conteneurs ? ce ne sont pas header, main, footer ? il y en a encore des autres à rajouter ?

Florent V. a écrit :

Nonsense, comme disent nos amis anglo-saxons. Pour plusieurs raisons:
- un correctif pour IE6 en bonne et due forme passera en priorité par des commentaires conditionnels (voir la FAQ du forum au sujet des hacks CSS et des commentaires conditionnels);
- de toute façon, il n'y a pas besoin d'utiliser un PNG transparent dans ce cas précis (le fond de l'en-tête étant régulier).
Sinon, le positionnement absolu est effectivement ce qu'il faut utiliser ici.

Ben en fait, je voulais que quand on rétrécis la taille de la fenetre, mon logo passait sous le ruban mais qu'il y avait que le ruban et autour transparent donc pour laisser apparaitre le logo qui passe en dessous, vous voyez ce que je veux dire ?

Merci

Je vais faire un essai un peu plus avance et je vous montre Smiley cligne

italiasky

6 Jan 2008 à 14:17

Re

Bon j'ai essayé en partant de ce que vous avez dit mais c'est pas trop ca Smiley ohwell

lol
Voici pour voir : essai

Le code xhtml :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titre</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

	<div id="header">
    
    	<div id="header-inner">

            <h1><img src="images/logo.jpg" width="153" height="76" alt="" /></h1>
    
            <p id="slogan"><img src="images/slogan.jpg" width="241" height="44" alt="" /></p>
    
            <p id="badge"><a href="..."><img id="badge" src="images/badge.png"  width="127" height="129" alt="" /></a></p>
    
          	<p id="contact"><a href="..."><img src="images/contact.gif" width="26" height="20" alt="" /></a></p>
		
        </div>
        
	</div>

</body>
</html>

Et CSS :


body
{
	margin: 0;
	padding: 0;
	text-align: center;
	background: white;	
	background-image: url("bg.jpg");
	background-repeat: repeat-x;
}

img
{
	margin: 0;
	border: 0;
}

div#header
{
	margin: 0 auto 0 auto;
	min-width: 780px;
	max-width: 960px;
	border: 1px dotted red; /* pour voir */
}

div#header-inner
{
	margin: 0;
	padding: 0;
	text-align: left;
}

div#header-inner h1
{
	margin: 7px 0 0 0;
	padding: 0;
}

p#slogan
{
	float: left;
	margin: 23px 0 0 10px;
	padding: 0;
}

p#badge
{
	position: absolute;
	top: 0px;
	left: 0px;
}

p#contact
{
}

Merci de votre aide

fvsch

6 Jan 2008 à 16:11

italiasky a écrit :
Euh je ne comprends pas trop pourquoi doubler un conteneur ?

Cela permet par exemple d'avoir un div#header sur toute la largeur de la page et qui portera en image de fond le bandeau gris (si on le met sur body, ça marche aussi, mais comment fera-t-on pour le pied de page?... autant utiliser le même principe pour l'en-tête et le pied de page). Et un deuxième bloc, div#header-inner, qui aura une largeur fixe ou fluide, et sera centré via les marges automatiques.

D'ailleurs, à la réflexion je corrigerais la structure du bandeau ainsi:

<div id="header">
	<div id="header-inner">
		<h1><img src="..." alt="Mon Ouaibecévé (beta)" /></h1>
		<p id="sous-titre"><img src="..." alt="Le CV simple, rapide et gratuit" /></p>
		<ul id="menu">...</ul>
		<p id="lien-contact"><a href="..."><img src="..." alt="Nous contacter" /></a></p>
		<!-- Les boutons agrandir/réduire le texte sont générés ici en Javascript par un script JS externe -->
	</div><!-- #header-inner -->
	<p id="bouton-gauche"><a href="..."><img src="..." alt="Cévé sur Internet" /></a></p>
</div><!-- #header -->

Ça permettra de positionner div#header en relatif, p#bouton-gauche en absolu, div#header-inner en relatif également, et peut-être le bouton de contact en absolu par rapport aux limites de div#header-inner par exemple.

italiasky a écrit :
Pour le texte alternatif des images, j'avais bien mis la balise alt, j'ai juste rien mis dedans pour pas surcharger pour le moment.

Autant y penser dès le départ.

italiasky a écrit :
Et pour les liens de mon menu, en fait, ce sont que des images donc il n'y a pas de textes...

Donc on devrait avoir des images dans le code HTML, avec attribut alt correctement renseigné.

italiasky a écrit :
Donc plutôt un conteneur "global" pour chaque partie c'est ca j'ai bien compris ce que vous voulez dire ?

Ben euh non, si c'est pour chaque partie ça n'est plus un conteneur global...

italiasky a écrit :
Je comprends pas pourquoi vous dites avoir oublier a chaque fois les principaux conteneurs ? ce ne sont pas header, main, footer ? il y en a encore des autres à rajouter ?

J'ai dit que je les avais doublés, pas oubliés...

italiasky a écrit :
Ben en fait, je voulais que quand on rétrécis la taille de la fenetre, mon logo passait sous le ruban mais qu'il y avait que le ruban et autour transparent donc pour laisser apparaitre le logo qui passe en dessous, vous voyez ce que je veux dire ?

Hmm oui, dans ce cas le PNG-24 peut aider effectivement. Smiley smile

italiasky a écrit :
Bon j'ai essayé en partant de ce que vous avez dit mais c'est pas trop ca

J'y arrive pour ma part sans trop de problèmes, à partir du code en place sur cette page et en faisant des modifications en live avec Firebug. Donc ça devrait être jouable.

Bien sûr, ça demande de maitriser un peu le positionnement CSS. Parmi les concepts utiles ici:
- marges par défaut;
- phénomènes de fusion des marges;
- positionnement flottant;
- gestion du dépassement des flottants;
- positionnement absolu;
- positionnement absolu par rapport à un conteneur positionné en relatif.

Bref, la base presque complète du positionnement CSS. Smiley cligne

italiasky

6 Jan 2008 à 16:38

Bon je modifie tout doucement... ca va un ptit peu mieux Smiley ohwell

lol

Pour voir c'est par ici

Mais il y a quelque chose que je ne comprends pas là...

J'ai mis une bordure sur h1 qui est dans div#header-inner et c'est le div header-inner qui a cette bordure !!
Il y a un problème non ?
Du coup quand je mettais une bordure top dans h1, ca ne fonctionnait pas, tout descendait !
Mais avec un padding ca se mets comme je veux mais bon le margin me semblait logique !

Pourquoi ?

Et autre petite question, pour placer a coté du logo, le sous-titre, étant donné que tout les deux sont des blocs, ils ne se mettent pas l'un a coté de l'autre, est-ce que je dois les changer en inline ? ou je mets le logo en float left ?

Merci
Modifié par italiasky (06 Jan 2008 - 16:44)

fvsch

6 Jan 2008 à 19:58

italiasky a écrit :
J'ai mis une bordure sur h1 qui est dans div#header-inner et c'est le div header-inner qui a cette bordure !!
Il y a un problème non ?

Non, ce n'est pas le div#header-inner qui a cette bordure. Et non, il n'y a pas de problème, c'est un résultat logique. Utilise Firebug.

italiasky a écrit :
Du coup quand je mettais une bordure top dans h1, ca ne fonctionnait pas, tout descendait !
Mais avec un padding ca se mets comme je veux mais bon le margin me semblait logique !

Tu connais la fusion des marges?

italiasky a écrit :
Et autre petite question, pour placer a coté du logo, le sous-titre, étant donné que tout les deux sont des blocs, ils ne se mettent pas l'un a coté de l'autre, est-ce que je dois les changer en inline ? ou je mets le logo en float left ?

Le h1 en display: inline ou en float: left sont deux solutions jouables. Ça ne sert à rien de mettre l'image elle-même en display: inline (c'est déjà son cas...) ou en float: left, vu que ça n'empêchera pas le h1 de prendre toute la largeur.

À la liste des connaissances requises que je dressais ci-dessus, je rajoute les notions d'éléments de type bloc et d'éléments de type en-ligne, tant qu'à faire. Smiley cligne

italiasky

6 Jan 2008 à 21:56

Florent V. a écrit :

Non, ce n'est pas le div#header-inner qui a cette bordure. Et non, il n'y a pas de problème, c'est un résultat logique. Utilise Firebug.

Je ne comprends pas ! Pourtant sur la page html, on voyait bien la bordure rouge tout autour du div header-inner sur toute la largeur et non que autour du h1... Vous voyiez la même chose que moi au moins ? Je suis sous Firefox.
J'ai installer Firebug mais je dois voir quoi ?

Enfin bref, j'ai changé maintenant, ca va apparement.

Florent V. a écrit :
Tu connais la fusion des marges?

Déja entendu mais je ne sais plus trop ce que c'est...

J'ai rajouté le menu mais je suppose que ca ne va pas vous plaire ! lol
C'est une technique que j'ai vu, on découpe pas chaque image mais on fait une image commune qu'on bouge en fonction de ce qu'on veut afficher.
C'est vraiment pas bon cette technique ?

Vous préconisez quoi ?

Et encore une petite question, quand on rétrécie la fenêtre, tout se met l'un en dessous de l'autre, c'est embêtant, ce n'est pas possible que les parties restent sur le header ?
J'ai essayé en mettant un min-width dans div#header-inner, ca fonctionne mais le problème c'est que du coup les éléments ne se rapprochent plus l'un de l'autre jusqu'au maximum, le menu reste collé à droite du div#header-inner, et du coup le logo passe trop vite sous le ruban qui est tout a gauche.
Sans ce min-width, tout se rapproche bien (logo, slogan, menu) et le logo n'est pas en dessous du ruban mais à partir d'une taille de la fenetre, tout passe l'un en dessous de l'autre.

Vous voyez ce que je veux dire ?
J'arrive à régler le problème avec min-width comme j'ai dis plus haut mais ca enlève le comportement de départ qui me plaisait en fait...

Merci de votre aide
Bonne soirée

fvsch

6 Jan 2008 à 22:56

italiasky a écrit :
J'ai installer Firebug mais je dois voir quoi ?

Il fallait voir que le h1 prenait toute la largeur de div#header-inner, car par défaut un élément de type bloc prend toute la largeur disponible dans son conteneur. On peut le voir avec Firebug, grâce à l'outil «Inspect» qui affiche les contours, marges et padding d'un élément quand on passe dessus.

italiasky a écrit :
Déja entendu mais je ne sais plus trop ce que c'est...

C'est un concept qu'il faut absolument connaitre, de même que les dépassements de flottants. Donc:
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

italiasky a écrit :
C'est une technique que j'ai vu, on découpe pas chaque image mais on fait une image commune qu'on bouge en fonction de ce qu'on veut afficher.
C'est vraiment pas bon cette technique ?

Non, c'est vraiment pas bon.
Cette technique pose des problèmes d'accessibilité. Elle fait reposer l'information sur l'affichage de l'image. Or, on n'est jamais totalement sûr que l'image s'affiche correctement... ou que l'utilisateur soit à même de la voir.

Il y a des techniques qui consistent à avoir un contenu texte comme intitulé du lien, puis à cacher le texte du lien pour afficher «à la place» une image de fond (ou une partie d'image de fond). Mais elles gardent des problèmes d'accessibilité (image non chargée ou désactivée et CSS actifs = pas d'information visible).

italiasky a écrit :
Vous préconisez quoi ?

L'image porte une information, elle doit donc être dans le code HTML. Donc:

<ul>
	<li><a href="..."><img src="..." alt="Intitulé de mon lien" /></a></li>
	<li><a href="..."><img src="..." alt="Intitulé de mon lien" /></a></li>
	<li><a href="..."><img src="..." alt="Intitulé de mon lien" /></a></li>
</ul>

Et s'il y a effet de rollover, Javascript fait ça très bien.

Sinon, on peut simplifier en faisant un rollover CSS... s'il ne s'agit que de changer une image de fond à proprement parler, et de garder un texte dans le code HTML qui sera affiché et mis en forme via CSS. Pour cette maquette, ça me semble tout à fait possible.
Voici un exemple qui illustre ce principe:
http://css.alsacreations.com/xmedia/exemples/menunew/menu4.html

Si vraiment on n'a pas envie de se fouler (ou si on est pressé par le temps et qu'il faut travailler à partir du code existant à l'heure actuelle Smiley cligne

) et qu'on veut utiliser une technique avec des images de fond avec texte hard-coded, on placera au moins des intutilés texte dans les liens et on utilisera une technique de remplacement d'images, par exemple celle utilisant text-indent (et pas display: none ou visibility: hidden.

italiasky a écrit :
Et encore une petite question, quand on rétrécie la fenêtre, tout se met l'un en dessous de l'autre, c'est embêtant, ce n'est pas possible que les parties restent sur le header ?

En utilisant min-width ou width, si. (Attention toutefois à la compatibilité IE6 pour min-width. Voir la FAQ.)

italiasky a écrit :
du coup les éléments ne se rapprochent plus l'un de l'autre jusqu'au maximum, le menu reste collé à droite du div#header-inner

Les éléments de ton en-tête ont tous une largeur déterminée. Autant donner une largeur fixe à div#header-inner (minimum 790px à priori), et bien sûr garder le centrage horizontal via les marges automatiques.

Si tu utilises min-width et max-width, avec un écran large ça sera la largeur maximale qui s'applique. Il faut adapter ton design en fonction... ou ne pas utiliser une largeur fluide.

Sinon, tu pourrais aussi utiliser une largeur fixe, et du padding sur div#header-inner pour ménager un espace à gauche pour le ruban. Par contre, pour que ça soit centré il faudra ménager le même espace (padding) à droite.
Exemple:

div#header-inner {
	width: 800px;
	margin: 0 auto;
	padding: 1px 70px 1px 70px;
}

italiasky

8 Jan 2008 à 18:25

Florent V. a écrit :
Il fallait voir que le h1 prenait toute la largeur de div#header-inner, car par défaut un élément de type bloc prend toute la largeur disponible dans son conteneur. On peut le voir avec Firebug, grâce à l'outil «Inspect» qui affiche les contours, marges et padding d'un élément quand on passe dessus.

Effectivement, c'est bon à savoir ! Smiley smile

Florent V. a écrit :
Si vraiment on n'a pas envie de se fouler (ou si on est pressé par le temps et qu'il faut travailler à partir du code existant à l'heure actuelle ) et qu'on veut utiliser une technique avec des images de fond avec texte hard-coded, on placera au moins des intutilés texte dans les liens et on utilisera une technique de remplacement d'images, par exemple celle utilisant text-indent (et pas display: none ou visibility: hidden.

Je ne comprends pas trop cette technique ? Je ne vois pas comment servirait text-indent ? Ce n'est pas pour faire une indentation de texte, un décalage ?

Je laisse de côté l'histoire du centrage du tout pour le moment, je me suis penché sur le menu.

Ca fonctionne bien sous IE7 et Firefox mais pas sous IE6...

Sous IE6, ne s'affiche que le <li> qui a la class .active apparement.
Ou est l'erreur ?

Merci
Bonne soirée

Sujet clos

CSS et mise en forme, CSS3

Aide pour la mise en forme xhtml/css