28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Peut-être pourrez-vous m'aider sur une question qui me pose soucis en ce moment.
J'écris le site web d'un ami graphiste à partir d'une maquette qu'il m'a fourni. Dans cette maquette, le menu se compose de 2 barres de lien qui encadrent le corps du site. Il n'y a pas de différences de sémantique (ce sont des liens de même niveaux) entre les différents liens du menu. C'est pourquoi je tiens au code suivant :


<ul id="menu">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
</ul>

<div id="corps">
<p>Test</p>
</div>


Selon la maquette, on doit donc voir une barre de menu en haut composé de Lien 1 et de Lien 2, puis le corps de la page et enfin tout en bas le reste de la barre de menu composé de Lien 3 et de Lien 4.

Pour l'instant, j'ai une pseudo solution qui marche très mal : j'ai fait tout le design en laissant la place des 2 menus (avec des margins bien placé), je me suis ensuite arrangé pour que le menu soit sur 2 lignes (les li sont flottants). Après, j'ai inséré une marge haute de la taille du corps pour les liens de la barre du bas afin de créer l'espace où le corps va s'afficher. Enfin, j'ai positionné le menu en absolute afin qu'il se place au bon endroit. Ca fonctionne, mais le menu s'affiche par dessus le reste, qui n'est plus clickable (ce qui n'est pas du satisfaisant).

Connaissez-vous une solution propre pour résoudre ce soucis ?
Bonjour,

Je verrais
- le conteneur principal en : position:relative;
- le menu dans le flux
- les deux derniers li en position:absolute avec bottom et left ou right pour les positioner.
- une marge degagée dans le conteneur principal pour laissé la place au deux liens , avec un padding-bottom . ou ce padding relégué dans le dernier enfant dans le flux du conteneur principal.

Ensuite , il n'y a pas de probleme a faire 2 listes ou deux paragraphes contenant deux liens.

le seul truc bizarre , c'est si tu passes de lien en lien avec la tabulation , le site va sauter d'un coup sans prevenir ...

Sans le visuel , ma critique ou le conseil ne vaut pas grand chose .

GC