Comment faire pour qu'un DIV prenne la place restante ?

[destroyedlolo]

Bonjour,

j'ai beau chercher et faire des testes, il y a qq chose qui m'echappe.

J'ai un menu sur la gauche de ma page creer par une liste et mise en page par un CSS.

Le reste de la page est une photo, un <h1> de titre et un <div> contenant du texte.

Ce qui donne le code suivant :

<ul class=liens>
<li><a href='/Trombinoscope/' title="Les membres et leurs galeries">Le trombinoscope</a></li>
<li><a href='/Themes/' title="Les thèmes trimestriels">Les thèmes</a></li>
<li><a href='/Sorties/'>Les sorties</a></li>
</ul>

<img src='/Trombinoscope/Laurent/photo.jpg' alt='Laurent' border=1>
<h1>Laurent</h1>
<div>C'est moi</div>

avec liens qui est defini comme suit :

ul.liens {
	list-style-type: none;	/* suppression des puces de liste */
 	margin-top:5px;
	font-size: small;
	padding-left: 3px;
	list-style-position: outside
}

ul.liens li {
	margin-top: 6px;
}

Mon probleme est que les textes du <div> ou du <h1> peuvent passer sous le menu

Si je demande a Firefox d'afficher les boites (outline block level elements), on voit tres bien que ces blocs prennent toutes la largeur de la page, et passe en dessous de mon menu

Comment puis-je faire pour qu'il ne s'ettalent que sur la partie restante de la page ?

Merci et A+

PS : j'ai le meme probleme avec IE, donc je pense que ca vient de la conseption de ma page.

[biouche]

Tu peux leur ajouter une marge gauche. Exemple :

h1 {
  margin-left: 100px;
}

[KnockedMaster]

'alut,

si tu leur attribues une marge sans un width, cela va créer une barre de défilement horizontale souvent inesthétique et sous mozilla, le soulignement de ton titre sera peut-être interprêté à partir de la marge de gauche

Attribues donc, en plus d'une marge, une dimension fixe à ton div

_AT_micalement

[karnabal]

Salut,

Personne ne lui conseille d'appliquer un float:left à <ul class=liens> ? Cela ne vous paraitrait pas plus indiqué ? Ou alors je n'ai pas bien compris la question.

[destroyedlolo]

Salut,

Personne ne lui conseille d'appliquer un float:left à <ul class=liens> ? Cela ne vous paraitrait pas plus indiqué ? Ou alors je n'ai pas bien compris la question.

Oups, juste, j'ai oublier un bout : liens defini la liste l'apparence des liens, mais elle est elle-meme dans un div qui a la definition suivante :

div.navigation {
		/* Position */
	float: left; 
	width: 15%;
	margin-bottom:0;

		/* Texte */
	background-color: #DDC7B0;
	color: black;
	font-size: small;

		/* Bords */
	padding: 2px;
	margin: 2px; 
	border-style: solid;
	border-width: thin;
	border-color: navy;
}

biouche, merci pour l'idee de la marge : je vais essaye.

Le probleme est que la liste est generer dynamiquement, donc le <div> du texte peut ou peut ne pas etre impacte par ce menu.

Il n'y a pas de facon de lui dire uniquement "prend la place qui te reste de libre sur la droite" ?

Les seules solutions que j'ai trouve sur le net, comme sur ce lien par exemple utilise des blocs de taille fixe ... ce qui est exactement ce que je veux eviter.

Modifié 17 Janvier 2007 par destroyedlolo

[biouche]

De rien

Je ne suis pas sûr, mais à ta place j'essaierais dans ce cas de donner une marge gauche de 85% (100% moins les 15% de la largeur du menu) à ton bloc de texte.

[KnockedMaster]

Hello,

me voilà de retour après cette pause déjeuner un peu rallongée

Bon, il faudrait une url ou une capture pour pouvoir se rendre compte de ce qui se passe car je n'arrive pas à visualiser

et j'ai un peu de mal à comprendre ... car le css que tu donnes est incomplet ...

il n'y a pas de facon de lui dire uniquement "prend la place qui te reste de libre sur la droite" ?

si je comprends bien (pas sûr), alors c'est un clear:right appliqué au div de contenu dont tu as besoin

tiens nous au courant ...

@+

Modifié 17 Janvier 2007 par KnockedMaster

[destroyedlolo]

Bon, il faudrait une url ou une capture pour pouvoir se rendre compte de ce qui se passe car je n'arrive pas à visualiser

et j'ai un peu de mal à comprendre ... car le css que tu donnes est incomplet ...

Voici une capture de ce que ca donne : mon menu a gauche, le text au centre. Dans ce cas precis, mon text est assez consequent donc ca ne gene pas que sa boite soit plus grande que le menu. Mais a d'autre endroit du site, j'ai le meme probleme avec des boites plus petite, et j'aimerai bien qu'elles "a cote" du menu s'il est present.

Le s'il est present est important car j'ai essaye en ajoutant un style='margin-left:17%' qui fonctionne tres bien ... sauf que c'est ignoble lorsque la boite n'est pas a cote du menu.

(comme je le disais, le menu est generer dynamiquement, donc il peut ou ne peut pas etre present au niveau de la boite).

si je comprends bien (pas sûr), alors c'est un clear:right appliqué au div de contenu dont tu as besoin

tiens nous au courant ...

Je ne pense pas car le clear:right indique que la boite se placera pour qu'il n'y ai rien a sa droite. Moi, ce qui m'interesse, c'est que la boite ne chevauche pas se qui se trouve a cote d'elle.

[destroyedlolo]

Bon, ben il semblerait que ce ne soit pas possible ... a moins d'utiliser les tables pour faire la mise en page C'est peut etre ce que je ferais si vraiment le besoin s'en fait sentir.

Tant pis.

Bye

Laurent

[captain_torche]

Je pense plutôt que tu dois revoir la conception de ta page :

Il faudra sans doute envisager de créer un conteneur supplémentaire à droite, qui englobera tout ce qui n'est pas menu.

En gros :

- Un premier Div, en flottant, contenant le menu et ce qui est en-dessous

- Un second Div à côté, en flottant également, contenant le reste (image, titre, paragraphe)

Sauf erreur, ça devrait fonctionner.

Mais, c'est quand même dur de travailler "en aveugle". Si tu pouvais mettre une page de test sur un serveur, ça pourrait accélérer les choses.

[destroyedlolo]

Je pense plutôt que tu dois revoir la conception de ta page :

Il faudra sans doute envisager de créer un conteneur supplémentaire à droite, qui englobera tout ce qui n'est pas menu.

En gros :

- Un premier Div, en flottant, contenant le menu et ce qui est en-dessous

- Un second Div à côté, en flottant également, contenant le reste (image, titre, paragraphe)

Sauf erreur, ça devrait fonctionner.

Oui, mais dans ce cas la, mon texte sera toujours decale sur la gauche (comme si je met un Margin-left d'ailleurs. Mais c'est ce que je veux eviter lorsque la boite de texte se trouve sous le menu.

Mais, c'est quand même dur de travailler "en aveugle". Si tu pouvais mettre une page de test sur un serveur, ça pourrait accélérer les choses.

Je prevois de mettre le site en ligne d'ici la fin de la semaine ou debut de la semaine prochaine. Je donnerai l'URL.

J'ai malheureusement des problemes d'affichage avec IE mais j'en reparlerai lorsqu'il sera en ligne, c'est trop compliquer a expliquer

[destroyedlolo]

Bonjour,

Il y a un exemple sur cette page : http://destroyedlolo.hd.free.fr/Trombinoscope/Laurent/ (ce n'est pas l'URL definitive, c'est pourquoi je n'ai pas mis de lien car je ne veux pas qu'il soit reference).

Ce que je souhaiterais, c'est que le cadre "Je suis le webmaster ..." soit automatiquement decalle a droite si il tombe en face du menu, sinon, qu'il reste colle en bord de page.

C'est fait pour le texte, mais pas pour le cadre.

Merci et a+

[Dan]

Et si tu mettais tout simplement ton <div> en "float:left", et le <h1> à l'intérieur du <div>, non ?

[aymericj]

Bonjour destroyedlolo;

En fait c'est tout con, ton menu n'a pas de "hauteur" oui je sais, c'est bête, mais le conteneur <div class="zone encadree"> utilisé pour ton texte ne reconnait pas le layout de ton menu (alors que le texte contenu dans les <p> si).

Le meilleur moyen la bidouille à faire : ajouter une hauteur "virtuelle" à ton ".navigation", du type "height:300px;"

Welcome in ze wondefull world of CSS zarbi things.

Modifié 23 Janvier 2007 par aymericj