Discussion :

[Pouzy]

Bonjour à toutes et à tous !

J'ai un souci sur un design extensible.

J'ai un div de contenu, et un div de menu, et j'aimerai les mettre côte à côte, forcément

J'ai bien fait le menu avec width fixe, en float right, et le contenu avec une margin right plus grande que le menu (je mets le menu à droite).

Mais ça marche pas... Le menu est invariablement repoussé en bas du contenu. Il doit y avoir un truc qui coince, mais je vous avoue que j'ai l'impression d'avoir cherché partout, alors j'en viens à vous !

Voici le lien : Cache car en developpement

Merci pour toute l'aide que vous pourriez m'apporter

Pouzy

[sebhm]

Bonjour,

ne mets pas de margin-right à ton contenu, sinon il prend toute la place, et du coup, le menu, aussi flotant qu'il soit, n'a pas de place pour s'insérer !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#contenu{
	padding:0px;
	float:left;
	margin-right:0px;
	width:65%;
}

je te laisse regler la taille au mieux

[Pouzy]

Mais pourtant dans tous les tutoriaux, ce qu'on voit c'est bien une margin et pas une width... Pour laisser passer l'autre sur la bonne width, en fait :/

J'ai déjà fait ce que tu me proposes, mais ça varie selon les résolutions, ça peut laisser des gros trous ou tout condenser...

Pour prendre un exemple : cette structure :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#menu {
color:#707070;
float:left;
width:172px;
}
 
#corps {
margin-left:195px;
}

Aussi simple que ça, et ça passe... Ai-je manqué quelquechose?

Merci

PS : Si je mets position:absolute dans le corps, sans width et avec la margin, ça passe nickel sous Firefox, mais ça flingue tout sous IE...

[tzilliox]

Bonjour Pouzy !

De mon point de vue, il faut laisser le margin-right. Par contre, il faut placer dans ton code HTML les éléments flotants avant les éléments qui prennent toute la largeur de la page.

En concret, il faut mettre ton <div id="right">...</div> au dessus de ton <div id="cotenu">...</div>

Dis-moi si ça résoud ton problème,
Thomas.

[Pouzy]

Coucou,

Ca ne fait qu'inverser le souci! C'est ce que j'avais fait au début, mais maintenant c'est le contenu qui est relégué en bas...

Merci quand même! D'autres idées ?

Edit, j'ai mis le contenu en une couleur defond différente, maintenant on voit qu'il monte jusque en haut, mais que le texte ne commence qu'après le menu... (Sous FF seulement )

[tzilliox]

Re Pouzy !

Ben c'est nickel ! Ca va marcher

Il ne te reste plus qu'à supprimer le "clear: both" de la classes join_box.

Bon courage,
Thomas.

[sebhm]

Mais pourtant dans tous les tutoriaux, ce qu'on voit c'est bien une margin et pas une width... Pour laisser passer l'autre sur la bonne width, en fait :/

Pour prendre un exemple : cette structure :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#menu {
color:#707070;
float:left;
width:172px;
}
 
#corps {
margin-left:195px;
}

Aussi simple que ça, et ça passe... Ai-je manqué quelquechose?

Dans l'exemple que tu proposes, Menu n'a pas de margin-right. Si tu essaies d'en mettre un, le contenu du div "corps" va descendre lui aussi.

Le margin-left, dans les différents exemples qu'on trouve, sert à "décaler" le Div "corps" à coté du menu, sans spécifier de taille (afin qu'il prenne tout le reste de la page).

Float sert à 'sortir' du flux, afin dans notre cas de mettre 2 div cote à cote.
Il ne faut pas spécifier de margin pour l'élément flottant, sinon il flottera là où il en aura la place, margin compris.

Comme le dit Thomas, on place l'élément flottant avant l'élément qui occupe tout la largeur.
Ce qui signifie :
- qu'il ne faut pas que #Contenu ET #Right soient flottants tous les 2
- que si tu mets ton menu en Float, il faut le faire apparaitre avant #contenu dans le code
- Ou alors (en gardant ton code HTML tel quel) que c'est #contenu qui est flottant (Left), et tu appliques juste une margin-left à ton menu #Right

[Pouzy]

Bonjour,

J'ai trouve, j'avais des clear:both qui renvoyaient le tout en bas...

Toutes les methodes qu'on a citees fonctionnent sinon, mais c'est simplement que les clear:both renvoyaient sur toute la page, alors que je pensais qu'ils ne renvoyaient que dans le div les contenant, donc que le menu ne devait pas etre touche.

Bizarre tout ca, je fais creuser un peu plus

Merci en tout cas, je retire l'url car le site est encore en prephase de developpement