XHML 1.0 Strict : soucis d'affichage

Flew · Le 02/05/2009, à 23:41

Plop :)

Je poste mon soucis ici car j'imagine qu'il y a pas mal de dev web qui doivent traîner dans le coin.

J'ai une petite page web pour l'accueil de mon serveur perso.
Par conviction, je souhaite avoir une page valide xhtml 1.0 Strict.

Avec l'aide du 'valideur' du w3c, j'ai la confirmation que le code est bon.
Cependant, la page, qui s'affiche correctement en Transitional, se voit modifiée par le simple passage au Strict (sans changement du code même), et n'étant pas vraiment fort dans le domaine je n'arrive pas à voir d'où vient ce soucis d'affichage.

Voilà la page en Strict et en Transitional (pour comparer). Le CSS est commun aux deux pages et je répète que le code est identique à la différence du doctype.

Si jamais quelqu'un passe par là et a une petite idée, ce serait cool :)

Merci d'avance.

Keuz-Pon · Le 03/05/2009, à 00:29

Les tableaux, çaylemal...

À part cette remarque -pas très constructive, certes, mais somme toute véridique- j'ai bidouillé 2-3 trucs pour essayer de résoudre le problème, mais rien ne bouge, ce qui m'étonne.

Enfin bref, je continue à croire que les DIV font des miracles à où les tableaux se pètent les dents.

Khyl · Le 03/05/2009, à 01:10

Comme Keuz-Pon, je viens de regarder, je peux te proposer si tu le souhaites une autre version sans tableaux qui sera sans doute beaucoup plus légère et bien plus facile à maintenir car c'est bien ça qui pose le souci, plus précisément, c'est la classe center de ton tableau qui donne en strict une dimension de 815x595 et en transitionnal une dimension de 815 x 581. Il y a donc 14 pixels d'écart en vertical et c'est bien ça qui pose le problème.

Les tableaux servent (normalement) uniquement à afficher les données tabulaires, il faut utiliser à fond le css et notamment les div pour bien placer les items sur ton écran.

Dis moi si ma proposition d'aide t'intéresse et si oui je te fais une maquette

Dernière modification par Khyl (Le 03/05/2009, à 01:11)

Khyl · Le 03/05/2009, à 03:25

Finalement, j'ai fait le boulot quand même pour le fun
voilà ce que ça donne sans tableaux, ça fonctionne très bien en strict ou transitionnal

Pour la page html

<!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" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Famille Neyret</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/favicon.png" />
</head>
<body>
<img src="images/header.jpg" alt="header" id="imageheader" usemap="#Map" />
<div id="corps">
	<div id="menu">
		<p><ul>
			<li><a href="guy">Guy</a></li>
			<li><a href="ugo">Ugo</a></li>
			<li><a href="lola">Lola</a></li>
	                <li><a href="aurore">Aurore</a></li>
        		<li><a href="florian">Florian</a></li>
                    	<li><a href="thomas">Thomas</a></li>
                    	<li><a href="murielle">Murielle</a></li>
                    	<li><a href="scrapland">Scrapland </a></li>
		</ul>
                <img src="images/menu_separateur.gif" class="separateur" alt="sep" width="127" height="4" />
    	        <ul>
		        <li><a href="irc">Salon IRC</a></li>
                        <li><a href="munin">Monitoring</a></li>
                        <li><a href="bbclone">Statistiques</a></li>
                        <li><a href="phpsysinfo">Informations sys.</a></li>
		</ul></p><p>&nbsp;</p>
	</div>
	<div id="contenu"><h1><span class="gris">Bienvenue&hellip;</span></h1>
        <p><img src="images/photos.jpg" alt="photos" width="310" height="133" class="photosPositionnement" />

&hellip;sur le serveur web personnel de la famille Rocca-Neyret-Sauvageot. </p>
<p>Ici, vous pourrez trouver les blogs des diff&eacute;rents membres de la famille, ainsi que différents services.</p>

                  <h1><span class="gris">Informations utiles</span> </h1>
                  <p>lo|l blabla test blabla blablabla bal blablabla b bllabl bl'laoieb bllbleo doie doiox. Dejadoirj doie did epas.</p>

<p class="center">
D&eacute;bit binaire :
envoi&nbsp;<a href="/florian/lanmap.png"><img alt="up bandwith" height="12" width="102" src="/florian/bwbar/up.png" /></a>

r&eacute;ception&nbsp;<a href="images/vnstat"><img alt="down bandwith" height="12" width="102" src="/florian/bwbar/down.png" /></a>
</p>

<p class="center">
Disponibilit&eacute; :
totale&nbsp;<a href="http://www.siteuptime.com/statistics.php?Id=69365&amp;UserId=76256"><img width="85" height="16" alt="website uptime" src="http://btn.siteuptime.com/genbutton.php?u=76256&amp;m=69365&amp;c=red&amp;p=total" /></a>
mensuelle&nbsp;<a href="http://www.siteuptime.com/statistics.php?Id=69365&amp;UserId=76256"><img width="85" height="16" alt="website uptime" src="http://btn.siteuptime.com/genbutton.php?u=76256&amp;m=69365&amp;c=green&amp;p=month" /></a>

</p>

<p class="center">
<a href="http://validator.w3.org/check?url=referer"><img alt="XHTML 1.0 Valid" width="80" height="15" src="../images/xhtml.gif" /></a> &Dagger;

<a href="http://www.1and1.fr/?k_id=19220720"><img src="../images/1and1.png" alt="Nom de domaine enregitr&eacute; chez 1and1" width="80" height="15" /></a> &Dagger;
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="CSS 2.1 Valid" width="80" height="15" src="../images/css.gif" /></a>
</p><p>&nbsp;</p>
</div>
</div>
<img src="images/footer.gif" alt="footer" id="imagefooter" />

<p id="footer">Design par <a href="http://www.kitgrafik.com/graphistes/index-g-25.html">DJI</a>. Tous droits r&eacute;serv&eacute;s. | florian@neyret.fr</p>

<p><map name="Map" id="Map">
  <area shape="rect" coords="53,79,284,120" href="" alt="Accueil" />

</map></p></body>
</html>

Et voici ce que j'ai mis dans style.css

* {
margin : 0px;
}

body {
	background-image:url(images/bg.jpg);
	background-repeat: repeat-x;
	background-color:#000000;
}

img { border : none;}

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #1955A3;
	font-weight: bold;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:justify;
	color: #646464;
	padding: 10px;
}

p.center {
	text-align: center;
	vertical-align: super;
}

p#footer {
	vertical-align: super;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-align:center;
	color: #545A6F;
}

#imageheader { display: block; margin: auto; width:815px; height:231px}

#imagefooter { display: block; margin: auto; width:815px; height:33px}

#corps {
	margin: auto; 
	width:815px;
	background-image:url(images/bg_texte.gif);
}

#menu {
	line-height: 13px;
	background-image:url(images/bg_menu.gif);
	background-repeat:no-repeat;
	width:193px;
	padding-left: 0px;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 12px;
	float: left;
}

#menu ul {
	padding: 0px;
	padding-left: 55px;
}

#menu li {
	padding: 0px;
	list-style-image: url(images/menu_puce.gif);
}

#menu li a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #767983;
	text-decoration: none;
}
#menu li a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #767983;
	text-decoration: none;
}

#menu li a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #111111;
	text-decoration: none;
}

#contenu {
	margin-left: 250px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:justify;
	color: #646464;
	width: 540px;
	padding: 0px; 
}

.photosPositionnement {
	float:right;
	margin-left: 15px;
	margin-bottom: 15px;
	width: 310px;
}

.gris {
	color: #113366;
}
.separateur {
	padding: 0px;
	padding-left: 27px;
}

Comme tu peux le voir, mes deux fichiers font la même chose que toi mais le code est assez différent et il passe partout.
Il ne te reste qu'à faire 2 copier-coller si tu le souhaites et hop tu as un code qui tourne.

Dernière modification par Khyl (Le 03/05/2009, à 03:27)

Flew · Le 03/05/2009, à 10:54

Et bien je te remercie beaucoup

À l'avenir j'essaierais d'utiliser les div

Merci encore !

Snake046 · Le 03/05/2009, à 11:03

Keuz-Pon a écrit :

Les tableaux, çaylemal...
À part cette remarque -pas très constructive, certes, mais somme toute véridique- j'ai bidouillé 2-3 trucs pour essayer de résoudre le problème, mais rien ne bouge, ce qui m'étonne.
Enfin bref, je continue à croire que les DIV font des miracles à où les tableaux se pètent les dents.

Tu préfère le CSS ?! Beark !

Flew · Le 03/05/2009, à 11:35

Snake046 : qu'est-ce que tu proposes d'autre comme façon de faire ?

MiNiShOoTeR · Le 03/05/2009, à 11:51

Moi je suis pour une page divisée en différents div (et les div eux-même divisées en div )

Tu indentes à chaque div pour bien s'y retrouver et tu leur colle un id ou une class pour le design en css et ça roule!

Hregrin · Le 03/05/2009, à 12:04

Je confirme, j'ai du me taper la création de plusieurs newsletters ces derniers jours, donc forcément en tableaux (on remercie outlook qui utilise désormais le moteur de rendu html de... MS Word - et ce n'est pas une blague...), je n'ai jamais autant galéré pour composer une page.

Avec des div et du CSS tout est mobile et facile à déplacer. J'ai déjà eu quelques sueurs froides avec les différences d'affichage et ce surtout dans IE6, mais rien de comparable avec la mise en place des tableaux...

De toutes façons tout le monde sera bientôt mis d'accord avec l'arrivée de {display: table;} et {display: table-cell;}

EDIT : pour ceux qui devraient subir la plaie de mettre en page une newletter HTML, un très bon point de la situation sur pompage.net : http://www.pompage.net/pompe/email-html/

Ou comment grâce aux clients e-mail on doit faire tout ce qui devrait être banni des pages HTML...

Dernière modification par Hregrin (Le 03/05/2009, à 12:06)

Khyl · Le 03/05/2009, à 13:01

Snake046 > les CSS sont préférables aux tableaux dans tous les cas où tu n'as pas à présenter à l'utilisateur des données tabulaires (genre un tableau de comptes).

Voici quelques raisons pour lesquelles les CSS sont toujours préférables :
- séparation du texte et de sa présentation : si on veut modifier la charte graphique du site, cela permet de ne pas toucher à la page html et de juste retoucher les CSS
- code de la page html plus lisible
- meilleure accessibilité pour les personnes handicapées
- respect des standards du web
- facilité pour la maintenance des pages : on modifie les CSS et toutes les pages impactées sont automatiquement modifiées, pas besoin de reprendre toutes les pages une à une ou de jouer avec l'éditeur Sed
- code plus propre
- meilleure précision dans le placement des objets

Dans le cas de Flew, j'ai mis
- imageheader
- un calque corps qui contient les calques menu et contenu
- le calque menu est en fait réalisé avec les instructions <ul> et <li> du html
- le calque contenu est une copie de ce que Flew avait déjà fait
- imagefooter
- <p id="footer"> pour la signature

Ce que j'aurais pu améliorer et que je n'ai pas fait parce qu'il était tard et que j'avais sommeil :
- mettre imageheader dans un calque div id="header" pour pouvoir par la suite ajouter éventuellement d'autres choses
- mettre imagefooter et <p id="footer"> dans un calque div id="footer"

Keuz-Pon · Le 03/05/2009, à 13:12

Le CSS est difficile à maîtriser, mais avec le temps, il devient redoutablement puissant (ou puissamment redoutable, au choix).

Bon, je ne l'encense pareillement que parce que je ne suis pas entrain de travailler sur un site web actuellement. Sinon, je pesterais contre cette connerie qui n'affiche jamais ce qu'il faut, qui n'est ni pratique, ni logique, etc.

En réalité, il y a 2 choses que je reproche au CSS:
1/ Ne pas pouvoir y mettre de constantes.
Ce serait pratique de définir quelques attributs et de les enregistrer comme étant une constante, et ainsi la rappeler dans chaque élément qui en a besoin, quelque soit son emplacement. Exemple: une bordure rouge et un fond dégradé noir pour des cadres dans le titre, pour des paragraphes dans le corps et pour la licence dans le pied-de-page. Actuellement, il faut le redéfinir à chaque fois.
2/ Ne pas pouvoir y faire de calcul.
Si j'ai un élément qui fait 200px et que je voudrais que l'autre en fasse 100 de plus, bah je suis obligé de le mettre à 300px. Or, s'il me vient l'envie (ou la nécessité) de changer la taille du premier élément, je devrai aller changer le deuxième.
Alors avec deux éléments, ça passe encore. Mais quand on en arrive à 4-5 imbriqués les uns dans les autres, c'est vachement plus chiant!

Mais à part ça, le CSS, ça poutre sévère.

Hregrin · Le 03/05/2009, à 13:25

Keuz-Pon a écrit :

1/ Ne pas pouvoir y mettre de constantes.
Ce serait pratique de définir quelques attributs et de les enregistrer comme étant une constante, et ainsi la rappeler dans chaque élément qui en a besoin, quelque soit son emplacement. Exemple: une bordure rouge et un fond dégradé noir pour des cadres dans le titre, pour des paragraphes dans le corps et pour la licence dans le pied-de-page. Actuellement, il faut le redéfinir à chaque fois.

En fait de nombreux dev web utilisent des feuilles de style de base qui remettent "leur" style à zéro et travaillent sur cette base. Ce que tu donnes en exemple pourrait se traduire par une feuille 'neutre' dans laquelle tu aurais

h1, p, div#footer {
border: 1px solid red;
background: url('fond-degrade-noir.png') repeat-y;
}

si j'ai bien compris ce que tu voulais dire...

Dernière modification par Hregrin (Le 03/05/2009, à 13:27)

Keuz-Pon · Le 03/05/2009, à 13:56

mmmmh... c'est carrément pas mal comme idée!

Comme quoi, même quand on connaît les attributs, les trucs et astuces, il manque toujours LE truc qui nous fait gagner du temps.

En tout cas, merci Hregrin!

Alain.g · Le 03/05/2009, à 14:31

Bonjour

Voilà pour l'explication :
developer.mozilla.org : Images, tableaux et décalages mystérieuxMDC

Hregrin · Le 04/05/2009, à 08:55

Mais avec plaisir, Keuz-Pon

lawl · Le 04/05/2009, à 09:21

les CSS ou les tableau/DIV sont deux choses différente ont peut utiliser des tableau/div avec css ou sans !
C'est juste une séparation de la forme et du "fond"

Keuz-Pon j'ai l'impression que tes reproche n'en sont pas, tu demande au CSS d'être un langage ce qu'il n'est pas.

Dernière modification par lawl (Le 04/05/2009, à 09:23)

Hregrin · Le 04/05/2009, à 12:08

lawl a écrit :

les CSS ou les tableau/DIV sont deux choses différente ont peut utiliser des tableau/div avec css ou sans !
C'est juste une séparation de la forme et du "fond"

A ceci près qu'un div sans CSS n'a pas de raison d'être ^^

lawl a écrit :

Keuz-Pon j'ai l'impression que tes reproche n'en sont pas, tu demande au CSS d'être un langage ce qu'il n'est pas.

Bah, au départ, ce n'était pas un langage à même de gérer des animations, par exemple... et pourtant il en est capable désormais. Tout ce qui facilite la vie de l'utilisateur est un plus (dans une certaine mesure), et il est vrai que quelque chose comme :

div#id1 {
width: 500px;
}
div#id2 {
width: 'div#id1'/2;
}

...ça pourrait être bien...

CSS est un langage vivant et évolutif, c'est pour ça qu'il est tellement bon malgré ses quelques défauts...

Ceci dit...

Keuz-Pon a écrit :

2/ Ne pas pouvoir y faire de calcul.
Si j'ai un élément qui fait 200px et que je voudrais que l'autre en fasse 100 de plus, bah je suis obligé de le mettre à 300px. Or, s'il me vient l'envie (ou la nécessité) de changer la taille du premier élément, je devrai aller changer le deuxième.
Alors avec deux éléments, ça passe encore. Mais quand on en arrive à 4-5 imbriqués les uns dans les autres, c'est vachement plus chiant!

As-tu essayé de voir comment ça pouvait fonctionner avec des pourcentages ? Vu que des div imbriquées se transmettent des éléments (width, entre autres) par héritage, cela doit pouvoir fonctionner... genre :

div#mere {
width: 800px;
}
div#fille {
width: 50%;
}

ou même, si nécessaire :

div#fille {
width: 110%;
}

disclaimer a écrit :

ATTENTION : solution non testée et non garantie, peut engendrer un risque d'explosion

Dernière modification par Hregrin (Le 04/05/2009, à 12:09)

Flew · Le 04/05/2009, à 17:32

@Khyl : je viens de mettre en place ta solution.
Effectivement, il n'y a plus le décalage.
Par contre, la page n'est plus valide et elle s'affiche bizarrement par rapport à l'orignale (le texte est décalé sur la droite dans le contenu, l'interlignage est plus grand dans le menu et dans le bas, le 'blanc' est beaucoup plus grand alors qu'il est remplit de vide (sans texte).

Je redonne les liens pour comparer mais je pense que j'essaierais de corriger ça quand j'aurais le temps

La version "normale" (transitional) et la version de Khyl (strict)

Dernière modification par Flew (Le 04/05/2009, à 17:32)

Khyl · Le 04/05/2009, à 20:02

Effectivement, j'avais pas fait gaffe au blanc qui était plus grand, excuse moi. Je peux améliorer mon code, je vais faire le nécessaire pour que ça soit le plus proche de ta version initiale. Je bosse dessus et je te redonne ça

C'est juste une histoire de saut de ligne, ça devrait aller vite je pense. Puis je remettrais la page à la norme XHTML, Je ferais ça après diner.

Dernière modification par Khyl (Le 04/05/2009, à 20:04)

Flew · Le 04/05/2009, à 21:08

Je te remercie de t'occuper autant de moi

Bon, va falloir que je me mette sérieusement à niveau histoire de pouvoir faire ça moi-même…
J'étudierais les différences de code

Khyl · Le 04/05/2009, à 21:39

Voici la nouvelle page html

<!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" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Famille Neyret</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/favicon.png" />

</head>
<body>
<div id="imageheader"><img src="images/header.jpg" alt="header" usemap="#Map" /></div>
<div id="corps">
	<div id="menu">
		<br /><ul>
			<li><a href="guy">Guy</a></li>
			<li><a href="ugo">Ugo</a></li>
			<li><a href="lola">Lola</a></li>
	                <li><a href="aurore">Aurore</a></li>
        		<li><a href="florian">Florian</a></li>
                    	<li><a href="thomas">Thomas</a></li>
                    	<li><a href="murielle">Murielle</a></li>
                    	<li><a href="scrapland">Scrapland </a></li>
		</ul>
                <img src="images/menu_separateur.gif" class="separateur" alt="sep" width="127" height="4" />
    	        <ul>
		        <li><a href="irc">Salon IRC</a></li>
                        <li><a href="munin">Monitoring</a></li>
                        <li><a href="bbclone">Statistiques</a></li>
                        <li><a href="phpsysinfo">Informations sys.</a></li>
		</ul><p>&nbsp;</p>
	</div>
	<div id="contenu">
<p><img src="images/photos.jpg" alt="photos" width="310" height="133" id="photosPositionnement" /></p>		
<div id="textepresentation"><h1><span class="gris">Bienvenue&hellip;</span></h1>   	

		<p>&hellip;sur le serveur web personnel de la famille Rocca-Neyret-Sauvageot. </p>
		<p>Ici, vous pourrez trouver les blogs des diff&eacute;rents membres de la famille, ainsi que différents services.</p>

                  <h1><span class="gris">Informations utiles</span> </h1>
                  <p>lo|l blabla test blabla blablabla bal blablabla b bllabl bl'laoieb bllbleo doie doiox. Dejadoirj doie did epas.</p></div>

<p class="center">
D&eacute;bit binaire :
envoi&nbsp;<a href="/florian/lanmap.png"><img alt="up bandwith" height="12" width="102" src="/florian/bwbar/up.png" /></a>

r&eacute;ception&nbsp;<a href="images/vnstat"><img alt="down bandwith" height="12" width="102" src="/florian/bwbar/down.png" /></a>
</p>
<p class="center">
Disponibilit&eacute; :
totale&nbsp;<a href="http://www.siteuptime.com/statistics.php?Id=69365&amp;UserId=76256"><img width="85" height="16" alt="website uptime" src="http://btn.siteuptime.com/genbutton.php?u=76256&amp;m=69365&amp;c=red&amp;p=total" /></a>
mensuelle&nbsp;<a href="http://www.siteuptime.com/statistics.php?Id=69365&amp;UserId=76256"><img width="85" height="16" alt="website uptime" src="http://btn.siteuptime.com/genbutton.php?u=76256&amp;m=69365&amp;c=green&amp;p=month" /></a>

</p>

<p class="center">
<a href="http://validator.w3.org/check?url=referer"><img alt="XHTML 1.0 Valid" width="80" height="15" src="../images/xhtml.gif" /></a> &Dagger;

<a href="http://www.1and1.fr/?k_id=19220720"><img src="../images/1and1.png" alt="Nom de domaine enregitr&eacute; chez 1and1" width="80" height="15" /></a> &Dagger;
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="CSS 2.1 Valid" width="80" height="15" src="../images/css.gif" /></a>
</p>
</div>
</div>
<div id="imagefooter"><img src="images/footer.gif" alt="footer" />

<p id="footer">Design par <a href="http://www.kitgrafik.com/graphistes/index-g-25.html">DJI</a>. Tous droits r&eacute;serv&eacute;s. | florian@neyret.fr</p></div>

<p><map name="Map" id="Map">
  <area shape="rect" coords="53,79,284,120" href="" alt="Accueil" />

</map></p></body>
</html>

Et voici la feuille style.css

* {
margin : 0px;
}

body {
	background-image:url(images/bg.jpg);
	background-repeat: repeat-x;
	background-color:#000000;
}

img { border : none;}

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #1955A3;
	font-weight: bold;
	margin-left: 10px;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:justify;
	color: #646464;
	padding: 10px;
}

p.center {
	text-align: center;
	vertical-align: super;
}

p#footer {
	vertical-align: super;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-align:center;
	color: #545A6F;
}

#imageheader { display: block; margin: auto; width:815px; height:231px}

#imagefooter { display: block; margin: auto; width:815px; height:33px}

#corps 
{
	margin: auto; 
	width:815px;
	background-image:url(images/bg_texte.gif);
}

#menu 
{
	line-height: 13px;
	background-image:url(images/bg_menu.gif);
	background-repeat:no-repeat;
	width:193px;
	padding-left: 0px;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 12px;
	float: left;
}

#menu ul 
{
	padding: 0px;
	padding-left: 55px;
}

#menu li 
{
	padding: 0px;
	list-style-image: url(images/menu_puce.gif);
}

#menu li a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #767983;
	text-decoration: none;
}
#menu li a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #767983;
	text-decoration: none;
}

#menu li a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #111111;
	text-decoration: none;
}

#contenu {
	margin-left: 250px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:justify;
	color: #646464;
	width: 540px;
	padding: 0px; 
}

#textepresentation {
width: 240px;
margin-left: -30px;
margin-top: -10px;
}

#photosPositionnement {
	float:right;
	margin-left: 15px;
	margin-top: 25px; 
	margin-bottom: 15px;
	width: 310px;
	height: 133px;
	vertical-align: top;
}

.gris {
	color: #113366;
}
.separateur {
	padding: 0px;
	padding-left: 32px;
}

On peut sans doute encore améliorer un peu mais ce soir j'ai d'autres trucs sur le feu à finir donc j'ai fait fissa.
La page est sans doute valide au niveau XHTML et tout a été replacé plus finement.

Dernière modification par Khyl (Le 04/05/2009, à 21:42)

Flew · Le 04/05/2009, à 23:39

La page est valide et quasi-parfaite

En fait, le seul détail "gênant" est que le texte ne passe pas sous la photo (et donc prend plus de place en hauteur et laisse un trou), mais si j'ai compris l'organisation en div, le bloc de texte est disposé à droit et donc ça à l'air compliqué (en tout cas à mon niveau) de pouvoir le faire passer dessous (ou alors en procédant autrement, je ne sais pas).

En tout cas, bon boulot Khyl

EDIT : je crois que j'ai finalement trouvé. J'ai passé le width de #textepresentation à 100% et ça à l'air de faire ce que je veux (je pensais que le texte se retrouverais sous l'image mais en fait non).
Il ne me reste plus qu'à trouver comment corriger l'espacement interligne et ce sera OK.

Merci pour toute ton aide !

Dernière modification par Flew (Le 05/05/2009, à 00:02)

Khyl · Le 05/05/2009, à 00:25

En fait j'ai mis le texte à gauche de l'image dans un calque donc il ne passe pas en dessous de l'image. Je pensais que tu voulais qu'il soit à gauche de l'image quoiqu'il arrive. Il suffit d'enlever le calque "textepresentation" pour que ça marche, je suppose, j'ai pas testé.

Pour l'interligne il faut mettre line-height sur le tag P
genre
P {
line-height: 10pt;
}

Ca m'a fait plaisir de t'aider. Graphiquement, j'ai beaucoup aimé ton découpage des images et l'aspect graphique de ton site que je trouve sobre, propre et tout à fait esthétique et original. Bref, ça m'a plu et j'ai eu envie de t'aider à finaliser ta page

EDIT : effectivement je viens de tester tu enlèves le calque div (tags en gras ci-dessous) et ça fonctionne

<div id="textepresentation"><h1><span class="gris">Bienvenue…</span></h1>

<p>…sur le serveur web personnel de la famille Rocca-Neyret-Sauvageot. </p>
<p>Ici, vous pourrez trouver les blogs des différents membres de la famille, ainsi que différents services.</p>

<h1><span class="gris">Informations utiles</span> </h1>
<p>lo|l blabla test blabla blablabla bal blablabla b bllabl bl'laoieb bllbleo doie doiox. Dejadoirj doie did epas.</p></div>

Dernière modification par Khyl (Le 05/05/2009, à 00:34)

Flew · Le 21/05/2009, à 00:14

Bon et bien un dernier merci, tout fonctionne comme je veux (en tout cas pour le moment )

Plus qu'à trouver un texte d'accueil qui déchire et je met en prod

Encore MERCI !!! ^^

Khyl · Le 21/05/2009, à 01:24

Pour le texte d'accueil, je te laisse à ton inspiration
Si tu as d'autres blocages par la suite, n'hésite pas à me faire signe.

A bientôt.

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 02/05/2009, à 23:41

XHML 1.0 Strict : soucis d'affichage

#2 Le 03/05/2009, à 00:29

Re : XHML 1.0 Strict : soucis d'affichage

#3 Le 03/05/2009, à 01:10

Re : XHML 1.0 Strict : soucis d'affichage

#4 Le 03/05/2009, à 03:25

Re : XHML 1.0 Strict : soucis d'affichage

#5 Le 03/05/2009, à 10:54

Re : XHML 1.0 Strict : soucis d'affichage

#6 Le 03/05/2009, à 11:03

Re : XHML 1.0 Strict : soucis d'affichage

#7 Le 03/05/2009, à 11:35

Re : XHML 1.0 Strict : soucis d'affichage

#8 Le 03/05/2009, à 11:51

Re : XHML 1.0 Strict : soucis d'affichage

#9 Le 03/05/2009, à 12:04

Re : XHML 1.0 Strict : soucis d'affichage

#10 Le 03/05/2009, à 13:01

Re : XHML 1.0 Strict : soucis d'affichage

#11 Le 03/05/2009, à 13:12

Re : XHML 1.0 Strict : soucis d'affichage

#12 Le 03/05/2009, à 13:25

Re : XHML 1.0 Strict : soucis d'affichage

#13 Le 03/05/2009, à 13:56

Re : XHML 1.0 Strict : soucis d'affichage

#14 Le 03/05/2009, à 14:31

Re : XHML 1.0 Strict : soucis d'affichage

#15 Le 04/05/2009, à 08:55

Re : XHML 1.0 Strict : soucis d'affichage

#16 Le 04/05/2009, à 09:21

Re : XHML 1.0 Strict : soucis d'affichage

#17 Le 04/05/2009, à 12:08

Re : XHML 1.0 Strict : soucis d'affichage

#18 Le 04/05/2009, à 17:32

Re : XHML 1.0 Strict : soucis d'affichage

#19 Le 04/05/2009, à 20:02

Re : XHML 1.0 Strict : soucis d'affichage

#20 Le 04/05/2009, à 21:08

Re : XHML 1.0 Strict : soucis d'affichage

#21 Le 04/05/2009, à 21:39

Re : XHML 1.0 Strict : soucis d'affichage

#22 Le 04/05/2009, à 23:39

Re : XHML 1.0 Strict : soucis d'affichage

#23 Le 05/05/2009, à 00:25

Re : XHML 1.0 Strict : soucis d'affichage

#24 Le 21/05/2009, à 00:14

Re : XHML 1.0 Strict : soucis d'affichage

#25 Le 21/05/2009, à 01:24

Re : XHML 1.0 Strict : soucis d'affichage

Pied de page des forums