[Résolu] Gestion des bordures de page via CSS (problème)

(reprise du message précédent)

a écrit :
[Edit by Neya : pour voir le problème, clic sur "commentaire" d'une news par exemple]

Tin zut.. j'ai la version 2 de Mozilla aussi.

Sous Mozilla 2 :
http://img179.imageshack.us/img179/836/screenshot429uz0.jpg

Sous IE 7 (+ Maxthon ou autres):
http://img238.imageshack.us/img238/3484/screenshot430qi0.jpg

Bon je sais ça fait pas avancé le problème... je retourne au taf découpage version "css expliqué par Flo" (^^).. mais je m'explique toujours pas ce phénomène.

NB : j'espère au moins que ce topic sera formateur pour tous les types comme moi qui "entravait rien" au CSS ^^ Ça fait un sacré retour d'expérience Merci encore Flo.
Modifié par neya (11 Feb 2008 - 18:59)

Houla houla houla...

Je vois à peu près quel est le problème (dépassement de flottants) et pourquoi il ne se produit pas dans Internet Explorer (bug de HasLayout). Mais dès que j'essaie d'appliquer un correctif pour que div#bloc_centre vienne bien englober ses enfants et descendants flottants... tout explose.

Cette intégration est tellement faite de bric et de broc que c'en est ingérable.

Comme je le disais, tu as fait ton intégration comme si tu travaillais avec un tableau de mise en forme, mais avec des div à la place des cellules. C'est une erreur, et une erreur du genre irrécupérable.

Donc:
- soit garder la même intégration, mais avec des tableaux à la place des div dans tous les sens;
- soit reprendre l'intégration à zéro en partant sur de meilleures bases (par exemple le schéma ci-dessus).

Oki merci pour ton avis Flo... j'ai pris la 2nd solution... on repart de zéro.
Ça m'apprendra de faire des trucs tout moche en css sans demander l'aide de personne ^^

NB : faut avouer que dans l'art d'assembler tout n'importe comment je dois pas mal exceller quand même XD

Un tout ptit conseil... concernant les zones qui comporteront des liens hypertexte (icones) ou des effet du style onMouseOver/Out (notamment bouton), comment dois je procéder ? (un découpage pour chacune des icônes et chacun des boutons ?)

Cette question est liée à la seconde :
Est il possible d'effectuer un effet de rollover ( onMouseOver / onMouserOut) mais via un CSS ? (car actuellement je feinte en créant les effet depuis l'html.)

Merci d'avance

NB : j'ai du mal à me projeter dans le nouveau design... faut il créer des div en absolu (convenablement positionné) afin d'afficher les effets des boutons ou afin de créer des liens ? Pas facile de passer d'un tableau comportant des cellules à ... pas de tableau :'(
Modifié par neya (12 Feb 2008 - 00:16)

neya a écrit :
Un tout ptit conseil... concernant les zones qui comporteront des liens hypertexte (icones) ou des effet du style onMouseOver/Out (notamment bouton), comment dois je procéder ? (un découpage pour chacune des icônes et chacun des boutons ?)

Oui, chaque bouton sera une image dans le code HTML (élément img), avec texte alternatif qui va bien (<img src="images/icone-contact.png" alt="Contact" />), et si besoin un effet de rollover en Javascript.

Attention cependant à ne pas faire de découpage type tableau pour autant. Si j'ai un en-tête avec un fond général, un logo à gauche et trois boutons à droite, je ne fais pas quatre cellules de tableau mais:
- un conteneur div#header, avec les éléments graphiques non actifs en image de fond (la bordure supérieure de mon cadre visuel par exemple, en background-position: center bottom;);
- un h1 avec l'image de mon logo (texte alternatif qui va bien là encore);
- un menu de trois items (disons un ul avec trois li), chaque item contenant un lien avec une image).

Un aperçu de ce qu'on peut faire en termes de découpage CSS:

neya a écrit :
Est il possible d'effectuer un effet de rollover ( onMouseOver / onMouserOut) mais via un CSS ?

C'est techniquement possible mais cela pose des problèmes d'accessibilité. Utiliser des images avec texte alternatif côté HTML et du Javascript pour le changement de l'image lors du survol est la solution la plus accessible.
Pour les solutions CSS only, il faudra:
- avoir un texte pertinent dans le lien côté HTML;
- cacher ce texte via une technique de remplacement d'image (par exemple un text-indent: -999em;);
- afficher une image de fond portant l'information (pictogramme, intitulé du lien intégré dans l'image, etc.);
- afficher une image différente ou une portion différente de l'image de fond lors du survol (via la pseudo-classe :hover).
Mais mieux vaut ne pas abuser de ce type de technique.

neya a écrit :
faut il créer des div en absolu (convenablement positionné)

C'est une option dans certains cas. Pour le menu de gauche, ça peut être pas mal de le positionner en absolu. Ou bien on se contentera de le faire flotter à gauche et de lui appliquer une marge négative à gauche, par exemple.

Pour le reste... on peut tout faire sans avoir besoin du positionnement absolu.

Ça ressemble au découpage que j'avais imaginé (suite à tes conseils) et sur lequel je bossais hier soir, au détail près que je savais pas encore comment traiter les liens et les effets.

En définitive, grâce à ton screen j'ai l'impression d'être sur la bonne voix... malgré quelques essais qui font peur (grosse différence entre IE et Mozilla). Je te tiens au jus. Merci

neya a écrit :


verdan, j'ai copier/coller ton code sous dream mais le rendu est pas tout a fait celui que j'esperai. Je te remercie tout de même pour l'info. Dans ton code, les menu gauche bas et droit bas ne sont pas étirer et la page centrale n'a plus sa taille d'origine

les menus bas droit et gauche s'étirent avec la hauteur du bloc contenu : ici j'ai mis 35 em, mais tu mets évidemment ce que tu veux...
il me semble que c'est ce que tu demandais. (ou alors j'ai mal compris)

http://img214.imageshack.us/img214/4527/z496tn9.jpg

Effectivement c'est ce que je souhaitais ...
J'ai peut être zappé un peu vite cette solution je m'en excuse.

En attendant, je suis parti sur un modèle un peu plus standart et surtout un peu plus compatible avec les différents navigateurs, comme on a pu me le conseiller.

J'essaye de prendre de la graine sur les conseils de découpages (vrai css et non petit comouflage de tableau et de cellule à la "neya"... oui oui j'ai retenu la leçon) afin que mon travail ne ressemble plus à un truc fait de (dixit ^^) "bric et de broc".

Je te remercie encore pour ta solution , et je matterai tout de même ca ce soir.
Modifié par neya (12 Feb 2008 - 16:37)

ce modèle est valide et compatible IE6-IE7-firefox-opera.

juste une petite correction : il convient de mettre class au lieu de id pour menu_haut et menu_bas puisqu'on en a deux.

je corrige dans mon message précédent

Je rappelle, bien que n'étant pas modérateur, que ce site est dédié au respect et à la promotion des standards et pas aux techniques de kinés ni aux manipulations de rebouteux. Merci de changer le titre de ce post (étirement de colonnes, franchement....)

Bonjour Arsene
Bien que n'étant pas un habitué de ce fofo, je me permet moi aussi de te dire que j'aurai vraiment souhaité tes remarques sur le fond du topic plutôt que sur sa forme
Trêve... je m'excuse pour cet écart, l'erreur est réparé.

[Edit]

a écrit :
Enlarge your column.

Bon oki fallait le prendre au 2nd dégré XD... désolé.. désolé.
[/Edit]

Flo... ça avance.. mais ça recule aussi ...
Par rapport à mon avancement je suis revenu quelques étapes en arrière afin de te décrire un soucis qui m'empêche d'avancer convenablement.

Je souhaiterai que mon design soit compatible avec Mozilla et IE.. donc je fais mais tests de visualisation sur ces 2 nav.

Code 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">
<head>
<title>Essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr">
<link rel="stylesheet" type="text/css" href="style_gloss011.css">



</head>

<body>
	
<div id="conteneur">

<div id="conteneur_centre">
  <p>Texte pour essai</p>
  </div>
</div>

</body>
</html>

Code CSS :

#conteneur {
position : relative;
margin-left: auto;
margin-right: auto; 
width : 666px; 
height : auto;
background : url(test/images_gloss01/haut.gif) no-repeat; /*transparent; */
text-align : center;
}

#conteneur_centre {
margin : 220px;
width : 666px; 
height : auto;
margin-left: auto;
margin-right: auto; 
background : url(test/images_gloss01/bordures.gif) repeat-y; /*transparent; url(test/images_gloss01/bordures.gif) repeat-y;*/
text-align : center;
}

En gros un conteneur et un bloc central à l'intérieur.

Aperçu Dream :
http://img156.imageshack.us/img156/4240/screenshot431wd7.jpg

Aperçu IE (niquel) :
http://img341.imageshack.us/img341/2999/screenshot433xg3.jpg

Aperçu Mozilla :
http://img156.imageshack.us/img156/8976/screenshot434qz0.jpg

1/ Le fond du conteneur se fait complètement rogner par le bloc central (aucune visu du background)
2/ Le fond se déplace à la hauteurdu bloc central, comme si il perdait l'absolu

Que pasa ?
Merci d'avance
Modifié par neya (12 Feb 2008 - 19:49)

neya a écrit :
Que pasa ?

Il se passe qu'IE est bugué (si si...). Il devrait normalement appliquer un comportement CSS standard nommé la fusion des marges, mais il n'en fait rien parce que div#conteneur a le layout.

Lecture indispensable:
Blocs imbriqués et fusion des marges

Lecture utile mais moins indispensable à ce stade:
Qu'est-ce que le HasLayout?

Pour ton test, tu peux rajouter un padding: 1px 0; à div#conteneur, et tu devrais voir une différence sensible.

a écrit :
1/ Le fond du conteneur se fait complètement rogner par le bloc central (aucune visu du background)
2/ Le fond se déplace à la hauteurdu bloc central, comme si il perdait l'absolu

Non: c'est div#conteneur qui fait la hauteur de la ligne de texte et qui «récupère» la marge de 220px en haut et en bas.

L'image s'affiche donc bien sur toute la hauteur de div#conteneur.

Oki oki.. encore un truc super bon à apprendre.. merci pour le lien.

J'ai donc fait l'essai avec un "padding: 1px 0;" et un "overflow: auto;"... ca marche du tonnerre. Par contre, y a t il une solution plus recommandé qu'une autre (simple curiosité) mise à part le faite que l'overflow (dans cet exemple) ne soit pas compatible avec IE6?
Modifié par neya (12 Feb 2008 - 21:12)

Enfin... après plusieurs heures laborieuses... le nouveau design est enfin online... enfin la nouvelle gestion du design.

Peut être un des derniers posts sur ce topic... ^^

Points positifs de la refonte complète (découpage / html / css)
=> Moins de découpage sous Toshop
=> Page plus rapide à charger (ouais je sais c"est un peu lié XD)
=> Meilleur compréhension du langage et des particularités du css
=> Design compatible IE et Mozilla
=> Finit les blocs qui se barrent dans tout les sens lors d'un zoom (ctrl+roulette)

Points négatifs de la refonte complète (découpage / html / css)
=> Découpage un plus chiant à faire sur Toshop (il faut se projeter les futurs "trompe-l'oeil")
=> Beaucoup plus de particularités qu'une gestion du design par tableau (ex récent : fusion des marges)
=> Retour à la case départ.. le problème est maintenant inverse... la page centrale ne s'étire plus.. le texte passe par dessus le footer ><

URL pour visu => www.neyazone.com (clic sur "commentaire" d'une news pour visualiser le défaut)

Bon a mon avis cette fois on touche au but... je post quand même les codes.. vous allez sûrement trouvé avant moi !

CSS :

body {
margin : 0;
padding : 0;
text-align : center;
background : #000000;
font-family : arial;
font-size : 11px;
color : #FFFFFF
}

#conteneur {
padding: 1px 0;
position : relative;
margin-left: auto;
margin-right: auto; 
width : 666px; 
height : auto;
background : url(images/images_gloss01/haut.gif) no-repeat; /*transparent; */
text-align : center;
}

#header_droite {
width:129px;
height:46px;
background-color: transparent;
float:right;
margin : 60px;
margin-right: 20px; 
}

.header01 {
background : url(images/images_gloss01/index_03.gif) no-repeat;
width : 33px;
height : 46px;
margin : 0;
float:left;
}
.header02 {
background : transparent; /* url(images/images_gloss01/index_04.gif) no-repeat; */
width : 32px;
height : 46px;
margin : 0;
float:left;
}
.header03 {
background : transparent; /* url(images/images_gloss01/index_05.gif) no-repeat; */
width : 33px;
height : 46px;
margin : 0;
float:left;
}
.header04 {
background : transparent; /* url(images/images_gloss01/index_06.gif) no-repeat; */
width : 31px;
height : 46px;
margin : 0;
float:left;
}

#menu {
position : absolute;
background : transparent;
width : 348px;
height : 51px;
left: 58px;
top: 128px;
}

.menu01 {
background : transparent; /* url(images/images_gloss01/index_10.gif) no-repeat; */
width : 87px;
height : 51px;
margin : 0;
float: left;
}
.menu02 {
background : transparent; /* url(images/images_gloss01/index_11.gif) no-repeat; */
width : 87px;
height : 51px;
margin : 0;
float: left;
a ref:/forum
}
.menu03 {
background : transparent; /* url(images/images_gloss01/index_12.gif) no-repeat; */
width : 87px;
height : 51px;
margin : 0;
float: left;
}
.menu04 {
background : transparent; /* url(images/images_gloss01/index_13.gif) no-repeat; */
width : 87px;
height : 51px;
margin : 0;
float: left;
}

#conteneur_centre {
margin : 210px;
width : 666px; 
height : auto;
margin-left: auto;
margin-right: auto; 
background : url(images/images_gloss01/bordures.gif) repeat-y;
text-align : center;
}

#bloc_centre { 
width : 578px; 
height : 322px;
margin : 0px;
margin-left: 45px;
margin-right: 40px; 
background : url(images/images_gloss01/centre.gif) no-repeat;
text-align : center;
padding : 10px 50px;
}

#bloc_bas { 
width : 666px;
height : 96px;
margin-left: auto;
margin-right: auto;  
background : url(images/images_gloss01/bas.gif) no-repeat;
text-align : center;
}
#bloc_gauche {
	position : absolute;
	width : 184px;
	height : 267px;
	background : url(images/images_gloss01/gauche.gif) no-repeat;
	text-align : center;
	left: -103px;
	top: 232px;
}
#bloc_gauche_stat {
	position : absolute;
	width : 132px;
	height : 171px;
	background : transparent;
	text-align : center;
	left: 28px;
	top: 68px;
}

#up {
	position : absolute;
	width : 20px;
	height : 20px;
	background : transparent;
	text-align : center;
	left: 605px;
	top: 563px;
}

HTML (uniquement le body) :

<body>
	
<div id="conteneur">

<div id="header_droite">            
   <div class="header01">&nbsp;</div>
   <div class="header02">...</div>
   <div class="header03">...</a></div>
   <div class="header04">...</div>
</div>

<div id="menu">
   <div class="menu01">...</div>
   <div class="menu02">...</div>
   <div class="menu03">...</div>
   <div class="menu04">...</div>
</div>

     <div id="conteneur_centre">
	  <div id="bloc_centre">...</div>
          <div id="bloc_bas">
               <div id="up">...</div>
          </div>

     </div>

<div id="bloc_gauche">
     <div id="bloc_gauche_stat">...</div>
</div>

</div>
</body>

Doctype :

<!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">

J'ai bien essayé de placer #bloc_bas (le footer) en dehors (c'est à dire juste en dessous) du conteneur #conteneur_centre, mais ce dernier arrive en bas de la page , comme si j'avais stipulé un "height : 100%;" dans le #conteneur.

Bizarre... bizarre....
Modifié par neya (13 Feb 2008 - 00:08)

neya a écrit :
=> Beaucoup plus de particularités qu'une gestion du design par tableau (ex récent : fusion des marges)

Sans parler du dépassement des flottants (autre comportement parfaitement normal mais qui peut surprendre), du HasLayout (mécanisme interne d'IE), des bugs de rendu d'IE6, etc.

Mais ces particularités ne sont pas liées à l'utilisation du positionnement CSS. La différence, c'est que lorsqu'on utilise pleinement le positionnement CSS on a statistiquement plus de chances de rencontrer ces problèmes que si on se repose sur une structure à base de tableaux qui évitera qu'on ait à se poser des questions sur ces points dans 85% des cas (il restera les 15% restant, qui passeront pour des bugs inexplicables ou des caprices de tel ou tel navigateur... et on résoudra ces problèmes en bidouillant au ptit bonheur la chance). Bref, pour utiliser correctement le positionnement CSS il faut se coltiner la partie la plus technique du rendu des pages web par les navigateurs (modèle de boite, types de rendu, mode Quirks et mode Standard, comportements des éléments, contexte de formatage, hasLayout), partie technique qui est sinon esquivée grâce à une structure rigide à base de tableau de mise en forme.

Bref, utiliser correctement le positionnement CSS demande de mieux savoir ce qu'on fait. Ça peut sembler être un apprentissage inutile (car on se posera la question: «est-ce que les tableaux ne suffisaient pas?»), mais:
- le positionnement CSS ouvre des perspectives -- pour certaines encore dormantes à cause d'un support pas parfait par les principaux navigateurs -- que les tableaux seuls n'offrent pas;
- lorsqu'on a besoin de traiter un cas assez pointu, que la structure globale utilise des tableaux ou pas, une bonne maitrise de HTML et CSS est nécessaire... et les intégrateurs qui se reposent trop sur les tableaux de mise en forme n'ont en général pas cette maitrise.


Pour revenir à ton intégration:
- tu as deux Doctype, deux éléments HTML, etc. Diagnostic rapide: un problème d'include PHP (on n'inclus pas le code d'une page HTML complète dans une structure de page HTML complète...);
- le problème de dépassement du contenu que tu rencontres est tout à fait logique: tu demandes aux navigateurs de figer la hauteur de div#bloc_centre à 322px; les navigateurs s'exécutent; il faut tout simplement virer ce height: 322px parasite (on pourra par contre jeter un oeil du côté de la propriété min-height);
- côté code HTML sémantique, c'est vraiment pas ça ... mais chaque chose en son temps, je suppose.

a écrit :
il faut tout simplement virer ce height: 322px parasite

Ha enfin ! voila le ptit machin qui me "tannait le mou" depuis un moment >< Je l'avais placé pour essai en plus, ça me permettait de voir la page centrale sous dreamweaver (sinon la page centrale vide est toute aplatie vu qu'il n'y a aucun texte).

Sympa pour les infos et les remarques complémentaire sur la philosophie CSS (particularités, perspectives, comparaison tableau)

a écrit :

tu as deux Doctype, deux éléments HTML, etc. Diagnostic rapide: un problème d'include PHP (on n'inclus pas le code d'une page HTML complète dans une structure de page HTML complète...);

Arf oui ! Effectivement il est fort possible que je me coltine des doublons.. mes "include" font parfois appellent à des pages créées sur des trame HTML. Je vais corriger le tir.

a écrit :
côté code HTML sémantique, c'est vraiment pas ça rolleyes ... mais chaque chose en son temps, je suppose.

Je suis à l'écoute si jamais tu as des conseils ou des liens à me donner... j'en apprends tout les jours et je me régale ^^

NB : pour info, j'ai toujours codé à la "ouanéguene" en essayant de reproduire ce que je voyais ci et là... mais je sais ce que tu vas me dire.. "c'est en forgeant qu'on devient..."

[Edit]
Ah ! J'oubliais ! Un énorme MERCI pour tes explications et ta patience (à toi comme aux autres qui ont participé à ce topic très formateur)
Modifié par neya (13 Feb 2008 - 06:59)

Hé bien si tu as un peu de temps pour avancer encore un peu ton apprentissage, tu pourras lire:

1. http://normandlamoureux.com/cours/xhtml/ (Cours XHTML)
2. http://www.tuteurs.ens.fr/internet/web/html/ (peut-être moins bon que le précédent... je ne les connais pas dans le détail)

Et pour de l'approfondissement (surtout dans une perspective pro):

1. On pourra découvrir:
http://openweb.eu.org/articles/intro_accessibilite/ (Intro généraliste sur l'accessibilité web)

2. Et on n'hésitera pas à utiliser comme référence:
http://www.la-grange.net/w3c/html4.01/cover.html (passer par l'index des éléments et des attributs quand on a besoin d'infos)
http://www.w3.org/TR/CSS21/ (passer par la liste des propriétés ou la table des matières)

Désolé c'était une blague débile, je recommencerai plus, promis.