pb de chevachement de calques

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : pb de chevachement de calques

skynicko

Bonjour

Ma page comprend 3 colonnes et quand j'écris dans les menus de gauche, droite et dans la partie centrale, j'aimerai que le pied de page descende. Je cherche depuis 1 semaine mais je trouve pa (je suis debutant en css).

je vous met un lien si vous voulez jeter un oeil
http://skyonline.free.fr/test

Publicité

FlorentG

Ouch, ça va pas être facile, vu que les élément #gauche et #droite sont en position absolue, donc impossible d'aller après eux sans connaître leur taille

FlorentG

Avec des floats, c'est possible par contre

skynicko

J'ai changé la position en float sauf que maintenant ils sont les uns sous les autres alignés sur la gauche. Il doit y avoir quelque chose d'autre à parametrer ?

FlorentG

Tiens, vois chez Alsacréations les modèles de mise en page : http://www.alsacreations.com/articles/modeles/

skynicko

je métais dailleur inspiré des modeles de ce site pour faire ma page. J'ai les meme reglages ke chez eux, mé ça le fé pa. ça me saoule

Hermes le Messager

Breton Quiétiste

FlorentG a écrit :

Tiens, vois chez Alsacréations les modèles de mise en page : http://www.alsacreations.com/articles/modeles/

Ouai, ben il sont bien gentils ses modèles, mais aucun ne montre une mise en page avec deux colonnes qui poussent un footer.

En clair, le problème des deux colonnes pouvant grandir dynamiquement dans un site qui est le PRINCIPAL problème des mises en page avec div n'est même pas présent (et pour cause... C'est un problème sans véritable solution satisfaisante : bug des 3 pixels sur le contenu à droite, problème de marge incontrolable entre le menu et le contenu de droite etc...)

Il faut pas moins de 2 hacks CSS pour le réaliser.

J'attend toujours qu'on me montre une mise en page avec 2 colonnes pouvant pousser dynamiquement un footer proprement...

skynicko

Ok ça exsite pas, mé ya pa une astuce faire en sorte ke ce soit plus ou moins correcte à l'affichage ?
Sachant ke le contenu des menus de gauche est droite é censé etre dynamique dc variation plus ke probable en hauteur

Hermes le Messager

Breton Quiétiste

skynicko a écrit :

A partir du moment où tu as DYNAMIQUEMENT un contenu variable sur CHACUNE de tes trois colonnes et que la colonne du milieu PEUT être plus petite que les deux autres colonnes, tu as deux solutions :

1) Tu te passes du footer en bas.

2) Tu fais une mise en page basée sur une table de 3 colonnes.

Aucune autre solution satisfaisante n'existe.

FlorentG

Sinon y'aurait des solutions possibles, mais par rapport à IE, je ne suis pas sûr qu'elles fonctionnes

Publicité

skynicko

Merci hermes, mais je prefere pas utiliser les tableaux.
C koi ta soluce sinon flo ke jessaye

Hermes le Messager

Breton Quiétiste

FlorentG a écrit :

Sinon y'aurait des solutions possibles, mais par rapport à IE, je ne suis pas sûr qu'elles fonctionnes

Non. ça fait deux ans que je cherche, et sans plusieurs hack, c'est impossible. Point. je crois que ça se saurait si c'était possible.

Les mises en page CSS multi-colonnes qui poussent (chacune d'elle) le footer sont au mieux d'infames bidouillages.

Il faut savoir ce qu'on veut :

Pure mise en page CSS multi-colonne --> on renonce au footer.

Mise en page reposant sur UN SEUL tableau (c'est pas la mort et ça ne nuit aucunement à la lisibilité, même avec lynx, j'ai testé) et on peut mettre un footer.

FlorentG

Oui, je vais chercher

Sinon ok pour les tableaux, si on se maintient à 3 lignes 3 colonnes

Hermes le Messager

Breton Quiétiste

skynicko a écrit :

Merci hermes, mais je prefere pas utiliser les tableaux.
C koi ta soluce sinon flo ke jessaye

Ya pas de soluce. Tu renonces au footer ou tu renonces au 100% css.

Hermes le Messager

Breton Quiétiste

FlorentG a écrit :

Oui, je vais chercher

Sinon ok pour les tableaux, si on se maintient à 3 lignes 3 colonnes

Même pas 3 lignes, 3 colonnes. 1 ligne et 3 colonnes.

Que ce soit pour l'entete ou le footer, on garde les divs.

skynicko

Je vais trouver une parade pour le footer, meme s'il sagit de la plus infame des bidouilles. Tant qu'au niveau de l'apparence c'est correct c'est tout ce qui compte

Message édité par skynicko le 17-02-2005 à 11:14:14

Hermes le Messager

Breton Quiétiste

skynicko a écrit :

Je vé trouver une parade pour le footer, mm sil sagit de la plus infame ds bidouilles. Tant qu'au niveau de laparence cé correct cé tout ce ki compte

1) Ecrit correctement. T'es pénible à lire.
2) Justement, au niveau de l'apparence, tu auras des problèmes à un moment donné ou à un autre. Rien qu'avec IE, entre ceux qui sont encore avec IE5, 5.5 ou 6 et d'autre sur IE 5.2 sur MAC, ce sera une catastrophe. Quand on utilise une technologie, on prend ce qui marche réellement.

Si t'achète une voiture, tu vas pas rouler avec 18 réparations de fortune qui peuvent toutes lacher n'importe quand.

skynicko

Tu as tout à fait raison. Mais je vais trouver une solution. Merci encore pour ton aide

Hermes le Messager

Breton Quiétiste

skynicko a écrit :

Tu as tout à fait raison. Mais je vais trouver une solution. Merci encore pour ton aide

Mais bien sûr... :sleep: :sleep: :sleep:

skynicko

Non mais je dirais juste à mon patron qu'on peut pas mettre plus de x lignes ds chaque colonne. Puisque de solution technique y'en a pas, faut bien se rabattre sur autre chose :sleep:

Hermes le Messager

Breton Quiétiste

skynicko a écrit :

Non mais je dirais juste à mon patron qu'on peut pas mettre plus de x lignes ds chaque colonne. Puisque de solution technique y'en a pas, faut bien se rabattre sur autre chose :sleep:

Dans ce cas là, il est possible d'utiliser les modèles d'alsacréation.

KrisCool

Verbeux

http://www.pompage.net/pompe/colonnesfactices/

Cette méthode peut fonctionner sans hacks.
Inconvénient majeur: le layout n'est pas flexible horizontalement.

Bref, même avis qu'Hermès, après avoir galéré comme un malade pendant des heures à trouver un truc sans hack qui marche partout et qui donne l'affichage voulu, bah je me suis reporté sur les tableaux.

---------------
Loose Change Lies | Bars | Last.fm

FlorentG

Bon, j'ai trouvé une solution, mais ça explose complètement sous IE

Hermes le Messager

Breton Quiétiste

FlorentG a écrit :

Bon, j'ai trouvé une solution, mais ça explose complètement sous IE

Donc ce n'est pas une solution. Et si on fait abstraction de IE, il est évident que bcp de problèmes disparaissent.

C'est quand même l'hypocrisie des gens qui pronnent les divs + CSS à tout va. Ils oublient de dire que nombre de mise en page avec contenu dynamique sont irréalisables proprement. [:spamafote]

Il faut savoir tirer le meilleur partie des technos et utiliser les divs chaque fois que c'est possible, mais sans renoncer pour autant aux tables (enfin à UNE table) lorsque c'est nécessaire.

FlorentG

C'est pas de l'hypocrisie [:spamafote] Le CSS 2.1 permet de faire de nombreuses choses. Le seul problème c'est que le navigateur utilisé par 90% des gens de les gère pas

Toutes les mises en page sont réalisable quand on prend les normes. Après comme dis c'est IE qui fait chier :cry:

FlorentG

Sinon voici la solution :

Code :

<body>
<div id="header">Header</div>
<div id="content">
<div id="cols">
<div id="c1">
Pouet<br />
Pouet<br />
Pouet<br />
Pouet<br />
Pouet<br />
Pouet
</div>
<div id="c2">
Main
</div>
<div id="c3">
Pouet<br />
Pouet<br />
Pouet
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>

Code :

body {
margin: 0px; padding: 0px;
}
#header, #footer {
background: #f00;
height: 75px;
}
#c1, #c2, #c3 {
display: table-cell;
}
#c1, #c3 {
background: #00f;
width: 198px;
}
#c2 {
background: #f0f;
}
#content {
display: table;
width: 100%;
}
#cols {
display: table-row;
table-layout: fixed;
}

Hermes le Messager

Breton Quiétiste

FlorentG a écrit :

Sinon voici la solution :

Code :

<body>
<div id="header">Header</div>
<div id="content">
<div id="cols">
<div id="c1">
Pouet<br />
Pouet<br />
Pouet<br />
Pouet<br />
Pouet<br />
Pouet
</div>
<div id="c2">
Main
</div>
<div id="c3">
Pouet<br />
Pouet<br />
Pouet
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>

Code :

body {
margin: 0px; padding: 0px;
}
#header, #footer {
background: #f00;
height: 75px;
}
#c1, #c2, #c3 {
display: table-cell;
}
#c1, #c3 {
background: #00f;
width: 198px;
}
#c2 {
background: #f0f;
}
#content {
display: table;
width: 100%;
}
#cols {
display: table-row;
table-layout: fixed;
}

Ouai, ben même. Sémantiquement c'est pourri.

Ya au minimum un niveau de div en trop. (le content)

Je ne vois pas quelle fierté on pourrait avoir de mettre des divs si c'est pour bidouiller.

Sémantiquement, une mise en page deux colonnes c'est :

Code :

<div id="entete"></div>
<div id="contenu">
<div id="colonne1"></div>
<div id="colonne2"></div>
</div>
<div id="footer"></div>

Voilà...

Après si les CSS ne permettent pas de garder cet aspect sémantique, ben c'est raté.

Message édité par Hermes le Messager le 17-02-2005 à 11:52:31

FlorentG

Oui, j'en ai mis en trop, voilà la vraie de vraie :

Code :

<body>
<div id="header">Header</div>
<div id="content">
<div id="c1">
Pouet<br />
Pouet<br />
Pouet<br />
Pouet<br />
Pouet<br />
Pouet
</div>
<div id="c2">
Main
</div>
<div id="c3">
Pouet<br />
Pouet<br />
Pouet
</div>
</div>
<div id="footer">Footer</div>
</body>

Code :

body {
margin: 0px; padding: 0px;
}
#header, #footer {
background: #f00;
height: 75px;
}
#c1, #c2, #c3 {
display: table-cell;
}
#c1, #c3 {
background: #00f;
width: 198px;
}
#c2 {
background: #f0f;
}
#content {
display: table;
width: 100%;
}

Message édité par FlorentG le 17-02-2005 à 11:56:21

sub1

Hermes le Messager a écrit :

J'attend toujours qu'on me montre une mise en page avec 2 colonnes pouvant pousser dynamiquement un footer proprement...

et la ? http://www.stunicholls.myby.co.uk/layouts/body2.html

Hermes le Messager

Breton Quiétiste

sub1 a écrit :

et la ? http://www.stunicholls.myby.co.uk/layouts/body2.html

Ben non. Si le menu de gauche est plus long que le contenu de droite, il est coupé.

Alors avant de poster, vérifier déjà qu'on peut sans problème allonger tant la colonne de gauche que celle de droite.

FlorentG

Bon, en conclusion de ce topic, comme l'a souligné HLM, un p'tit tableau parfois est nécéssaire si on que ça marche sur tous les navigateurs

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

pb de chevachement de calques

Sujets relatifs
Positionnement calques CSS	Probléme de calques
Pbm avec mes calques	gerer des calques pour superposer des images
du positionement de calques entre ie et mozilla	Positionnement des calques...
[HTML/CSS] chevauchement de calques à contenu dynamique	Afficher calques par dessous animation flash !
[CSS] pb de chevauchement de calques	Positionnement de calques dans menu généré automatiquement
Plus de sujets relatifs à : pb de chevachement de calques

Page générée en 0.104 secondes