Besoin d'un coup de main pour convertir un design HTML en XHTML CSS

Bonsoir,

Je me suis décidé de passer mon site actuellement en HTML 4.01 aux nouveaux standards : xhtml / css. La transition n'est pas forcement facile quand on a acquis la mise en page avec les tableaux...

Voici à quoi ressemble la version actuelle en HTML : http://www.shepakoifer.com/xhtml/actuel_html.jpg

Et voici ce que j'ai réussi à faire en XHTML : http://www.shepakoifer.com/xhtml/

J'ai donc refait un découpage plus simpliste de mon design, et intégré le tout en xhtml avec la feuille de style en CSS.

Je bloque sur les bordures gauche et droite

#global .border_left
#global .border_right

Que je n'arrive pas à placer en dessous du header et à chaque extrémité du #global.

Sans parler de la compatibilité sous IE qui est une catastrophe. J'attend donc vos suggestions pour réaliser cette transition, ainsi que vos commentaires sur ce que j'ai fais, je demande qu'a apprendre

Merci d'avance
Modifié par SPKF (25 Apr 2006 - 23:21)

Coucou,

<p id=date>Mercredi 26 Avril</p> -> il manque des guillemets autour de date.

Les bordures :
Ce n'est pas la bonne solution : la plus simple est de faire une image de fond pour le div#global, et qui intègre les bordures.

Image d'exemple : http://univers-fusco.com/tests/exemple.png

La même à 1 pixel de hauteur pour réduire le poids : http://univers-fusco.com/tests/fondglobal2.png
(Je te conseille de copier la seconde, afin de l'héberger et l'utiliser pour ton site.)

Il faut oublier les div#border_left et div#border_right, et modifier cette ligne dans le div#global :

#global {
	(...)
	background-color:#FAF5BF;
	(...)
	}

	->

#global {
	(...)
	background: url(http://univers-fusco.com/tests/fondglobal2.png) repeat-y;
	(...)
	}

(Il faudra modifier l'url avec une qui correspondra à l'emplacement de l'image sur ton site.)

Avec ceci, la couleur de fond et les marges (gauche et droite) sont intégrées sur une même image qui va se répéter verticalement.

(Les marges pourront aussi être supprimées sur la bannière définitive -et sur un éventuel pied-de-page.)


->Il faut entourer les noms de polices composées avec des guillemets :

a écrit :
font-family: Trebuchet MS, Verdana, Lucida Grande, Tahoma, Helvetica, Sans-Serif;

Ici, Trebuchet MS n'st pas prise en compte.
->

a écrit :
font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;

Il y aurait beaucoup de choses à revoir pour corriger l'affichage sous IE. (IE ne reconnaît pas les attributs "min-xxx" et "max-xxx"...)
Modifié par (26 Apr 2006 - 13:53)

neko a écrit :
Coucou,

<p id=date>Mercredi 26 Avril</p> -> il manque des guillemets autour de date.

En effet, une petite erreur d'inattention, merci de me l'avoir souligné.
> Corrigé.

neko a écrit :

Les bordures :
Ce n'est pas la bonne solution : la plus simple est de faire une image de fond pour le div#global, et qui intègre les bordures.

Image d'exemple : http://univers-fusco.com/tests/exemple.png

La même à 1 pixel de hauteur pour réduire le poids : http://univers-fusco.com/tests/fondglobal2.png
(Je te conseille de copier la seconde, afin de l'héberger et l'utiliser pour ton site.)

Il faut oublier les div#border_left et div#border_right, et modifier cette ligne dans le div#global :

#global {
	(...)
	background-color:#FAF5BF;
	(...)
	}

	->

#global {
	(...)
	background: url(http://univers-fusco.com/tests/fondglobal2.png) repeat-y;
	(...)
	}

(Il faudra modifier l'url avec une qui correspondra à l'emplacement de l'image sur ton site.)

Bonne remarque, c'est beaucoup plus simple de cette façon, pour obtenir quasiment le même poid d'image.

a écrit :

Avec ceci, la couleur de fond et les marges (gauche et droite) sont intégrées sur une même image qui va se répéter verticalement.

(Les marges pourront aussi être supprimées sur la bannière définitive -et sur un éventuel pied-de-page.)

Justement, il y a un petit détail là dessu, la bordure n'est pas la meme sur toute la page, d'ou le fait d'avoir laissé la bordure sur le header.
Ce petit détail est également présent sur le footer, que je vais tenter d'integré de suite.

a écrit :

Il y aurait beaucoup de choses à revoir pour corriger l'affichage sous IE. (IE ne reconnaît pas les attributs "min-xxx" et "max-xxx"...)

M'en parle pas , que pense tu de faire une feuille de style directement pour IE ?

Merci pour ta réponse

a écrit :
Justement, il y a un petit détail là dessu, la bordure n'est pas la meme sur toute la page, d'ou le fait d'avoir laissé la bordure sur le header.

Ah, c'est donc intentionnel. Dans ce cas, il suffit de l'intégrer sur la bannière, comme c'est le cas.

a écrit :
M'en parle pas , que pense tu de faire une feuille de style directement pour IE ?

Non. Ça n'est pas utile.
Le mieux serait de faire une feuille de style correcte, pour navigateurs conformes, sans se préoccuper d'IE. Ensuite, tenter de corriger les bugs IE (nombreux) sans hacks (c'est à dire passer des valeurs différentes à IE) si possible - dans le cas contraire, il ne faut pas hésiter à y recourir.
Modifié par (26 Apr 2006 - 15:27)

Ok, je vais donc faire quelque chose de propre pour les navigateurs qui respectent le code, et je me pencherais plus sur la compatibilité avec IE.

La bordure du footer est positionnée, reste le bloc du footer qui se balade un peut partout... je cherche je cherche ^^

Petit up car je galère pas mal avec mon header, j'aurais besoin d'un petit peut d'aide

Oui, mais il faut préciser quel type d'aide (ou la nature du problème).

neko a écrit :
Oui, mais il faut préciser quel type d'aide (ou la nature du problème).

Bonsoir à toi neko !

Désolé, j'était resté à mon problème de footer, cette image qui cloture la bordure pour le footer, répétée une seule fois, et ce div#bloc_foot qui me décale tout :s Là dessus, viens s'ajouter un problème, le texte qui doit être dans mon div#bloc_foot ne se place pas bien, soit en haut ou en bas du bloc, mais jamais entre les deux images.

Je ne sais pas trop si j'ai été très clair, si tu veux plus d'infos n'hésite pas

Re-bonsoir !

Deux images servant à former un bloc arrondi pour le pied de page... pèsant environ 540 octets à elles deux...
Une image entière serait encore une fois plus pratique, et en plus, MOINS lourd.

Voici un essai : http://univers-fusco.com/tests/spkf/test.html
Si c'est ce genre de chose que tu veux :

-> l'image : http://univers-fusco.com/tests/spkf/footer.png
-> le code :

CSS

#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	clear: both;
	margin: 0 0 4px 8px;
	width:763px;
	height:26px;
	background: url(footer.png) no-repeat;
	}

#footer p {
	margin: 5px 0 0 0;
	font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	color: #fff;
	}

BALISAGE

<!-- pied de page -->
<div id="footer">	
	<p>
		TousLesGrowShops.com © Tous droits réservés 2005 - 2006
	</p>
</div>
<!-- /fin du pied de page -->

Petite parenthèse sur l'apparence du site :
Tu peux voir que j'ai aligné le texte du bloc "main" sur le bloc menu, et que j'ai laissé une marge à droite du bloc de texte "sidebare". Je trouve ça plus esthétique (mais c'est un avis personnel).

(REMARQUE : le positionnement du bloc "sidebare" est bon (il trouve sa place tout seul), mais j'ai triché pour le le bloc "main", positionné en absolu pour aller plus vite : donc, à ne pas reprendre.)
Modifié par (27 Apr 2006 - 23:29)

Encore une fois je me fait avoir à me compliquer la vie avec ces coins, surtout que le gain d'octet est pas négligeable, des résidus de tableau...

Juste une petit détail, http://www.shepakoifer.com/xhtml/images/foot.png qui était en background dans le div#footer, n'y est plus. En gros, ca cloture la bordure, comme sur l'image du header. Regarde bien, c'est très leger comme detail, mais ça fait partie du design

Sinon, j'ai repris ton CSS, qui bien mieux interpreté que le mien dans IE, il n'y a pas photo !

Une autre chose, je remarque que si le contenu de #main se voit plus long, le texte, ou autre div contenu du #main, sort du bloc

Comment ajuster la taille (height) du main à son contenu ?

Encore merci pour ton aide précieuse

Oui, car la hauteur est fixe dans l'exemple. Tu as du voir que IE ne gère pas "min-height". Pour contourner ça : http://blog.alsacreations.com/2004/08/17/54-min-height-sur-internet-explorer

En général, ne donner aucune valeur à la hauteur lui permet de s'étendre en suivant le contenu. Il faut partir de là, et si ça ne fonctionne pas bien, jouer avec les possibilités offertes : auto, min-height, etc.

Sans parler d'IE le problème est présent sous FireFox, le footer se règle en fonction de la longueur de la #sidebar et non du main, hors dans mon design actuel en HTML, le footer se règle en fonction de la hauteur du main.

J'ai inverse le bloc de la #sidebar avec celle du #main, rien y fait, juste un bricolage du CSS, mais le texte se fou en bas de la #sidebar :s

Je patoge je patoge...