Besoin d'aide pour la taille des menus

Bonjour et merci d'avance pour votre aide.

J'ai besoin d'aide sur un design en CSS 2.1 appliqué à un site en XHTML 1.0.
Voici le site en question : http://waidei.free.fr/DEV/WD.2007-02/index.htm
Rassurez vous, les couleurs actuelles ne sont nullement définitives.

Je voudrais parvenir à 2 choses :
- Séparer le menu de droite (en vert) du menu du haut (en violet clair) et du contenue (en violet foncé).
- Que le le haut du menu de droite (en vert) ne dépasse pas plus que le haut du contenue (en violet foncé).

Les tableaux sont PROSCRIT car le but est d'obtenir un site qui soit au moins WAI-I.
(Le mieux étant de parvenir à un site qui soit WAI-III, bien sur.)

La CSS utilisé ce trouve là -> http://waidei.free.fr/DEV/WD.2007-02/css/style1.css

Si je poste ici, c'est parce que je n'ai pas réussi mal grès tout les tutos que j'ai lut.
Ceci dit j'accepte toute forme d'aide, y compris vers un énième tutoriel.
Modifié par Bigou (03 Feb 2007 - 15:05)

Bonjour et bienvenue sur Alsacréations,

Cela serait plus simple si tu éditais tes liens pour qu'ils soient clicables .

ps: tu devrais éditer ton titre pour formuler une question plus précise (pas besoin de mettre HELP dedans )

édit:merci
Modifié par Igor (03 Feb 2007 - 15:08)

Pour le titre ça devrais être mieux.
Et côté liens, ça venais de l'habitude des autres forum.

Tout ça est corrigé maintenant, ça devrais aller.

Bonjour

Ce ne sont pas deux blocs l'un à côté de l'autre, le violet enveloppera toujours le vert (on le vérifie quand on diminue beaucoup la largeur du navigateur). Il n'y a donc pas de marge entre les deux. Il est possible de la simuler avec
#menu_cote { border-left:solid yellow 15px; border-bottom:solid yellow 15px; }

Pour le décalage en hauteur, je ne sais pas, mais vérifie bien que c'est ce que tu veux (ce ne sont pas des colonnes, mais un encart en haut à droite)

Pour ce qui est de la séparation entre le menu du haut et le menu du bas,
désormais c'est OK, j'ai fini par trouver comment faire.

guenael a écrit :
Ce ne sont pas deux blocs l'un à côté de l'autre, le violet enveloppera toujours le vert (on le vérifie quand on diminue beaucoup la largeur du navigateur). Il n'y a donc pas de marge entre les deux. Il est possible de la simuler avec
#menu_cote { border-left:solid yellow 15px; border-bottom:solid yellow 15px; }

Ton astuce elle m'aide à régler un point du design que je n'avais pas encore abordé, donc merci.
Je vais uploader le résultat tout à l'heure.

Cependant, im m'est du coup impossible d'utiliser ton astuce pour séparer les 2 blocs.
Je voudrais donc arriver à faire sortir le bloc contenant le menu de droite de celui contenant le texte du milieux.

Où puis-je trouver l'astuce pour faire cela ?
Modifié par Bigou (04 Feb 2007 - 17:41)

guenael a écrit :
Ce ne sont pas deux blocs l'un à côté de l'autre, le violet enveloppera toujours le vert (on le vérifie quand on diminue beaucoup la largeur du navigateur).

Euh... non, pas du tout.
Les deux éléments sont bien séparés dans le code HTML. Le menu de droite est flottant, et à ce titre il survole une partie du bloc violet qui, lui, prendra toute la largeur disponible dans leur bloc parent respectif.

guenael a écrit :
Il n'y a donc pas de marge entre les deux.

Le flottant ne repousse que le texte du bloc de contenu, et pas le bloc lui-même, d'où l'effet de superposition.

Pour faire les choses un peu proprement :

#contenu {
	margin: 15px 190px 15px 15px;
	padding: 1px 0;
	background-color: #9999CC;
}
#menu_cote {
	float: right;
	width: 158px;
	margin: 15px 15px 15px 0;
	padding: 1px 0;
	background-color: #99CCCC;
}

div#contenu étant survolé par les flottant, il faut lui attribuer une marge à droite qui passera sous le flottant, et qui correspondra à la largeur du flottant plus l'écart souhaité.

Pour l'écart avec le menu du haut, les margin-top: 15px (ou leur équivalent sous la forme contractée margin: <marge du haut> <marge de droite> <marge du bas> <marge de gauche>) devraient faire l'affaire.

Enfin, pour éviter quelques soucis de fusion des marges, on utilise un padding de 1px en haut et en bas de chacun des deux blocs.
À propos de la fusion des marges, cf. http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Merci beaucoup de ton aide, tu as totalement réglé mon problème !
Maintenant je vais pouvoir finir tranquillement, le design.

Si vous voulez je posterais un lien quand ça sera fini, histoire que vous puissiez voir le résultat.

Ce sujet est donc [Résolu] ?