Aller au contenu

pb avec les boites verticales

adn

Par adn
dans (X)HTML et CSS

 Partager

Sujets conseillés

adn

adn

Posté
Posté

Slt,

C'est les css mais c'est aussi très agaçant :evil:

Dans l'exemple de sibelius ici :

http://www.alsacreations.com/articles/mode...d_haut_fixe.htm

Ca marche bien à condition que la colonne centrale soit toujours la plus longue ce qui n'est pas précisé, dommage !

J'espère d'avoir le pied de page qui s'aligne sur la colonne la plus longue des trois (gauche, droite et centre) , eh bien non je n'y arrive pas. Et dans mon cas le menu gauche est souvent plus long que la colonne du centre.

Comment feriez-vous ??

Si sibelius passe par là ?

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté
Ca marche bien à condition que la colonne centrale soit toujours la plus longue ce qui n'est pas précisé, dommage !

ça, c'est le problème des colonnes obtenues en position absolue : les colonnes latérales sont ici totalement extraites du "flux" vertical de la page, et n'ont plus aucun effet sur les autres éléments. Pour déterminer la position verticale du pied de page, il ne reste donc que le seul élément en flux, c'est à dire la colonne centrale...

J'espère d'avoir le pied de page qui s'aligne sur la colonne la plus longue des trois (gauche, droite et centre) , eh bien non je n'y arrive pas. Et dans mon cas le menu gauche est souvent plus long que la colonne du centre.

Ce type de mise en page peut être aisément réalisé avec les flottants :

- contenu en flux

- colonnes latérales flottantes

- pied de page en flux avec une propriété clear:both qui le rejette sous les flottants.

PS: Raphael a un gros préjugé envers les flottants ;)

Lien vers le commentaire
Partager sur d’autres sites
adn

adn

Posté
  • Auteur
Posté

MERCI :)

C'est ce que je viens de faire, et çà marche ! Mais si je veux une colonne centrale variable en fonction de la page, là çà ne va plus le faire, non ?

Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté (modifié)
MERCI :)

C'est ce que je viens de faire, et çà marche ! Mais si je veux une colonne centrale variable en fonction de la page, là çà ne va plus le faire, non ?

Non c'est justement le problème avec cette méthode en flottants : ils ne vont pas s'adapter automatiquement à la largeur de l'écran.

C'est pourquoi je les ai évités.... mais sache qu'il n'y aura PAS de solution miracle en CSS.

Modifié par Sibelius
Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté (modifié)
Non c'est justement le problème avec cette méthode en flottants : ils ne vont pas s'adapter automatiquement à la largeur de l'écran.

?

Des width en % règlent le problème.

<edit>Voir les pages d'exemple de http://openweb.eu.org/articles/initiation_float/ </edit>

Modifié par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

Tiens, il arrive qu'on soit ennuyé par les 3 colonnes en flottants parce que le contenu placé en colonne central est précédé par celui du menu de gauche (dans le HTML brut)

Un petit essai amusant pour commencer son HTML avec le contenu central, en intervertissant à l'écran les deux premiers flottants grâce à la position relative :

body {
margin: 0;
padding: 0;
}
#gauche,#droite,#centre {
margin: 1em 0;
}
#gauche {
float: left;
width: 25%;
background-color: yellow;
position: relative;
right: 45%;
}
#droite {
width: 25%;
background-color: yellow;
float: right;
}
#centre {
float: left;
width: 45%;
background-color: red;
position: relative;
left: 27.5%;
}
#pied {
clear: both;
background-color: yellow;
}

<body>
<div id="centre">centre</div>
<div id="gauche">gauche</div>
<div id="droite">droite</div>
<div id="pied">pied</div>
</body>

Lien vers le commentaire
Partager sur d’autres sites
adn

adn

Posté
  • Auteur
Posté

ouais.

C'est pas si bien foutu que çà le css !

Les floats çà marche pour le pied de page mais pour ce qui est de la colonne centrale variable, t'es tout de même bloqué si ta colonne de gauche et ta colonne de droite ont une taille fixe. La je ne vois pas de solution.

Sibelius,

Je pense que le float est tout de même plus adapté car on ne pas prévoir la taille des colonnes de gauche ou de droite par avance, sauf si on est sur de son coup :)

J'ai vu qq part le css3, peut-être nous proposera-t-il des attributs plus adaptés ?

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté (modifié)
ouais.

Les floats çà marche pour le pied de page mais pour ce qui est de la colonne centrale variable, t'es tout de même bloqué si ta colonne de gauche et ta colonne de droite ont une taille fixe. La je ne vois pas de solution.

body {
margin: 0;
padding: 10px;
}
#gauche, #droite,#centre {
margin-bottom: 10px;
}
#gauche {
float: left;
width: 120px;
border: 1px solid;
}
#droite {
float: right;
width: 120px;
border: 1px solid;
}
#centre {
margin: 0 130px;
border: 1px solid;
}
#pied {
clear: both;
border: 1px solid;
}

<body>
<div id="gauche">
gauche
</div>
<div id="droite">
droite
</div>
<div id="centre">
centre
</div>
<div id="pied">
pied
</div>
</body>

Tout est affaire de compromis ;)

Modifié par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté

#centre {

margin: 0 130px;

border: 1px solid;

}

On en revient au problème de départ, non ?

Si "centre" s'allonge, les blocs de côté ne suivent pas le mouvement :(

Ex :

<div id="centre">

<p>centre</p>

<p>centre</p>

<p>centre</p>

<p>centre</p>

</div>

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté
On en revient au problème de départ, non ?

Si "centre" s'allonge, les blocs de côté ne suivent pas le mouvement :(

:P

J'étais sûr qu'on ariverais là : le problème, en fait, ce n'est pas la gestion des flottants ni des largeurs, mais cette fichue idée d'avoir des arrière-plan et des bordures de colonnes de même hauteur, quelque-soit le contenu !

- pour les arrière-plans, ça se simule en jouant sur l'arrière-plan du bloc conteneur initial

- pour les bordures, là, seul un tableau peut le faire de manière fiable.

En effet, il n'existe en CSS2 aucun mécanisme permettant d'associer le rendu de la hauteur d'éléments visuellement juxtaposé, hormis:

- display: table-cell (très mal supporté)

- min-height / max-height (mauvaise idée et très mal supporté)

Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté
ais cette fichue idée d'avoir des arrière-plan et des bordures de colonnes de même hauteur, quelque-soit le contenu !

Le problème est qu'il s'agit d'une "fichue" idée extrêmement courante.

Le fait de dire : "oui mais c'est mal de penser comme ça, il faut penser différemment" ne résoud pas le problème.

Au contraire, je trouve que c'est une façon de justifier une carence évidente des CSS.

Bien sûr cette carence s'explique aisément par le fait qu'un document n'est pas uniquement destiné à s'afficher sur un écran et que dans tous les autres cas le concept de hauteur n'a pas toujours lieu d'être.... mais en attendant le media screen doit-il être sacrifié ?

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté
Le fait de dire : "oui mais c'est mal de penser comme ça, il faut penser différemment" ne résoud pas le problème.

Au contraire, je trouve que c'est une façon de justifier une carence évidente des CSS.

Ma formulation était humoristique : loin de moi l'idée de dire que "c'est mal de penser comme ça" ;)

Lien vers le commentaire
Partager sur d’autres sites
Bobe

Bobe

Posté
Posté
je trouve que c'est une façon de justifier une carence évidente des CSS.

Quelle carence ? Laurent Denis a indiqué les mécanismes prévus pour ce type de mises en page dans le message qui précède le tien.

Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté
Quelle carence ? Laurent Denis a indiqué les mécanismes prévus pour ce type de mises en page dans le message qui précède le tien.

Les mécanismes CSS ne permettent pas de résoudre le problème initial :

- avoir des cellules adjacentes qui se suivent l'une l'autre (lorsque gauche s'allonge, droite s'allonge aussi et vice-versa) + un pied de page

- avoir une partie de largeur fixe (ex: gauche) et l'autre qui s'adapte au reste de la largeur d'écran

Le code de Laurent ne résoud manifestement pas ces problèmes, comme tout le monde l'a reconnu.

Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté
CSS permet de faire cela. Je te renvoie au chapitre 17 de la spécification

Tu sais très bien ce que je veux dire, je connais aussi les table-cell...

C'est ce qui m'énerve le plus chez les puristes des specs : oui les CSS sont fabuleuses et omnipotentes, et non elles ne s'appliquent pas encore à la réalité actuelle parfois.

Admettons-le un jour !

Je parle des CSS d'aujourd'hui, qui fonctionnent sur les navigateurs d'aujourd'hui (dont IE fait partie).

Bien sûr qu'en théorie les CSS permettent de TOUT faire, mais en pratique tu ne peux pas dire aujourd'hui :

"Je vais résoudre ce problème en utilisant les CSS, tout en ayant un site qui s'affiche chez mes clients (qui utilisent IE)"

Lien vers le commentaire
Partager sur d’autres sites
Bobe

Bobe

Posté
Posté (modifié)
Tu sais très bien ce que je veux dire, je connais aussi les table-cell...

Toi oui. Les lecteurs de ce fil, pas forcément.

C'est ce qui m'énerve le plus chez les puristes des specs : oui les CSS sont fabuleuses et omnipotentes, et non elles ne s'appliquent pas encore à la réalité actuelle parfois.

Admettons-le un jour !

Non, les CSS comme tout en ce bas monde ne sont pas parfaites.

Ma démonstration avait juste pour but de montrer que ce que veux l'initiateur de ce fil est possible avec CSS2, donc dire qu'il y a une carence des CSS est complètement faux et c'est ce que je tenais à mettre en lumière. Par contre, c'est effectivement non géré par certains navigateurs incontournable du marché et donc non utilisable à l'heure actuelle pour un site grand public.

À l'avenir, tu devrais faire plus attention de dissocier clairement l'aspect théorique et l'aspect pratique des choses pour ne pas induire les gens en erreur.

Modifié par Bobe
Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

Avant d'en venir aux mains, permettriez-vous à un ex-intégriste de proposer ce qui suit, et qui n'est qu'une reformulation de vos propos respectifs ;) ?

Les propriétés CSS simulant un tableau (diplay: table-cell, etc) permettent effectivement de gérer les hauteurs dans un multicolonnage, comme Raphaël le souhaite.

Mais il est vrai qu'elles ne sont pas supportées par certains navigateurs.

Donc :

- le rendu recherché est obtenu dans les navigateurs qui en sont capables,

- il se dégrade tout à fait correctement (sans obstruction) dans les navigateurs qui ne le peuvent pas, en attendant qu'ils améliorent leur support de CSS

C'est peut-être cela qui compte le plus dans CSS screen: cette idée de "dégradation non obstructive" selon les capacités du navigateur graphique, qui libère l'auteur de l'obsession d'un rendu identique et illusoire dans toutes les configurations utilisateurs.

Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté (modifié)
- il se dégrade tout à fait correctement (sans obstruction) dans les navigateurs qui ne le peuvent pas, en attendant qu'ils améliorent leur support de CSS

Tu parles de "dégradation correcte", alors que si je ne me trompe pas (on me corrigera au besoin), il me semble que l'effet qui peut se produire sur IE est loin de ce qu'on peut appeler "correct" : il se peut très bien qu'un bloc passe complètement pardessus le footer, ou pire, que le footer s'affiche au-dessus d'une partie de contenu importante.

Je suis entièrement pour une dégradation souple et ne pas chercher un affichage identique... mais dans ce cas précis, je pense sincèrement que en pratique les CSS ne permettent pas de résoudre ce problème.

EDIT : euh... tu n'avais pas séparé le sujet pour plus de clarté ? :D

Modifié par Sibelius
Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté (modifié)
il se peut très bien qu'un bloc passe complètement pardessus le footer, ou pire, que le footer s'affiche au-dessus d'une partie de contenu importante.

Jamais si footer est en flux+clear:both et si les colonnes sont en flux ou float :

- le footer sera forcément en dessous de la colonne en flux

- ET (inclusif) il sera forcément en dessous de la colonne en float la plus "longue".

Dans IE, et autres navigateurs ne supportant pas "display:table" etc., les colonnes en float et en flux ne seront pas d'égale hauteur, et le footer sera en dessous. C'est tout. Ce sera juste parfois un peu moche selon le style du conteneur ou du body.

Bon, maintenant, je suppose que tu ne seras pas convaincu tant que tu n'auras pas un exemple sous les yeux... Et si tu l'écrivais, cet exemple, histoire de te réconcilier avec les float ;) ?

Modifié par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté
Bon, maintenant, je suppose que tu ne seras pas convaincu tant que tu n'auras pas un exemple sous les yeux...

Non, non, j'en suis convaincu.

D'ailleurs tu me le confirmes : "le footer sera en dessous."... ce que tu trouves "un peu moche" pourrait très bien se révéler affreux, surprenant ou même handicapant si - comme c'est souvent le cas - ce footer affiche des informations essentielles comme les coordonnées d'une entreprise.

Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté
Bon, je savais bien qu'il faudrait un exemple : Colonnes de même hauteur.

"en-dessous" voulait dire "verticalement", pas dans le sens d'un empilage de div ;)

<{POST_SNAPBACK}>

Bien, voilà un joli exemple d'utilisation de table-cell en effet ;) Il faudrait en parler un peu car ce genre de question est à la mode partout.

Sur le principe, je vois beaucoup mieux ta "dégradation correcte".

En fait, tu utilises les deux techniques cumulées : table-cell pour les navigateurs standards et un petit hack avec un simple float+clear pour IE, c'est bien ça

Dans ton exemple, tes 2 "cellules" centrales sont réparties en 70% / 30% de la largeur du conteneur.

Est-il possible d'avoir, comme il est demandé dans le cahier des charges de départ (;)) d'avoir : une colonne de largeur fixe et l'autre qui prend le reste de la largeur ?

Puisque c'est bien le problème depuis le début. En clair est-ce que ça fonctionne avec "gauche" à 10em et "droite" à "auto" ?

PS : pourquoi un "border: 10px solid;" sur le footer, ça change quoi ?

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...