28172 sujets

CSS et mise en forme, CSS3

Min-height ou hack css ?

Bonjour !

Nouveau soucis qui m'empêche de continuer correctement...

Voici le code

<body>
[...]
</body>


Je cherche à faire ceci :
#swoon et #main on une largeur fixe : 500px (donc #wraper est définit à 1000px), et flottent toute deux à gauche.
Les <hr /> sont invisibles et remplacent un <div class="clear"></div>
Je veux d'une part que #footer se place tout en bas, sachant que #swoon est fixed, et d'autre part que toutes les div .column prennent toute la hauteur au minimum.

Sauf que pour faire cela, je ne sais pas choisir.
J'ai essayé min-height: 100%, que j'ai attribué à #wraper (qui prend bien toute la hauteur) et à #swoon et #main (qui elles restent de la taille de leur contenu). Donc ça ne marche, et surtout min-height n'est pas si fiablle en terme de compatibilité tout navigateurs.

J'hésite donc à utiliser cette méthode, ou autre chose...
Que me conseillez-vous ?

Merci Smiley cligne
Modifié par Didjo (22 Jan 2011 - 17:41)
Au temps pour moi ! Je la refais graphique à l'appui.
Autant exposer rapidement l'objectif, je m'y prend peut-être mal à la base.

Alors !
[...]/a/1.gif
La div rouge est un titre, les bleus des boutons.

En cliquant sur l'un deux, une colonne le remplace :
[...]/a/2.gif

Je veux que la colonne prennent donc toute la hauteur au minimum, plus si le contenu dépasse (min-height, quoi...).
Sauf que je veux que seule cette colonne se déplace en scrollant, donc position fixe pour les blocs rouges et bleus.

Voilà comment j'ai donc pensé faire ça :
[...]/a/3.gif
#wraper englobe le tout, #swoon est la div bleue clair de gauche (qui contient la rouge donc), et #main celle de droite (les boutons et les colonnes). Il y a 3 div .element, contenant chacune un bouton et une colonne.

En terme de positioning : #swoon est fixed, #main float à droite. Je me suis pas encore occupé du fixed des boutons (mais en gros chaque div .button le sera, avec des marges aux .column pour éviter qu'elles ne se placent en dessous). Smiley murf

Comment me conseilleriez-vous de gérer ce tout-fixé sauf les trois colonnes, et donc comment faire en sorte que ces colonnes aient une hauteur adéquate ?

Merci beaucoup Smiley jap
Modifié par Didjo (22 Jan 2011 - 17:41)
C'est assez compliquer en fait.
Pour ton footer
Une bonne technique est décrite ici.
http://www.cssstickyfooter.com/

Pour ta barre verticale il faut que tu t'assures que tous les éléments qui la contiennent ont une taille à 100%. Du genre
html,body { height:100%; }

Et Malgré ça je pense que tu n'y arriveras pas sans javascript.
Effectivement je connais cssstickyfooter et la solution de Ryan Fait... Que je vais peut être utiliser (la dernière), pour accrocher la colonne au minimum en bas de la page, car le height:100%; est assez insupportable à mettre en place.

Mais pour le tout-fixe, vraiment si compliqué ? Ça me semble quand même pas mal accessible... En fixant (position:fixed;) le bloc #swoon et chaque bloc .button, ça marche ! Et du coup je dois tout définir avec des padding/margin et des left/right...

Non ? Autre solution ? Qu'en pensez-vous ?

J'aurais du JS (animations pour ouvrir les colonnes, AJAX et cie), mais j'ai bien envie de réaliser cette base en CSS...

Smiley jap
Joska,

Ce code est totalement inutile puisqu'il ne fonctionnera pas.

top, bottom, left et right DOIVENT être utilisé avec un positionnement non "static".

De plus, top ne peux être utilisé avec bottom et right ne peut être utilisé avec left (seul un des deux sera retenu, le dernier spécifié).
Bien, voilà ce que ça donne.

[...]

Est-ce que quelque chose vous parait illogique, mauvais ou améliorable ?
J'ai autre chose de bizarre du coup.
La colonne a un fond qui, si fixé (ce qui a priori est l'objectif aussi), réagit totalement différemment selon les navigateurs : je met les valeurs de X et Y à 0, mais chaque navigateur réagit différemment ! Une astuce pour régler ça ?

Gracias ! Smiley jap
Modifié par Didjo (22 Jan 2011 - 17:42)
Sujet clos
Aller à