Positionner le texte à droite d'un menu vertical (3 boutons).

Auteur
leander	# 15 Mar 2010 - 14:12:20
3 Posts	Bonjour ! Alors comme le titre l'indique, je tente de positionner mes paragraphes justifiés à droite d'un menu vertical composé de trois boutons. J'ai déjà testé les propriétés float et position mais elles ne semblent pas convenir pour ce que je souhaite faire, les boîtes se mettent les unes après les autres en utilisant "float" et la position:absolute place bien mon texte comme je le souhaite mais les liens se situant en dessous de mes paragraphes chevauchent mon texte... Bref, je commence à désespérer En plus de ça, j'aurais aussi voulu que les trois boutons gardent une position fixe sur la page lors du scroll. Ca fonctionne en utilisant la propriété position:fixed mais seulement un seul bouton s'affiche... Voici les codes : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Bla.</title> <link rel="stylesheet" media="screen" type="text/css" title="styles" href="styles.css" /> </head> <body> ... <div> <a href="#" class="bouton1" title="blop."></a> </div> <div> <a href="#" class="bouton2" title="blabla."></a> </div> <div> <a href="#" class="bouton3" title="blablabla."></a> </div> <blockquote> <p>blablabla...</p> <p>blablablablabliblobla...</p> <blockquote> <div> <ul id="menu"> <li>2010</li> - <li><a href="http://..." target="_blank" class="grey">VERSION ANGLAISE</a></li> - <li><a href="http://..." target="_blank" class="grey">...</a></li> - <li><a href="http://..." target="_blank" class="grey">...</a></li> </ul> </div> ... </body> </html> `blockquote { margin-left: 250px; margin-right: 100px; } a.bouton1 { display:block; width:130px; height:130px; background-color: #F8F8FF; background-image: url(bt5.png); background-repeat:no-repeat; padding: 5px; margin-right:10px; } a.bouton1:hover { background-color: #F8F8FF; background-image: url(bt5-1.png); background-repeat:no-repeat;` Voilà, si quelqu'un voit comment faire... Merci à tous ! Modifié par leander (15 Mar 2010 - 15:08)
3 Posts
Zulie494	# 15 Mar 2010 - 16:34:48
49 Posts	Bonjour Je vois pas très bien ce que tu veux faire. Pourrais-tu me donner un croquis ?
49 Posts
leander	# 15 Mar 2010 - 17:30:50
3 Posts	Merci pour ta réponse. Après toute une aprem de recherche, j'ai réussi à placer mon texte d'une manière pas très propre mais bon... Maintenant, j'ai juste du mal à positionner mon footer Je te poste une image pour que tu visualises mieux. Le problème de mon footer c'est qu'il est contenu dans un <blockquote> qui a en css : `blockquote{ position:absolute; top:100px; height:auto; margin-left:250px; margin-right:100px; }` La position absolute sert à placer mon texte à droite des boutons (je n'ai pas su faire autrement). Mon footer (liens sur l'image : version anglaise...) prend donc toutes ces propriétés (margin-left...) alors que j'aurais aimé qu'il soit centré comme les liens du haut (accueil, à propos...), et si je ne le mets pas dans ce <blockquote> il chevauche mon texte, pfiou... Enfin bref, j'espère que tu comprends mieux ce que j'essaie de faire maintenant. Modifié par leander (15 Mar 2010 - 17:59)
3 Posts
Aureance	# 15 Mar 2010 - 19:04:57
Bonjour. 482 Posts	Bonjour, Il y a, sur Alsascréations, une belle galerie de gabarits pour les mises en pages. Le code de ces structures de base est à voir ou récupérer dans la source. Modifié par Aureance (15 Mar 2010 - 19:05) Forums : Les gens pressés lisent en diagonale et répondent de travers.
Bonjour. 482 Posts
leander	# 15 Mar 2010 - 19:46:58
3 Posts	Merci beaucoup pour le lien. J'aurais juste préféré ne pas avoir à tout refaire mais bon, au moins ça fonctionnera et puis, ça sera plus propre Merci encore.
3 Posts