[Résolu] CSS pb de mise en page !!

J'ai voulu faire un tableau avec ce code :

<div id="fiche_societe">
		<div id="fiche_haut">
				<div style="float:left; margin-top:10px; margin-left:20px; ">%%logo%%</div>
				<div style="float:none; margin-top:10px; margin-right:145px; color:#000000; font-weight:bold">%%nom_societe%%</div>
		</div>
		<div id="fiche_centre">
				<div style="width:200px; margin-left:20px; margin-top:20px; float:left; ">%%photo1%%</div>
		 		<div class="fiche_coord">
					%%adresse_societe%% <br />
					%%nom_ville%%<br />
					Tél. <b>%%telephone_societe%%</b><br />
					Fax : <b>%%fax_societe%%</b><br />
		  			Mobile : <b>%%mobile_societe%%</b><br />
					<a href="mailto:%%email_societe%%">%%email_societe%%</a><br />
		  			<a href="%%web_societe%%" target="_blank">%%web_societe%%</a><br />
					<b>Horaire :</b> <br />
					%%horaire_societe%% 
				</div><br />
				<div class="fiche_coord">
					%%description_societe%% <br />
					<b>Commentaire : </b> <br />
					%%divers_societe%%
				</div>
				<div class="fiche_descom">%%photo2%%</div>
		</div>
		<div id="fiche_bas">
				<div style="margin-left:20px;"><b>Secteur d'activité :</b> %%tableau_secteur%% </div>
		</div>
</div>

Tout se passe bien jusqu'à : %%description_societe%% où il n'y a plus de fond sur IE et où tout est décalé, de plus le bas de la fiche est en haut de la page. Par ailleurs, le fond du centre de la fiche ne se répète pas sur FF alors que je lui ai dit repeat-y !!

Si quelqu'un pouvait me venir en aide, ce serait sympa ! Je joins tout de même le code CSS :

#fiche_societe {
	margin-left: 20px;
	width:514px;
	_width:514px;
	height:auto;
	}
	
#fiche_haut {
	width:514px;
	_width:514px;
	height:50px;
	_height:50px;
	position:relative;
	float:none;
	background-image:url(gifs/camargue-fiche-haut.gif);
	background-repeat:no-repeat;
	}
	
#fiche_centre {
	width:514px;
	_width:514px;
	float:none;
	position:relative;
	background-image:url(gifs/camargue-fiche-centre.gif);
	background-repeat:repeat-y;
	}
	
#fiche_bas {
	width:514px;
	_width:514px;
	height:41px;
	_height:41px;
	float:none;
	background-image:url(gifs/camargue-fiche-bas.gif);
	background-repeat:no-repeat;
	}
	
.fiche_coord {
	width:200px;
	_width:200px;
	font-family: Arial, Helvetica, sans-serif;
	margin-top:30px;
	font-size: 11px;
	color: #000000;
	float:right;
	}
	
.fiche_descom {
	font-family: Arial, Helvetica, sans-serif;
	margin-left:20px;
	font-size: 11px;
	color: #000000;
	clear:both;
	}

A bon programmeur, salut
Modifié par Igor (01 Jul 2005 - 11:55)

Salut,

woullaaa, y a un tas de trucs qui vont pas ^^

Il manque le "bonjour", il manque un titre de sujet qui veut dire quelque chose (dans le salon CSS, c'est assez classique les problèmes de mise en page), il manque le balisage du code [ code], il manque des explications, le code complet, un exemple en ligne si possible etc

Enfin pas mal de trucs quoi...

Pour ton truc, c'est drôlement le foutoir quand même, il y a d'autres balises que <div>, les hacks CSS sont à éviter autant que possible, ton code HTML n'est vraiment pas bon, il faudrait revoir tout ça avant de s'attaquer à la mise en page...

On fait pas un truc propre et fonctionnel à partir d'un truc bricolé

De plus les points d'exclamation m'agressent

TriadPtale a écrit :
De plus les points d'exclamation m'agressent

Lol, t'es dur là

Bonsoir (j'apprends vite ! )

C'était la première fois que je m'exprimais sur le forum, j'étais un peu pressé...
Pour le problème, je l'ai résolu ce matin parce qu'en fait la page .htm était couplée avec une page .php et le problème venait du fait qu'il y avait des instructions sur la mise en page dans la page php.

Par contre, j'ai lu "il y a d'autres balises que <div>, les hacks CSS sont à éviter, ton code HTML n'est vraiment pas bon" et je souhaiterais en savoir un peu plus...

Merci en tout cas, je tire les leçons.

Et bien, regarde ton code, il y a 99% de balises qui sont des <div>, c'est une balise générique qui ne sert que de conteneur aux éléments, or toi tu l'utilises pour tout.

Il y a ce que l'on appelle la sémantique web, c'est à dire utiliser les balises pour quoi elles sont faites, un titre sera balisé avec <h1>, un paragraphe de texte avec <p>, etc

Pour ce qui est de ton code CSS, l'utilisation de la syntaxe avec underscore (un hack), c'est très aléatoire de l'utiliser, rien ne dit que dans les prochaines versions des navigateurs, ce genre de chose ne pose pas problème, et baser sa mise en page sur ce genre de bidouilles est très loin d'être conseillé.

http://forum.alsacreations.com/faq/#item40

C'est vrai, j'avoue que jusqu'à présent, je travaillais avec les tableaux et je me posais pas trop de questions sur le code mais avec les feuilles de style CSS, j'écris directement dans le code et ça me change. Il faut que je regarde tout le contenu de la sémantique web.

Il y aurait-il un lien indispensable pour apprendre là dessus ?

Merci, la prochaine fois, je ferai gaffe !

Ciao

http://www.openweb.eu.org

Dans la rubrique "xhtml" tu devrais trouver de quoi t'abreuver.

Sinon certains tutoriaux du site (ici , alsa) en parlent aussi.

Olivier a écrit :
l'utilisation de la syntaxe avec underscore (un hack), c'est très aléatoire de l'utiliser, rien ne dit que dans les prochaines versions des navigateurs, ce genre de chose ne pose pas problème,

C'est une spéculation abusive car :
- W3C donne explicitement les syntaxes autorisées pour les propriétés de style, et débuter une propriété avec un underscore est parfaitement correcte,
- W3C décrit l'attitude qu'un navigateur standard doit prendre face à une propriété qu'il ne connaît pas : l'ignorer pour faire comme si elle n'avait pas été écrite.
Autrement dit _height et Cie ne doivent pas poser aucun problème aux navigateurs respectueux des standards, ni aujourd'hui, ni dans le futur.

Xavier a écrit :
C'est une spéculation abusive car :
- W3C donne explicitement les syntaxes autorisées pour les propriétés de style, et débuter une propriété avec un underscore est parfaitement correcte,
- W3C décrit l'attitude qu'un navigateur standard doit prendre face à une propriété qu'il ne connaît pas : l'ignorer pour faire comme si elle n'avait pas été écrite.
Autrement dit _height et Cie ne doivent pas poser aucun problème aux navigateurs respectueux des standards, ni aujourd'hui, ni dans le futur.

A supposer qu'IE respecte réellement ces mêmes standards

Xavier a écrit :
C'est une spéculation abusive car :
- W3C donne explicitement les syntaxes autorisées pour les propriétés de style, et débuter une propriété avec un underscore est parfaitement correcte,

Soyons un peu plus précis. L'underscore initial d'une propriété a une signification bien précise en CSS: il signale une propriété hors-norme, relative à une implémentation propriétaire (Vendor-specific extensions). Ces "extensions propriétaires" sont plus souvent implémentées avec l'autre caractère disponible à cet effet, c'est à dire le tiret: -moz-border-radius.

CSS déclare explicitement que l'underscore et le tiret initiaux ne seront jamais exploités à l'avenir dans un autre but par la norme, et resteront réservés à cet usage.

Donc, est-ce une syntaxe correcte ? Non. En l'absence d'identifiant d'implémentation suivant l'underscore lui-même suivi d'un tiret et de la propriété (_moz-height, _op-height), cette syntaxe n'est pas reconnue en CSS, et relève bien des erreurs.

Xavier a écrit :

- W3C décrit l'attitude qu'un navigateur standard doit prendre face à une propriété qu'il ne connaît pas : l'ignorer pour faire comme si elle n'avait pas été écrite.
Autrement dit _height et Cie ne doivent pas poser aucun problème aux navigateurs respectueux des standards, ni aujourd'hui, ni dans le futur.

Eh non, justement.

Il est vrai qu'un agent utilisateur conforme doit ignorer une Vendor-specific extension s'il ne l'implémente pas.

Mais... Nous avons vu que ce n'était qu'une syntaxe incorrecte d'extension propriétaire. D'ailleurs, qui nous dit que le futur navigateur Brocolis 7.51 n'implémentera pas, par exemple, sa propre version de la propriété height avec la syntaxe incorrecte mais plausible _height {...} (la syntaxe correcte étant _bro-height) ?

Surtout, puisque nous sommes en fait dans la gestion de syntaxe incorrecte, qui nous dit également que tous les navigateurs à venir implémenteront correctement les règles CSS de gestion d'erreur ? Que le navigateur dominant du marché le fera demain ?

Enfin, ces syntaxes erronées qui font réagir les validateurs CSS perturbent souvent l'interprétation par ceux-ci des propriétés tout à fait normales qui suivent le hack : la maintenance de la CSS s'en trouve nettement compliquée, puisque des erreurs inexistantes sont alors reportées par le validateur...


Un hack est toujours un risque à mesurer. Après, à chacun de l'assumer comme il l'entend, mais en connaissance de cause



A ce propos, une suggestion pour la FAQ de ce forum, section sur les hacks :
The Attributes of a Good CSS Hack (css-discuss Wiki) :
1. un bon hack ne pénalise pas les futurs parsers CSS plus conformes à la norme
2. un bon hack repose sur une syntaxe valide, des propriétés et des valeurs de propriétés valides
3. un bon hack ne complique pas la maintenance de la feuille de style

Le hack de l'underscore ne respecte ni le point 2, ni le point 3.

C'est lorsque chacun de ces trois points (au moins) est respecté qu'on minimise le risque pris en hackant une CSS.

Les hacks !important et surtout html>selector sont, dans cette démarche, des substituts plus valables, AMHA.
Modifié par Laurent Denis (01 Jul 2005 - 08:29)

Cet argumentaire bien documenté apporte de nombreuses informations fort intéressantes. Cependant le raisonnement associé repose sur un unique point central :

Laurent Denis a écrit :
Donc, est-ce une syntaxe correcte ? Non

En fait il est nécessaire d'être encore plus précis. Cette syntaxe (_height) n'a pas de signification prévue par la norme, en revanche cette syntaxe s'avère correcte. Elle ne doit donc pas mettre en échec le parseur d'un navigateur standard :

CSS 2.1 a écrit :
because the initial dash or underscore is part of the grammar, CSS2.1 implementers should always be able to use a CSS-conforming parser

Par ailleurs il est effectivement bien précisé que cette syntaxe ne sera pas utilisée dans le futur

CSS 2.1 a écrit :
"An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS"

ou encore

"CSS2.1 reserves for future versions of CSS all property:value combinations and @-keywords that do not contain an identifier beginning with dash or underscore"

C'est une bonne nouvelle puisqu'il y a la garantie de ne jamais provoquer aucune collision avec les versions actuelle et futures de CSS.

Enfin l'argument du navigateur Brocolis fait sourire , mais n'apporte pas d'élément décisif. _height n'ayant pas de signification dans la norme CSS, je ne vois aucune raison sérieuse pour qu'un navigateur l'utilise dans une implémentation spécifique. Et s'il était assez fou pour le faire, il pourrait tout aussi bien s'en prendre à _op-height, height... ce qui confère à l'utilisation du hack _height un danger équivalent à l'usage de tout autre propriété face à ce légume dangereux.
Modifié par Xavier (01 Jul 2005 - 18:15)

Xavier a écrit :
Cette syntaxe (_height) n'a pas de signification prévue par la norme, en revanche cette syntaxe s'avère correcte.

Ah... Je n'aurais pas dû employer ce terme qui prétait à confusion.

Soyons clair : c'est une syntaxe invalide en CSS2.1 comme en CSS2.0.

Autre détail, qu'il faudrait ajouter aux 3 critères ci-dessus : ce hack de l'underscore est du type exploitation d'un bug (IE reconnaît abusivement _height par exemple) pour résoudre un autre bug (implémentation incorrecte de height par IE). Comme dit Paul-Peter Koch :

a écrit :
Ces hacks sont intrinsèquement douteux.

Dans un monde idéal, la prochaine version du navigateur concerné résoudrait les deux bugs. Dans un monde indifférent, elle n'en résoudrait aucune des deux. Dans notre monde incertain, la prochaine version du navigateur résoudra un des deux bugs, mais pas l'autre.

Pensez, si vous l'utiliser, que vous aurez peut-être à tout modifier un de ces quatre...

Laurent Denis a écrit :
vous aurez peut-être à tout modifier un de ces quatre

Oui c'est vrai, on ne peut pas être certain que Microsoft ne va pas participer au monde incertain.

Cependant cette remarque ne frappe pas le hack _propriete plus cruellement que les autres (!important, html>selector...) pourtant cités comme appartenant la classe noble "du bon hack". Ces hacks supposés minimiser les risques sont effectivement à égalité parfaite avec _propriete face à l'éventuel monde incertain évoqué.

C'est pourquoi je n'ai pas encore trouvé de raison permettant de déprécier _propriete par rapport à html>selector. Personnellement je lui trouve l'avantage de la concision.
Modifié par Xavier (01 Jul 2005 - 13:56)

Un petit topic à part de celui ci au sujet des hacks ? pour ne pas polluer le présent topic

Ca pourrait être une bonne réflexion et un bon récapitulatif à proposer et en plus pour compléter la FAQ comme suggéré par Laurent, mais ces divers points doivent êtres discuttés.

Enfin pour récapituler pour recentrer la question du topic => les hacks sont à utiliser avec attention et là dans cet exemple, une bonne partie du code repose sur différents hacks ce qui n'est vraiment pas une solution.