Discussion :

[Gan_user]

Bonjour,

Je dois réaliser une page d'accueil d'accès à différentes page pour mon travail. Cependant je butte sur truc et je n'y arrive pas.
page doit être compatible tout navigateur.

mon menu se présente de la manière suivante :

un texte bouton1 bouton2
un texte bouton3 bouton4

je voudrais que mon texte soit aligné au centre de mes boutons et que mes boutons1 et 3 commence sur la meme marge.

J'ai tenté le verticale aligne mais ça rend pas bien :-(. et en jouant avec les marge ça décale quand meme.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="fond_div">
Les ventes (portefeuille /<br /> affaires nouvelles et résiliées)
<span class="marge3"> 
<input type="button" onclick=xxx;" class="btn_1" value="Portefeuille">
<input type="button" onclick=xxx; return false;" class="btn_4" value="Prod date comptable">
</span>
<br /><p>------------------------------------------------------------------------------------------</p>
<br/>
L'activité et la prescription <br /> (EDV / Projets)
<span class="marge2"> 
<input type="button" onclick=xxx; return false;" class="btn_1" value="Portefeuille">
<input type="button" onclick=xxx; return false;" class="btn_4" value="Prod date comptable">
</span>
</div>

quelqu'un peut-il m'aider ?

Merci par avance

[Muchos]

je trouve que ce menu ressemble beaucoup à un tableau.

Dans le doute, je propose une solution en liste de description (<dl>, mon élément favori).

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<dl class="menu">
  <dt>Les ventes (portefeuille /
    <br /> affaires nouvelles et résiliées)
  </dt>
  <dd>
    <input type="button"
      value="Portefeuille" />
  </dd>
  <dd>
    <input type="button"
      value="Prod date comptable" />
  </dd>
  <span class="separator"></span>
  <dt>L'activité et la prescription
    <br />(EDV / Projets)
  </dt>
  <dd>
    <input type="button"
      value="Portefeuille" />
  </dd>
  <dd>
    <input type="button"
      value="Prod date comptable" />
  </dd>
</dl>

Et pour la possible CSS :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.menu {
  width: 75%; /* exemple */
}
dt, dd {
  display: inline-block;
}
dt {
  min-width: 25%; /* ex. */
}
.separator {
  display: block;
  margin-top: 0.5em; /* ex. */
  border-top: thin dashed black;
  height: 0.5em; /* ex. */
}

[Gan_user]

Modif : C'est super !! ça répond parfaitement à mon besoin. Merci beaucoup


_____________________________________________________

Merci :-) je vais tester ça et reviendrais vous dire si j'ai réussi