Impossible de mettre le menu à droite

Bonjour à tous,

Ca fait deux jours (rien que ça en effet ) que je me creuse la tete dans tout les sens pour trouver un moyen de mettre mon menu également à droite.

J'ai essayé diverses combinaisons et je sais qu'il y a un ordre à respecter mais soit mon menu de droite s'affiche en dessous du bloc central, soit c'est le bloc central qui s'affiche en dessous du menu droit, bref j'arrive jamais à avoir quelque chose de potable.

J'espere que vous trouverez la solution et que vous pourrez me l'expliquer car je deviens un peu fou mais j'abandonne pas

Alors voici le site, vous verrez le code dans le code source, ce sera plus simple que d'utiliser tout l'écran ici

Et le fichier css :



Et les images au cas où :

Le but est de mettre le menu droit , au meme niveau que le menu gauche mais à droite du bloc central.



Merci d'avance
Modifié par Bartimeus (31 Oct 2007 - 12:46)

Il faut utiliser un clear: both sur un objet qui est censé etre en dessous de ton menu et de ton bloc central.

Du moins si j'ai bien compris la question :s

Bartimeus,

Pour rebondir sur les propos de DevJoe, ta demande n'est pas très explicite, le code un poil "trop léger" n'aide en tout cas pas à la compréhension de la structure de ta page (un peu de contenu avec lorem ipsum par exemple ?)

Au premier regard, tu positionnes à gauche ton menu :

#menu li {
	display: block;
	float: left;
}

#menu a {
	display: block;
	float: left;
	height: 38px;
	padding: 8px 20px 0 20px;
	text-decoration: none;
	text-transform: lowercase;
	color: #000000;
}

Alors que tu sembles désirer le contraire...

Une page en ligne nous faciliterait le "travail", tout en donnant accès à tes images...aides-nous à te venir en aide

Bonjour,

Désolé je pensais que cela suffisait, mais je viens de me rendre compte que pas du tout

Alors voici le site, vous verrez le code dans le code source, ce sera plus simple que d'utiliser tout l'écran ici



Et le fichier css :



Et les images au cas où :



Le but est de mettre le menu droit , au meme niveau que le menu gauche mais à droite du bloc central.


Modifié par Bartimeus (31 Oct 2007 - 12:46)

C'est beaucoup mieux en effet

Pour peu que j'ai suffisemment bien interprêté ton soucis, je pense que ce tuto va grandement te faciliter la tâche

Je vais tenté de regarder ton code plus en détail

Il me semble que la structure de ta page via tes images ( et leurs tailles... ) soit un poil en cause dans le problème que tu rencontres...
Je creuserai de ce coté là également...

Merci de ton aide, je repasserai ce soir, te prends pas la tete dessus, je peux continuer à écrire mes articles à coté, donc ca presse pas

Bartimeus,

Je ne me prends pas la tête, sinon, je ne prendrai pas la peine de répondre aux messages
Concernant ton problème, je ne vais pas pouvoir faire grand chose de plus, je t'ai déjà donné toutes les solutions...

Je reprends :
Prends le temps de lire ce tuto : http://css.alsacreations.com/xmedia/exemples/3colonnes/exemple-3.html
et adaptes-le à ton besoin, c'est exactement ce que tu cherches à faire

Tes images sont trop grandes par rapport à la taille que tu as définie pour ta page (962px) pour que sidebar1 puisse se placer à droite du conteneur ( 230px * 2 pour tes sidebars + 700 px pour ton "content", il doit bien y avoir quelques marges par ci par là....Je te laisse faire le calcul... )

En retirant les images "contraignantes" ( 9,10 et 13 par exemple...) en supprimant la largeur du conteneur pour qu'il prenne toute la place disponible entre les deux flottants et en lui imposant des marges droite et gauche de la dimension de tes sidebars avec un peu d'espace pour respirer et "faire joli" ( j'ai mis 240px ) ton menu droit arrive parfaitement à ce placer dans le flux, donc à droite de ton conteneur...

En conclusion, soit tu revois les dimensions de ta page pour garder la découpe de ton design ( ça risque de faire un peu grand pour les petites résolutions, genre 800*600....)
Soit tu revois à la baisse la largeur de ces images pour que la somme totale de ces largeurs n'excèdent pas la largeur totale de ta page,
Soit tu supprimes ces images...et tu fais autrement ces petits coins arrondis ( je te laisse chercher sur le site le tutoriel, il me semble également qu'il y a des révisions en cours pour lister toutes les possibilités )
Voilà ce que cela peut donner :

@plus

Hello,

Merci d'avoir pris la peine de m'aider, j'ai relu plusieurs fois et je t'avoue ne pas avoir compris grand chose (Je suis pas tres calé en Xhtml/css) , donc je vais essayer toute la soirée et si je bloque je reviendrai poster

Dans tout les cas, je viendrai donner des nouvelles
Modifié par Bartimeus (26 Oct 2007 - 17:14)

Tu n'as pas compris grand chose à quoi ?
Le tuto ? Ma bavouille ?
Il n'y a rien de très compliqué, je veux bien prendre le temps de te répondre puisque visiblement je n'ai pas été suffisemment explicite

Hello,

Non en fait tu as été parfaitement explicite, je vais tester plusieurs combinaisons, mais c'est le fait de placer le bloc droit, tu as modifié seulement les images? ou changer des propriétés CSS et le code xhtml ?

Car en modifiant quelques images, le bloc menu droit reste en dessous du bloc central.

Qu'est ce que le conteneur ?

Je suis un peu perdu désolé
Modifié par Bartimeus (26 Oct 2007 - 17:41)

On garde le sourire !!!

Pour faire simple ce que j'appelle un conteneur c'est une balise servant à englober du contenu, une div par exemple

Pour faire au plus simple :

Au niveau html voici l'ordre de présentation de tes conteneurs :

<div id="sidebar">
<div id="sidebar1">
<div id="content">

Au niveau css :

#content {
	padding: 11px 11px 0 5px;
	margin-left: 240px;
	margin-right: 240px;
}
#sidebar {
	float: left;
	width: 230px;
	padding: 11px 5px 0 11px;
}
#sidebar1 {
	float: right;
	width: 230px;
	padding: 11px 5px 0 11px;
}

Les autres modifs concernaient les images dont je te parlais plus haut, j'ai juste modifié l'image 13 ( la orange ) pour faire joli et j'ai viré les autres ( celles qui par leurs tailles empêchaient ton menu droit de se placer où tu le souhaitais )

Bref, c'est du "fait rapide", il y a certainement beaucoup mieux à faire, mais dans l'idée, ce n'est pas très loin

Si tu as compris le principe, modifies juste la taille de tes images pour qu'elles s'adaptent à ta mise en page ( pour résumer, tu as trois colonnes côte à côte... ), modifies l'ordre d'apparition de ces conteneurs et modifies la feuilles de style comme sur le tuto, voilà le tour est joué

Tu peux également styliser ces trois colonnes via css pour qu'elles aient le look initial de ton design...

A quoi te sert le conteneur

<div style="clear: both;"> </div>

?

Hello,

Merci de ton explication, alors j'ai fais ce que tu m'as dis et ca me donne ça :

http://img101.imageshack.us/img101/6076/sitewebbm9.jpg



pour

<div style="clear: both;"> </div>

Ca me permet d'éviter d'avoir une ligne verte entre le bloc central et le footer

Je vais continuer à experimenter, j'abandonne pas meme si à noel j'y suis encore

Ps: As tu encore besoin que je garde en ligne le site "test" ? car j'aimerai evité que les bots indexent mon ftp
Modifié par Bartimeus (26 Oct 2007 - 18:17)

Ce n'est pas plus mal si ton site reste en ligne, pour que d'autres puissent y avoir accés et te venir en aide le cas échéant

Je vois que nous progressons ton menu droit est à droite !!!...

J'aurai dû te le préciser, mea culpa, en fait, l'élément page ( ou un autre ) doit servir de conteneur pour les 3 colonnes, c'est ce que j'ai fait, tu dois donc avoir une structure de ce type:

<div id="page">
<div id="sidebar"></div>
<div id="sidebar1"></div>
<div id="content"></div>
</div>

Ensuite tu règleras le style petit à petit, la hauteur/ largeur de tes images, tes couleurs, etc...

En effet c'est mieux merci ^^

Je vais m'accorder la soirée, j'ai mal à la tete
Je retenterai ce week end, merci de ton aide en tout cas , tu m'as bien aidé