[TUTO 2 colonnes] 2 problèmes

Bonjour,

Design XHTML/CSS complet avec 2 colonnes de même hauteur :
ça se passe assez mal avec konqueror 3.5.5.

Tout le contenu se trouve dans une boîte de hauteur très faible et avec un ascenseur en prime :



Ca marche très bien avec la version 3.5.4 de konqueror...

Si quelqu'un a une explication, voir une correction... merci !
Modifié par DocFabio (17 Nov 2006 - 17:31)

Un détail cette fois.

Si l'on suit le tutoriel on fait à l'étape 2 :

div#footer {
	position: absolute;
	[b]width: 100%;[/b]
	bottom: 0;
}

et dans ce cas, le pied déborde sur la droite (pourquoi ???).

Mais la page du tutoriel ne présente pas le problème !
Et en effet, dans la css utilisée, on trouve plutôt :

#footer {
	position: absolute;
	[b]width: 750px;[/b]
	bottom: 0;
}

DocFabio a écrit :
Si l'on suit le tutoriel on fait à l'étape 2 :

div#footer {
	position: absolute;
	[b]width: 100%;[/b]
	bottom: 0;
}

et dans ce cas, le pied déborde sur la droite (pourquoi ???).

L'élément positionné en absolu avec une largeur de 100% prendra 100% de la largeur de son plus proche ancêtre positionné. Si ce plus proche ancêtre positionné est le conteneur global que l'on a limité en largeur (à 750px), alors l'élément positionné en absolu aura une largeur de 750px. Sinon, s'il n'y a pas d'élément positionné (en relatif ou en absolu) parmi les ancêtres de l'élément positionné en absolu, il prendra 100% de la largeur de body.
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html

Salut.

Le résultat sous Konqueror est en effet très curieux. Manifestement, il y a un problème avec la gestion de la propriété overflow.

Tu es sûr de n'avoir indiqué aucune hauteur sur le div central ou sur les colonnes ?

Est-ce que le résultat est différent en utilisant overflow: hidden à la place de overflow: auto ?
Modifié par Sopo (17 Nov 2006 - 18:02)

mpop a écrit :

Si ce plus proche ancêtre positionné est le conteneur global que l'on a limité en largeur (à 750px), alors l'élément positionné en absolu aura une largeur de 750px.

Justement, il me semble que le parent direct est div#global dont la largeur est fixée à 750px... et pourtant ça déborde !
Modifié par DocFabio (17 Nov 2006 - 18:10)

Sopo a écrit :

Tu es sûr de n'avoir indiqué aucune hauteur sur le div central ou sur les colonnes ?

Non, je m'en suis tenu au tutoriel... (l'image envoyée qui montre le problème correspond à la page sur le site d'Alsacreations !).

Sopo a écrit :

Est-ce que le résultat est différent en utilisant overflow: hidden à la place de overflow: auto ?

Oui, ça règle le problème !

... le problème et ta solution m'échappent complètement !

Merci beaucoup en tout cas !
Modifié par DocFabio (17 Nov 2006 - 18:18)

DocFabio a écrit :
Ca marche très bien avec la version 3.5.4 de konqueror...

Et avec la 3.5.2 également (en toute logique...). Je penche pour un bug introduit dans la version 3.5.5... et qui sera, on peut l'espérer, résolu dans la 3.5.6.

DocFabio a écrit :
Justement, il me semble que le parent direct est div#global dont la largeur est fixée à 750px... et pourtant ça déborde !

Attention, on respire et on relit : le parent direct est-il positionné ? C'est à dire : la valeur de position pour cet élément est-elle relative ou absolute ?

Ensuite, penser au modèle de boîte CSS : 100% + border + padding, ça dépasse les 100%. Attention aux border et autres padding, donc !

mpop a écrit :

Et avec la 3.5.2 également (en toute logique...). Je penche pour un bug introduit dans la version 3.5.5... et qui sera, on peut l'espérer, résolu dans la 3.5.6.

C'était mon intuition aussi... en tout cas, ce potentiel bug ne provoque rien de visible sur le Acid2 test, konqueror le passe toujours parfaitement !

Merci, et bonne soirée.

mpop a écrit :

Attention, on respire et on relit : le parent direct est-il positionné ? C'est à dire : la valeur de position pour cet élément est-elle relative ou absolute ?

Beh... absolute.

mpop a écrit :

Ensuite, penser au modèle de boîte CSS : 100% + border + padding, ça dépasse les 100%. Attention aux border et autres padding, donc !

Oui, j'ai déjà réussi à provoquer ce problème et effectivement, ça ressemble à ça.

Mais, je voulais surtout mettre en avant qu'il y avait un décalage entre le texte du tutoriel et la css effectivement utilisée pour le mettre en page.

Donc, je pense que l'auteur a eu le problème, a corrigé sa css mais n'a pas répercuté sur le texte du tutoriel.

Le résultat devrait être le même avec overflow en auto ou en hidden. C'est certainement un petit bug de Konqueror. Bon à savoir, en tous cas

DocFabio a écrit :
Beh... absolute.

Le pied de page est positionné en absolu. Le conteneur global, lui, est positionné en relatif. Donc il est positionné, et pourra servir de référent pour le positionnement absolu du pied de page avec les propriétés top|right|bottom|left.

bonsoir ,

une alternative assez peu evoqué serait d'utiliser un:

display:table;
width:100%; /* ou valeur plus approprié a la page ou css deja present */

Ces 2 lignes ont l'avantage de mettre a l'abris d'une icompatiblite avec l'overflow:hidden/auto; pour englober les flottants et de conferer le layout sans equivoque a l'element concerné dans IE.

++
Modifié par gcyrillus (18 Nov 2006 - 01:44)

Je ne sais pas si on peut parler d'une "incompatibilité" dans ce cas-ci. C'est clairement un bug du navigateur. Qu'est-ce qu'on fait si un navigateur s'avère comprendre le display: table de travers et n'applique pas le contexte de formatage ?

bonjour

quand je parle d'incompatibilité , je pensais a un post recemment passé , ou le overflow etait incompatible avec un height:1%; pour IE , par exemple.

Quand au probleme de "mauvaise implementation eventuelle" du display:table; , je dirais que la , tout comme cette exemple sur l'overflow , il s'agirait d'un bug du navigateur.

Le display:table; fait partie de toute un "famille" , de css2 et n'est pas nouveaux , juste peu connu , delaissé ou bien il perd de l'interet du a son nom de "valeur" . TABLE ?

Une page de 1998 :
http://www.editions-eyrolles.com/css2/tests/tables/tables1.htm
ou on pouvait deja tester si la petite famille display:table et CIE etait implementé ou pas dans le navigateur. Je comprends tout de suite alors que si display:table , est implemente , il ne l'est pas seul car il fait parti d'une methode , donc un minimum efficace et copiant le comportement d'un tableau qui ne laisse pas s'echapper les flottants .

Tout compte fait , cela me parait beaucoup plus logique que d'appliquer un overflow !? , detournement d'une regles css au profit d'une maitrise accrue du rendu visuel , ou bien provoquement d'un bug pour englobé les flottant ?

Tiens donc , je sais plus , l'overflow regle un bug ou en provoque un ?

Autre methode , mais qui, elle, ne passe pas du tout dans firefoxe , est le display:inline-block ! , Même effets pour IE , activation du "haslayout" et englobage (ou demarquage) des flottants .

Ces "methodes" ne sont pas nouvelles mais font partie de la panoplies des medicaments possibles , car IE est aussi capable de ne pas englober les flottants et de glisser dessous.

En fait , pour se premunir des effets "secondaires" des flottants , on a plusieurs options possibles, et aucunes d'elles n'est universelle.

le <hr> (ou autre) en clear .
ou un "simili <hr>" génere avec le pseudo :after
l'overflow , ( a la mode en ce moment )
le display : table , table-cell , table-row et/ou inline-block.
le float lui-même (un parent flottant englobe les enfants fottants.).
et pour IE toutes les autres methodes conferant le "haslayout".

Autant les connaitres et faire usage de celles qui conviennent le mieux selon le contexte de la page .

Le defaut de l'overflow , si cela en est un , ce n'est pas juste la barre de scroll ou le contenu caché , mais ils donnent aussi la capacité a un element de "percevoir" les flottant autour de lui , il ne glissera plus dessous et calculera sa marge a partir du flottant et plus du bord du parent conteneur , est ce encore un defaut ou une articularité meconnue ?.

Enfin , pour le display:table ; ou il est implementé ou pas , ensuite , y'aucune assurance pour se mettre a l'abris de la loi de "murphy" .

++

Bonjour,

Ayant pourtant acheté le livre CSS2 il y a bientôt deux ans, je n'ai toujours que des bases dans le domaine (le positionnement et moi, pour l'instant ça fait vraiment 2).

Je viens de réaliser (trois fois de suite) le tutoriel en "copiant/collant" bêtement les morceaux de code (HTML, CSS et CSS pour IE), et à chaque fois (oui oui) le footer est décalé (je dirais de 20px) vers la droite.
Quand j'ai un "width: 100%;", le footer fait bien la bonne taille mais est décalé de 20 px vers la droite (il déborde sur la droite, et n'est pas calé à gauche).
Quand j'ai un "width: 750px;" comme cela a été conseillé un peu plus haut, j'ai toujours le décalage à gauche (mais à droite ça marche parfaitement).
Quand j'ai un "width: 770px;", j'obtiens exactement le même résultat qu'avec "width: 100%".

J'ai testé l'affichage avec Firefox 2, Maxthon (moteur IE) et IE 7 (et là c'est la même chose même si en plus j'ai tout à gauche au lieu d'être centré... mais ça m'intéresse pas pour le moment), et j'obtiens la même chose.

...help...

Merci d'avance,

MeLu-la-pas-douée

Salut MeLu.

Il n'y aurait pas des marges qui manquent quelque part ? La largeur du conteneur du footer est de 770px, mais il y a un padding de 10px de chaque côté, pour l'effet de la bordure.

Avec

#footer {
   width: 750px;
   margin: 0 10px;
   ...
}

ça devrait fonctionner ?

Encore plus bizarre, pour que ça marche j'ai :

div#footer {
	position: absolute;
	width: 770px;
	margin: 0 0 0 -10px;
	bottom: 0;
	background: #7fcf2e url(img/footer.png) repeat-x;
	color: #fff;
	}

ou :

div#footer {
	...
	margin: 0 -10px;
	...
	}

Sauf que dans le deuxième cas la marge négative est des deux côtés.

Bref même si mon problème est résolu (merci pour l'idée ^^), mon souci c'est que logiquement ça n'aurait pas dû arriver en copiant/collant le code donné sur le site... serait-ce dû à ceci :

div#global {
	min-height: 100%;
	width: 750px;
[b]	padding: 0 10px;[/b]
	margin: 0 auto;
	position: relative;
	padding: 0 10px;
	background: #fff url(img/global.png) center repeat-y;
	}

?
Modifié par MeLu (15 Dec 2006 - 12:07)

Re.

Le padding sur #global sert à laisser un peu d'espace pour les bordures ombrées, sur toute la hauteur de la page.

En faisant cela, j'ai réduit la largeur disponible pour le texte (arrière-plan blanc) à 750px (770 - 2*10). Par conséquent, le pied de page doit faire 750px de large.

Attention cependant à ne pas ajouter de marges ou de padding à #footer, sinon ceux-ci s'ajoutent à la largeur de 750px. Dans le tutoriel, j'ai mis un padding et des marges au paragraphe qui se trouve à l'intérieur de #footer, mais pas directement à ce dernier.