[Résolu] Les fameuses colonnes de même hauteur.

Bonjour à vous.

Je reviens sur le forum pour demander de l'aide: en effet, il y a toujours un problème qui arrive après la résolution d'un précédent ^^
Il s'agit des colonnes de même hauteur. Voici ma page de test: http://chrispics.free.fr/-pageviergexhtmlcss-.html
Et son css: http://chrispics.free.fr/style.css

J'ai recherché partout, et il revient très souvent la technique de "triche" avec un background que l'on répète. J'ai donc testé, mais celà ne marche pas. Je me demande si celà ne vient pas du fait que ma colonne de gauche (le menu), est composé de 3 images... dans les exemples, c'est toujours deux colones très simples, avec seulement une couleur (ou image) par colonne.

Bref, j'ai le sentiement que ce que je vous dis ne vas pas vous aider à m'aider, et donc si c'est le cas demandez moi ce qu'il faut que je vous précise. J'espère vraiment pouvoir trouver une solution grâce à vous car j'ai beau chercher partout (google, ici, sur tous les tutorials qui expliquent comment faire), je n'y arrive pas, et je fume...
Merci.
Modifié par Chrispic (03 Feb 2007 - 01:29)

Bonjour Chrispic

L'utilisation du positionnement absolu pose problème (sauf éventuellement pour le menu) : étant sorti du flux, le conteneur n'en tient pas compte et ne s'étend pas en hauteur. On ne peut donc pas mettre d'image de fond à celui-ci pour simuler des colonnes.

Par ailleurs, il faut faire attention au résultat sans image : si je les désactive, j'obtiens pour l'instant un menu au texte blanc sur fond blanc.

Sinon il y a deux erreurs dans la CSS.
Modifié par Alan (30 Jan 2007 - 13:49)

Ah oui, merci pour les erreurs dans le CSS, j'avais pas vérifié.
Oui, pour le résultats sans images je vais faire en sorte que ça reste lisible, merci aussi pour l'information, je n'avais pas preté attention à ça.

Bon ben merci pour ton explication, je pense voir ce que tu dis mais ça m'aide pas, j'y arrive pas. J'ai beau voir les explications partout, je fais ce qu'il faut, et ça va pas
Je pense que je vais allonger mes colonnes manuellement en faisant des Entrée afin d'avoir des colonnes à peu près identiques. Ca m'éviteras surement par là même les problèmes de compatibilités entre les différents navigateurs... enfin... je pense.

Il n'y a pas de problèmes de compatibilité avec la méthode des colonnes factices.

Tu peux le faire très simplement, par exemple :

– une image de fond pour le #Header, image qui comprendra également le motif du haut de la partie menu ainsi que le haut de la partie du contenu ;

– image de fond en répétition appliquée à #conteneur (image fine, mais de toute la largeur : fond du menu + fond du contenu et bordures) ;

– un image de fond pour le #footer avec à la fois le bas du #contenu et du #menu.

En suite, il faudra faire attention au résultat sans les images : ce qui demandera peut-être d'ajouter une couleur de fond au menu et de masquer cette couleur par une image en répétition.
Ce qui implique également de ne pas mettre le contenu du #header et du #footer dans l'image de fond : utiliser du texte ou une balise <img />.
Modifié par Alan (30 Jan 2007 - 22:35)

Très bien, j'ai créer ces trois images de fond, mais ensuite... je coince ^^
Je dois ajouter ces fond où? Parfois je lis qu'il faut placer le fond dans body, et parfois dans le conteneur... Et là, j'ai 3 images à placer, je dois les disposer comment dans mon css?

Désolé mais bien que j'essaye de comprendre, j'arrive pas à réaliser la chose

Chrispic a écrit :
Très bien, j'ai créer ces trois images de fond, mais ensuite... je coince ^^
Je dois ajouter ces fond où?

Eh bien il me semble que j'ai donné ces indications dans mon précédent message...
En revanche, pour le footer, il serait certainement plus simple de faire directement deux images HTML (<img>). Je n'avais pas vu que sur la première il y avait un lien ("contact")


Si tu bloques, c'est peut-être que tu n'as pas tout à fait compris le principe des colonnes factices. Pourrais-tu essayer de le résumer ?

Si ça peut aider, je pourrais te faire un exemple de base à partir de ce modèle.
Modifié par Alan (31 Jan 2007 - 09:00)

Ah, d'accord... ^^
En fait, le lien "Contact" je l'ai ajouté plus tard.

Et bien pour moi, le principe des colonnes factices c'est de créer un fond en arrière-plan à mon site, qui reprend le design de celui-ci mais sur une petite hauteur (genre 5/10 px) et de le faire se répéter. Ensuite, j'avais lui qu'il y avait une histoire avec les float.
Mais bon, je crois que c'est bien ce que tu dis: j'ai pas parfaitement compris le principe.

Si ça ne te dérenge pas, je veux bien de ton exemple de base et/ou une petite explication sur le principe des colonnes factices. J'ai lu les tutorials sur Pompage, Alsacréations et d'autres sites ou forums, mais je bloque quand même.

Salut,

Si tu as déjà lu tout ça, peut-être faut-il passer directement à du concret.

On va prendre un cas classique. Un conteneur qui contient un header, une partie menu, un partie contenu et un footer.
-> Exemple en ligne en version brute (j'ai juste centré les titres et diminuer leur taille de texte)

* Première étape : on fixe la largeur du conteneur, on le centre et on lui applique l'image de fond qui représente nos fausses colonnes.

#conteneur  {
	width: 650px;
	margin: auto;
	background: #DBDBDB url(colonnes.png) repeat-y;
}

-> Page d'exemple pour cette première étape

* Étape 2 : comme tu vois l'image de fond se répétant pour tout le conteneur, nos fausses colonnes se trouvent donc également sous le header et le footer. On ajoute alors un fond pour ceux-ci (et on met un bordure dans ce cas) :

#header, #footer {
	background: #6C6EA4;
	border: 1px solid black;
}

->Page d'exemple pour cette seconde étape
(On aurait pu procéder autrement : ajouter une div qui aurait juste enveloppé le menu et le contenu à laquelle on aurait appliqué l'image de fond plutôt qu'au #conteneur, mais ici ce n'était pas la peine.)

* Étape 3 : on dispose le menu et le contenu de sorte que ça corresponde à nos colonnes factices.
On pourrait très bien utiliser le positionnement absolu pour le #menu, mais il faudrait surement prévoir une hauteur minimale s'il n'y a pas assez de contenu (Étant complètement sorti du flux le #menu ne serait pas pris en compte. Et s'il était plus grand que le #contenu, ça déborderait sur le footer).
Alors qu'en utilisant float pour le menu, on applique simplement la propriété clear au footer de sorte que celui soit toujours en dessous.
Et une simple marge pour la partie #contenu suffira :

#menu {
	float: left;
	width: 200px;
}
#contenu {
	margin-left: 200px;
	padding: 10px;
}
#footer {
	clear: left;
}

Et voilà fini notre exemple de base (enfin fini... en s'en tenant volontairement au minimum) !
-> Voir le résultat

Ces étapes ne sont pas pas du tout un « ordre méthodologique », tu peux parfaitement procéder dans le sens que tu veux.

@+
Modifié par Alan (01 Feb 2007 - 19:18)

Re salut.
Je te remercie énormement Alan !!
Grâce à ton exemple, j'ai compris quel était mon problème, et je suis parvenu à obtenir le résultat attendu!
Maintenant ce n'est qu'une histoire de petits réglages, et j'aurais enfin ma page de base pour refaire mon site.
Encore merci pour ton aide et le temps que tu y as consacré!
A+