Passage d'une interface tableau a une interface CSS

Question

gregb34

28 Sep 2006 à 01:43

Bonjour,

Je suis en train de modifier le code d'un de mes sites afin de passer d'une interface "tableau" a une interface CSS.

Voila l'interface d'origine : http://www.dentalmaestranza.com

Je cherche a faire la meme en CSS : http://www.dentalmaestranza.com/index_css.htm

Comme vous pouvez le constatez, c'est pas génial. Je débute en CSS.

J'aimerais que le texte, s'aligne comme sur l'original et qu'on voit entierement l'image de fond.
Ensuite j'ai pas mal lutté pour éviter que les images ne se superposent. J'ai reussi en placant un "float:left" exemple ici :

.entete_g{
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	border: 0;
}

.entete_d{
	margin-right: 0px;
	margin-right: 0px;
	border: 0;
}

mais je trouve ca un peu bidouille, il doit y avoir une solution.

Je cherche a faire un code clean..

Merci de votre aide.

<Edit du modérateur> Attention à bien baliser le code posté sur le forum ! Cela contribue très nettement à sa lisibilité. </>
Modifié par mpop (28 Sep 2006 - 12:23)

fvsch

28 Sep 2006 à 12:21

Bonjour gregb34 et bienvenue sur ce forum.

Je crois qu'il va falloir faire preuve d'un peu de rigueur (pas facile quand on débute, bien entendu).

Déjà, tu peux commencer par passer ton code au validateur HTML, pour corriger certaines erreurs de syntaxe. On perd son temps à travailler une feuille de style sur une base HTML qui ne serait pas solide.

Je te propose au passage un exemple de correction :

<div id=contenu>
	<b>
	<font color="#FF8100">
	<p>Bienvenido/a en la web de Dental Implant Maestranza.</p>
	</font>

	<font color="#424B5F">
	<p align="left">Gracias por eligir nuestra clinica para su tratamiento y cuidado dental.</p>
	<p align="left">Nuestro objectivo principal es el de ofrecerle la mas alta calidad de tratamiento.</p>
	<p align="left">Esta pagina web le ofrece informacion general sobre nuestra filosofia de tratamiento, instalaciones, equipo y servicios.</p>
	<p align="left">Le animamos a que compartan este espacio con  familiares, amigo, que pudieran  estar interesados en nuestros servicios.</p>
	</font>
	</b>
</div>

On va faire « la même chose » mais en plus propre.

<div id="contenu">
	<h1>Bienvenido/a en la web de Dental Implant Maestranza.</h1>

	<p>Gracias por eligir nuestra clinica para su tratamiento y cuidado dental.</p>
	<p>Nuestro objectivo principal es el de ofrecerle la mas alta calidad de tratamiento.</p>
	<p>Esta pagina web le ofrece informacion general sobre nuestra filosofia de tratamiento, instalaciones, equipo y servicios.</p>
	<p>Le animamos a que compartan este espacio con  familiares, amigo, que pudieran  estar interesados en nuestros servicios.</p>
</div>

Et le CSS qui va bien avec :

div#contenu h1 {
	font-size: 1.1em;
	color: #FF8100;
}
div#contenu p {
	text-align: left; /* pas forcément nécessaire */
	font-weight: bold;
	color: #424B5F;
}

Et voilà le travail.

Pour savoir pourquoi ton bloc ne fait pas les 600px de largeur comme tu le souhaites, c'est dû au modèle de boîte standard : la largeur totale d'un blog correspond à l'addition de la valeur de la propriété width, des espaces intérieurs (padding) latéraux, et des bordures latérales.

Ici : 600px de width + 250px de padding = 850px.

Il faut donc corriger la largeur, qui correspondra à la largeur utile (celle qui peut accueillir un contenu).

Là encore, je te propose un petit correctif :

#contenu{
	margin-top: 6px;
	padding: 1px 0px 1px 250px;
	width: 350px;
	height:200px;
	background-image: url(img/fond_introduction.gif);
	background-repeat: no-repeat;
}

Bien sûr, il serait dommage de se contenter de copier ce bout de code sans le comprendre. Voici donc un petit commentaire :
- on commence par une marge en haut pour ménager un espace avec le bloc supérieur ;
1 - On spécifie la largeur utile (350px).
2 - On précise les padding pour les quatre côtés : haut, droite, bas et gauche.
3 - Les 250px du padding de gauche s'additionnent aux 350 de la largeur utile, ce qui fait donc une largeur totale de 600px.
4 - Les padding de 1 pixel en haut et en bas servent à éviter la fusion des marges.

Si besoin, il faudra peut-être diminuer légèrement les marges en haut et en bas du titre h1.

Pour finir, que comptes tu faire pour ton menu ? Juste rajouter un lien autour de chaque image ?

gregb34

28 Sep 2006 à 14:25

C'est vraiment sympa de ton aide. Le coup des largeurs, je savais pas. Merci.

Pour le menu : De simple lien sur les images.

En fait, la partie qui me derangeait le plus, c'etait celle juste en dessous du menu. Les 2 images collés. entete_g et entete_d, tu peux me conformer que cette partie n'est pas trop crade ?

fvsch

28 Sep 2006 à 15:29

gregb34 a écrit :
En fait, la partie qui me derangeait le plus, c'etait celle juste en dessous du menu. Les 2 images collés. entete_g et entete_d, tu peux me conformer que cette partie n'est pas trop crade ?

Non, c'est assez propre.
On aurait pu faire plus simples : laisser les deux images en affichage de type en-ligne (normal, quoi). Avec le code HTML actuel, ça ne passe pas : tes deux images font 600px en tout, et ton conteneur en fait autant. Il ne faut donc pas le moindre espace entre les deux. Or, tu une espace (caractère) qui se place entre les deux images. Si ça t'intéresse de savoir pourquoi, tu pourra trouver une explication ici. La solution (telle qu'expliquée dans le message que je viens de donner en lien) consiste à enchaîner les deux balises <img />, sans le moindre espace blanc entre les deux (espaces, tabulations, retours à la ligne).

Mais sinon une image flottante ça passe bien.

Une petite réserve cependant : ces images resteront-elles ainsi, ou bien y aura-t-il un lien sur les images de publicité ?
S'il s'agit uniquement de publicités sans lien, je conseillerais plutôt de laisser les attributs alt des images vides :

<img alt="" />

Par contre, si on considère que l'information est importante (une offre de la société), on peut vouloir que cette information soit accessible à tous. Il faudra donc renseigner les attributs alt, et peut-être longdesc (se renseigner sur ce dernier, je le connais assez mal).

Mais surtout, s'il y a des liens sur les images, il faut que l'intitulé des liens soit explicite :
- soit via le texte (attribut alt) de l'image ;
- soit via l'attribut title du lien.

gregb34 a écrit :
Pour le menu : De simple lien sur les images.

Houlà, a pas bon. Gros problème d'accessibilité.

Je conseillerais plutôt :
1 - de structurer le menu ;
2 - de veiller à la présence d'alternatives textuelles pour les images.

Quelque chose comme ça :

<ul id=menu>
	<li><a href="..."><img src="img/btn/inicio.gif" alt="Inicio" /></a></li>
	<li><a href="..."><img src="img/btn/sorprendete.gif" alt="Sorpréndete" /></a></li>
	<li><a href="..."><img src="img/btn/implantes.gif" alt="Implantes" /></a></li>
	<li><a href="..."><img src="img/btn/clinica.gif" alt="La clinica" /></a></li>
	<li><a href="..."><img src="img/btn/contacto.gif" alt="Contacto" /></a></li>
</ul>

Note : étendre l'image contacto.gif pour qu'elle comprenne l'image de remplissage (sans texte).

Ensuite, pour mettre tout ça sur une seule ligne :
- on met à zéro les marges et les padding pour ul ;
- on passe les li en display: inline ;
- on met tout le code du menu sur une seule ligne pour ne pas avoir d'espaces entre les images.

Ou une variante :
- on met à zéro les marges et les padding pour ul ;
- on passe les li en float:left.

gregb34

28 Sep 2006 à 15:51

OK, franchement merci, car les explications sont nickels chromes.... BRAVO!

En fait, j'ai fait compliqué car je souhaitais faire un espace entre mes 2 images. Une alignée a gauche et l'autre aligné a droite. avec une largeur 600px par exemple, et 2 images de 295px, il y a aurait un battement de 10px(La taille des images est foireuses. Faudra que je retouche)

Voila voila. En tout MERCI BCP a vous!

Raphael

Administrateur

28 Sep 2006 à 16:15

gregb34 a écrit :
Voila voila. En tout MERCI BCP a vous!

Eh bien, on dirait presque que ce sujet est [Résolu] ? Smiley cligne

gregb34

29 Sep 2006 à 01:13

Presque fini Smiley cligne

Je cherche a savoir comment faire un Espace entre les 2 images qui sont entre le menu et le "contenu". Je pars du principe que la somme des largeurs de mes images ne fera pas 600px.

Thanks

Aaa autre, chose, quand tu me dis d'"etendre" l'image contacto.gif, tu entends quoi par la ?
Modifié par gregb34 (29 Sep 2006 - 02:14)

fvsch

29 Sep 2006 à 01:59

gregb34 a écrit :
Je cherche a savoir comment faire un Espace entre les 2 images qui sont entre le menu et le "contenu". Je pars du principe que la somme des largeurs de mes images ne fera pas 600px.

Deux solutions :
- avec des flottants, la première image en float left et la deuxième en float right ;
- sans flottants, un padding-right sur l'image de gauche ou un padding-left sur l'image de droite.

gregb34 a écrit :
autre, chose, quand tu me dis d'"etendre" l'image contacto.gif, tu entends quoi par la ?

J'entends par là qu'il me semble peu judicieux d'insérer une image (et il serait encore pire d'insérer un li+image) pour réaliser un simple espacement. Une solution simple pour avoir ton bouton « contact » aligné à droite serait de faire une image qui prendrait toute la largeur restante (celle du bouton et celle de l'espace « vide » à sa gauche).
Sinon, on peut toujours garder le principe de l'image vide, mais dans un menu en liste non ordonnée (ul, li) on fera attention à ne pas créer d'item de liste (li) pour caser cette image. On peut faire ceci :

<li><img src="espacement.png" alt="" /><a href="..."><img src="contact.png" alt="Contact" /></a></li>

C'est une solution qui n'est pas souple (si on veut changer la mise en page, il ne suffira pas de modifier la feuille de style et les images liées, il faudra aller triturer le code HTML également), mais qui a l'avantage d'être accessible.

Si on avait voulu faire plus subtil (ce que je ferais probablement si j'avais à m'en occuper moi-même), on aurait alors joué avec les images de fond, et sans doute les flottants.

gregb34

29 Sep 2006 à 02:16

Oups, tu as repondu pendant j'editais... Et j'ai mis un li + img pour l'espace en attendant, je vais corriger car c'est pas beau apparement.

Quand j'aurais changer la taille des mes gif, je testerais au passage, tes solutions pour l'espacement entre les 2 images.

Si on fait abstraction de cela j'arrive a ca :
http://www.dentalmaestranza.com/index_css.htm

Qu'en pensez vous ? Des ameliorations possibles ?

Par contre, je me suis heurté a un probleme, j'arrive pas a faire un espace entre les differents block, nottament entre le menu et les entetes...

J'ai testé avec les margin-top mais rien a faire Smiley decu

fvsch

29 Sep 2006 à 11:21

gregb34 a écrit :
Par contre, je me suis heurté a un probleme, j'arrive pas a faire un espace entre les differents block, nottament entre le menu et les entetes...

C'est un contrecoup de l'utilisation des flottants. Cf :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

En fait, tes deux blocs qui contiennent des flottants ne font pas la hauteur des images ou des boutons, mais font très précisément 0px de haut (les flottants sortent du flux). Pour forcer les flottants à rentrer dans le flux, on peut créer un contexte de formatage via l'utilisation de la propriété overflow. Le problème, c'est que ça ne suffira pas pour Internet Explorer, et qu'il faudra donc utiliser le HasLayout pour obtenir un effet semblable, par exemple en donnant une largeur fixe au bloc.

Oui oui, je sais, ça a l'air compliqué dit comme ça.

#menu{
	padding: 0;
	width: 600px; /* Fait rentrer les flottants dans le flux avec IE 6 */
	overflow: hidden; /* Fait rentrer les flottants dans le flux avec les navigateurs « conformes » */
	margin: 8px 0;
	list-style-type: none;
}
#block_entete{
	margin: 8px 0;
	width: 600px;
	overflow: hidden;
}

Sujet clos

CSS et mise en forme, CSS3

Passage d'une interface tableau a une interface CSS