28172 sujets

CSS et mise en forme, CSS3

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

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 Smiley ohwell

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)
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 Smiley ohwell
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. upload/27953-ex.png
Modifié par leander (15 Mar 2010 - 17:59)
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 Smiley smile
Merci encore.
Sujet clos
Aller à