28172 sujets

CSS et mise en forme, CSS3

Problème de mise en page : colonne.

Bonjour à toutes et à tous,

Je me permets d'écrire ce topic pour vous faire part d'un problème qui m'agace fortement depuis plusieurs jours. Mes compétences en terme de CSS doivent être fort limitées, puisque je n'ai toujours pas réussir à comprendre d'où venait le problème, qui est le suivant:

Je souhaite refaire le site internet de la radio étudiante de mon école, et étant un peu codeur, mais surtout adorant les défis, j'ai souhaité faire ce nouveau site à la main, dans un premier temps en XHTML et CSS, puis, avec le temps, en ajoutant des fonctions PHP.

La page doit répondre aux caractéristiques suivantes:

Un header avec le logo de la radio et/ou un sponsor.
Un menu horizontal.
Deux blocs, un pour le contenu, et un pour des "services" à droite.
Un footer, avec les mentions légales.

Jusque là, rien de méchant, me direz-vous, sauf peut être la colone de "services" à droite. J'entends déjà au loin les "pense aux floats", "lis les tutos"...

Permettez moi juste de vous dire, en avant propos, que j'ai pensé aux floats et que j'ai lu tous les tutos possibles... Sûrement pas les bons, diront certains.

Quoi qu'il en soit, j'aimerais arriver à un résultat proche de celui-ci :

http://seeane.free.fr/alsa/hauteur_fixe.jpg

Comme son nom l'indique, j'ai mis dans mon CCS une hauteur fixe au <div> qui englobe et la partie texte et la partie services.

Cependant, je ne souhaite pas que la hauteur soit fixe. Je veux que la hauteur évolue en fonction soit du texte, soit de la colonne services, de sorte que si l'un ou l'autre soit plus grand, le div prenne la taille du plus grand des deux.

Mon problème, si je ne mets pas de hauteur fixe, est celui-ci :

http://seeane.free.fr/alsa/sans_hauteur.jpg

Voir la page actuelle:



http://seeane.free.fr/alsa/accueil.html

et le CSS:

http://seeane.free.fr/alsa/style.css


Le problème, sans hauteur fixe, c'est que tout déborde sur le footer, et que le <div> principal qui englobe le texte et la colonne de service disparait.

Quelqu'un aurait-il une solution?

Par avance, merci.
Salut,

Je suis mdr de voir un post aussi long car la réponse elle, est très courte :

#footer {clear:both;}


PS: ton footer n'étant pas en float, il ne prend pas en compte les float qui le précèdent, ainsi tu dois spécifié à ton footer de retourner à la ligne après les float left et les float gauche.
Modifié par pfoofen (04 Oct 2009 - 19:02)
Bonsoir à tous,

Tout d'abord, un grand merci pfoofen, de t'occuper de mon cas.
Et aussi merci pour ta solution miracle de laquelle j'étais à dix mille lieux de penser.

Mais! Ca ne résout qu'une partie du problème...

Le footer apparaît bel et bien, comme tu peux le voir ici : http://seeane.free.fr/alsa/footer.jpg, mais le <div> qui englobe le texte et le menu "services", lui, n'est pas extensible. Il n'englobe rien, et se retrouve compacté tout en haut...

Aurais-tu une idée?
De rien !

Voilà :

#content{overflow:hidden;}


PS: ne renseigne jamais la hauteur de #content sinon tu auras des soucis. Smiley smile
Modifié par pfoofen (04 Oct 2009 - 21:02)
Tu es définitivement un dieu,

Même si je ne comprends pas bien cette fonction, mais je vais potasser dessus, et voir si elle crée quelques erreurs dans ma page.

Encore merci, pfoofen!


EDIT: Après quelques tests, ça marche parfaitement comme je veux, MERCI MILLE FOIS pfoofen!
Modifié par seeane (04 Oct 2009 - 21:13)
En fait overflow:hidden ça demande à la div de cacher tout ce qui est plus grand qu'elle.

Exemple, imaginons que tu ais une div en overflow:hidden de 100 px, si tu écris un paragraphe dedans et que celui-ci est si long qu'il fait en hauteur 150px et bien on ne verra pas la fin du paragraphe(les 50 derniers pixels).

Et accessoirement il sert lorsque tu as un conteneur avec des float dedans à le faire prendre en compte leur hauteur (mais c'est une fonction détournée, il est pas fait pour ça à la base).

Cependant après réflexion, il serait plus judicieux que tu mettes #content{float:left;}
Ca serait plus juste ... ^^
Modifié par pfoofen (04 Oct 2009 - 21:14)
Ca revient au même, donc je vais faire ce que tu me conseilles.

Mais comme toutes les pages du site ne sont pas en deux colonnes, je verrai quoi faire en temps voulu.

En tout cas, tu m'as été d'une aide précieuse, merci.
Sujet clos
Aller à