Discussion :

[TorF]

Salut,

Je tente de créer un site avec du CSS et du XHTML strict, mais je n'arrive pas à mettre en forme correctement le haut de ma page.

Voci ma page actuelle :



Voici la page que je souhaite obtenir :


La zone ul "Bienvenue visiteur" placée en bas en gauche du bandeau.
La zone ul "Accueil, blogs, etc." placée en bas à droite du bandeau.
L'image bien centrée.
Le tout placé sur le bas du "bandeau".

Voici le code HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="menu_navigation">
   <a href="/"><img id="logo" src="http://www.anti-phoenix.org/images/logos/deblogs-logo.jpg" alt="Déblogs" title="Déblogs" /></a>
 
 <ul id="menu_nav_user">
  <li>Bienvenue visiteur</li>
  <li><a href="/connection">M'identifier</a></li>
  <li class="last"><a href="/inscription">M'inscrire</a></li>
 </ul>
<ul id="menu_nav_links">
 <li><a href="/com/">Accueil</a></li>
 
 <li><a href="/blogs">Blogs</a></li>
 <li class="last"><a href="/articles">Articles</a></li>
 </ul>
</div>

Et voici le code CSS :

Code :

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

1
2
3
4
5
6
7
8
.menu_navigation {
 border-bottom: 1px solid #cccccc;
 font-size: 0.8em;
 text-align: center;
}
.menu_navigation #logo { border: none;}
.menu_navigation #menu_nav_user { text-align: left; bottom: 0;}
.menu_navigation #menu_nav_links { text-align: right;}

J'ai bien sur tenté tout un tat de possibilités avec des float, des position absolute ect. mais sans jamais obtenir ni le résultat désiré, ni quelque chose d'acceptable.

Est-ce que quelqu'un peut m'indiquer le bon code ? ou quelque chose pour me faire avancer ?

Merci !

[Joad]

Bon j'allais te proposer d'utiliser un tableau mais j'imagine que tu veux tout faire avec les div !

Déjà premiere chose dans ton code html j'aurais changé l'ordre :

<div class="menu_navigation">
<ul id="menu_nav_user">
<li>Bienvenue visiteur</li>
<li><a href="/connection">M'identifier</a></li>
<li class="last"><a href="/inscription">M'inscrire</a></li>
</ul>
<a href="/"><img id="logo" src="http://www.anti-phoenix.org/images/logos/deblogs-logo.jpg" alt="Déblogs" title="Déblogs" /></a>

<ul id="menu_nav_links">
<li><a href="/com/">Accueil</a></li>

<li><a href="/blogs">Blogs</a></li>
<li class="last"><a href="/articles">Articles</a></li>
</ul>
</div>

et pourquoi tu ne mettrais pas chacun de tes éléments dans une Div séparée ? a l'intérieur de t adiv "menu_navigation" ?

[TorF]

Effectivement je cherche à ne pas utiliser les tableaux car l'apparence du site serait alors figée.


Il me semble que l'ordre ne doit jouer en rien sur l'affichage.
Car l'objectif est justement qu'en modifiant uniquement le CSS, il soit possible d'afficher l'image à gauche ou à droite par exemple.
Et ceci même si le code de l'image est placé avant, au milieu ou après les balises <ul>.
Je viens d'essayer cette idée mais j'obtiens des résultats quasi similaires.


En effet il vaut mieux que je place l'image dans un div. Voici la ligne qui affiche l'image maintenant :

Code :

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

<div id="logo"><a href="/"><img src="http://www.anti-phoenix.org/images/logos/deblogs-logo.jpg" alt="Déblogs" title="Déblogs" /></a></div>

Concernant les <ul>, il n'est pas nécessaire de les placer dans des divs, car les <ul> sont déjà considérés comme des divs, au même titre que des p, blockquote, form etc.
Enfin je crois, j'essaye quand même en les placant dans des divs.


Je continue d'essayer, et j'ai l'impression que c'est surtout le CSS qu'il est nécessaire de modifier maintenant.

[Joad]

Il me semble que l'ordre ne doit jouer en rien sur l'affichage.
Car l'objectif est justement qu'en modifiant uniquement le CSS, il soit possible d'afficher l'image à gauche ou à droite par exemple.

Là je ne suis pas d'accord avec toi
Selon la manière ton tu as programmé tes <div> (sur ton site en relative), leur place dans le code détermine la façon dont ils seront agencés a l'écran. Par contre si tu veux pouvoir tout controler avec les CSS il faut que tu leurs mette une position Absolute.

Tu as surement raison pour les ul, pas besoin de Div.

[Invité]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="header">
   <ul id="menu_nav_user">
     <li>Bienvenue visiteur</li>
     <li><a href="/connection">M'identifier</a></li>
     <li class="last"><a href="/inscription">M'inscrire</a></li>
   </ul>
   <ul id="menu_nav_links">
      <li><a href="/com/">Accueil</a></li>
      <li><a href="/blogs">Blogs</a></li>
      <li class="last"><a href="/articles">Articles</a></li>
   </ul>
</div>

Et voici le code CSS :

Code :

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

1
2
3
4
5
6
7
8
#logo {
 border-bottom: 1px solid #cccccc;
 font-size: 0.8em;
 text-align: center;
 background:url(http://www.anti-phoenix.org/images/logos/deblogs-logo.jpg) no-repeat;
}
#menu_nav_user { text-align: left; bottom: 0;}
#menu_nav_links { text-align: right;}

Moi je dirais ça

[TorF]

Malheureusement cette solution ne marche pas.

[TorF]

J'y suis enfin arrivé !

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="menu_navigation">
 <ul id="menu_nav_user">
  <li>Bienvenue visiteur</li>
  <li><a href="/connection">M'identifier</a></li>
  <li><a href="/inscription">M'inscrire</a></li>
 </ul>
 <ul id="menu_nav_links">
  <li><a href="/">Accueil</a></li>
  <li><a href="/blogs">Blogs</a></li>
  <li><a href="/articles">Articles</a></li>
 </ul>
</div>

CSS :

Code :

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

1
2
3
4
5
6
7
8
9
.menu_navigation {
 background-image: url(http://www.anti-phoenix.org/images/logos/deblogs/hippocampe-bleu.jpg); 
 background-position: top center;
 background-repeat: no-repeat;
 border-bottom: 1px solid #cccccc;
 padding: 55px 0 0 0;  /* 55 pixels correspond à la hauteur de l'image - (moins) 1em */
}
#menu_nav_user { float: left;}
#menu_nav_links { text-align: right;}

Merci Joad et St0uK !


Le seul hic est que je ne peux pas placer de lien sur le logo.