[Reglé] Soucis de mise en forme de mes colonnes

Bonjour à Tous,

Voila je suis en train de réaliser un template pour un CMS bien connu (joomla pour ne pas le citer) et je rencontre des ennuis, tousd ne sont pas insurmontable mais bon je suis a court d'idées.

Voici une image représentant ce que je cherche a faire :


La première partie ne pose pas trop de problème, là ou çà coince, c'est dans le CONTENU. Celui-ci a une taille fixe (738px, oui c'est petit mais pas trop le choix dans ce cas) et j'ai du mal a disposer les différents éléments que vous voyer sur l'image sans que cela bug sur l'un ou l'autre browser. De plus la colonne droite ou gauche peut ne pas être présente tout comme le "latestnews" et le "mostread". donc le "CENTRE" doit s'adapter !!!!

Si vous avez des propositions je sui preneur.

Une dernière question, vous avez une idée de comment je peut faire pour que mon image (en orange sur le dessin soit visible et devant tout le reste parce que jusqu'ici je n'arrive qu'a la mettre derrière !!!

Merci d'avance à vous tous.

Tych
Modifié par tych (08 Feb 2008 - 01:19)

Bonjour,

tych a écrit :
La première partie ne pose pas trop de problème, là ou çà coince, c'est dans le CONTENU. Celui-ci a une taille fixe (738px, oui c'est petit mais pas trop le choix dans ce cas) et j'ai du mal a disposer les différents éléments que vous voyer sur l'image sans que cela bug sur l'un ou l'autre browser. De plus la colonne droite ou gauche peut ne pas être présente tout comme le "latestnews" et le "mostread". donc le "CENTRE" doit s'adapter !!!!

Il faut grouper LATESTNEWS, MOSTREAD, CENTRE et COL_D dans un même bloc, et ensuite LATESTNEWS et MOSTREAD dans un bloc et CENTRE ET COL_D dans un autre. Quoi qu'à la rigueur on peut se passer du premier conteneur dont je parle, si on a les deux autres.
Je ne vois pas trop où ça bloque. Qu'as-tu tenté pour l'instant? Peut-on voir la page en ligne?*

Pour l'adaptation dans le cas où COL_D n'est pas présent, tu as deux manières de gérer ça:
- soit en récupérant l'information avant de générer ton code HTML, et en attribuant une classe spécifique à CENTRE dans le cas où COL_D est absent (ou présent, enfin l'un des deux, ou alors les deux mais avec une classe spécifique à chaque fois);
- soit en utilisant un contexte de formatage (ce qui implique que COL_D soit flottant à droite, et donc placé avant CENTRE dans le code HTML).

Pour le contexte de formatage, lire cet article qui en parle.

tych a écrit :
Une dernière question, vous avez une idée de comment je peut faire pour que mon image (en orange sur le dessin soit visible et devant tout le reste parce que jusqu'ici je n'arrive qu'a la mettre derrière !!!

Hmm... position fixe ou absolue, et z-index qui va bien.
Si ça n'est pas clair, il faut réviser le positionnement CSS.

--
* Si la réponse est non... bye bye.

Bonjour,

En fait jusqu'ici j'ai surtout essayer de jouer sur les attributs de mes blocs, en les mettant en float etc. Mais j'ai pas mal de blème alors sur Firefox et/ou Opera, d'ou les trucs et astuces pour ce genre de cas mais j'ai un peu de mal avec les nuances des différents browsers.

Je n'ai pas encore de version en ligne, je suis purement en local pour le moment.

Cette nuit, et oui la nuit porte conseil, j'ai penser un peu comme toi, mais je dois avouer que je rechigne toujours a mettre plein de bloc dans tout les sens. N'est ce pas sur ce site que l'on dit que trop de div tue le div ....

Je vais peut être m'interresser a contexte de formatage de l'article que tu renseigne.

Pour mon image, la position ne pose pas de problème mais le z-index alors là oui je coince. Je dois dés lors mettre du z-index dans tout mes bloc ?

Merci en tout cas des conseils.

tych

tych a écrit :
Pour mon image, la position ne pose pas de problème mais le z-index alors là oui je coince. Je dois dés lors mettre du z-index dans tout mes bloc ?

Non. Déjà, il est bizarre que cette image ne s'affiche pas au premier plan quand elle est positionnée en absolu ou en fixe. Si j'avais accès à la page en ligne je pourrais t'en dire plus...

En gros, si tu as besoin de préciser l'ordre d'empilement de deux éléments, il faut que ces deux éléments:
- soient positionnés (propriété position avec comme valeur "fixed", "absolute" ou "relative"... cette dernière étant souvent utilisée pour pouvoir utiliser le z-index sans avoir à modifier le positionnement normal de l'élément);
- aient une propriété z-index avec une valeur qui va bien (les valeurs les plus élevées sont au dessus).

Si tu as une structure HTML qui ressemble à ceci:

<body>
	<div id="global">...</div>
	<div id="image-bas">...</div>
</body>

il te suffit de positionner div#global en relatif avec un z-index de 1, et div#image-bas en absolu ou fixe avec un z-index de 10 par exemple.

Bonsoir,

J'ai suivi ton conseil, mais j'en perds un peu mon latin, il le place bien devant maintenant mais je n'arrive pas a ce qu'il le place en bas de la page (là il me le place en bas de la fenêtre et reste là si je descend plus bas - je sais pas si c'est clair ?).

J'aimerais qu'il soit placer en bas à droite de la zone que tu nomme #global mais pas plus bas ? C'est possible n'est ce pas ? dis moi oui ....

t.

Il faut mettre #image-bas dans div#global, et positionner div#global en relatif pour qu'il serve de référent pour le placement de #image-bas positionné en absolu.

<body>
	<div id="global">
		...
		<div id="image-bas">...</div>
	</div><!-- #global -->
</body>

Bin en fait c'est que j'avais fait au début !!! s'en y arriver puisque c'est ce qui m'avait amener ici. J'ai mis le site en ligne, j'ai pas fini mais bon c'est purement artistique maintenant alors c'est pas trop grave.

Site du 11nov

L'image fait 556px de haut et 446px de large, je n'ai rien renseigner dans la version en ligne donc ne t'étonne pas. Mes div s'appelle

#conteneur (ton #global)
#imgconteneur (ton #image-bas).

Merci encore et désolé d'être aussi lourd.

t
Modifié par tych (07 Feb 2008 - 23:31)

Eh bien ton code pour ton image est très incomplet! Tu utilises un élément div vide de contenu avec une image de fond, ce qui est plutôt approprié pour un élément décoratif. Bon. Maintenant, quelles sont les caractéristiques «par défaut» d'un élément de type bloc telle qu'un div?

1. Il prend automatiquement toute la largeur disponible dans son conteneur, sauf s'il est positionné en absolu ou s'il est flottant... auquels cas il prend la largeur de son contenu ou celle qu'on lui indique explicitement.
2. Il prend la hauteur de son contenu, sauf si on lui indique explicitement une hauteur.

Ici, tu as un élément div vide positionné en absolu, sans hauteur et sans largeur. Bref, div#imgconteneur fait très exactement zéro pixels de large et zéro pixels de haut. Donc on ne le voit pas des masses.

Tu pourrais corriger ainsi:

div#conteneur {
	/* On garde les déclarations CSS utilisées pour cet élément et on rajoute: */
	padding-bottom: 175px;
}
div#imgconteneur {
	position: absolute;
	z-index: 10;
	bottom: 0;
	right: 0;
	height: 556px;
	width: 454px;
	background: url(../images/img-conteneur.gif) no-repeat right bottom;
}

(J'ai choisi le positionnement au jugé, vu la découpe de l'image, mais il faudra peut-être le modifier.)

J'ai l'impression que depuis le début tu te bas avec un élément que tu penses «caché dessous» alors qu'il est tout simplement pas affichable car sans dimensions.

(Et si c'est le cas, je tiens à signaler qu'avec une page en ligne disponible dès le départ j'aurais pu donner cette explication dès le départ -- moi ou un autre, d'ailleurs -- et qu'on aura économisé du temps et de l'énergie. )
Modifié par Florent V. (07 Feb 2008 - 23:59)

En faite comme je te le disais dans mon dernier post :

a écrit :
L'image fait 556px de haut et 446px de large, je n'ai rien renseigner dans la version en ligne donc ne t'étonne pas.

Ce que je voulais dire c'est que j'avais retirer tout rapport a des dimensions. Je la voyais bel et bien en dessous mon image.

Le code que tu me donne est ce que j'ai essayer a part le :

padding-bottom: 175px;

Que je vais essayer de comprendre.

Merci.

T.

C'était bien le "padding-bottom" qu'il me manquais pour que j'y arrive. Je crois entrevoir pourquoi il le faut. Je vais dormir dessus.

Merci encore. Et désolé pour l'énergie dépensé

Tych