28220 sujets

CSS et mise en forme, CSS3

Position Absolue Menu en CSS

Bonjour à tous,

Je suis en train de travailler sur mon site web. J'ai un menu, en vertical à gauche, positionné en absolue.
J'ai également sous ce menu un div qui contient quelques liens.
Voici ma déclaration css :


ul#menu
{
	position:absolute;
    width:200px; /* largeur obligatoire pour être centré */
	top:100px;
	background-color: #e6ecf2 ;
	border: 2px solid #adc4d9 ;
	-moz-border-radius: 8px;
}


ul#Divliens
{
	position:absolute;
	top:300px;
	margin:0px;
	padding:0px;
	width: 200px;
	border: 2px solid #adc4d9 ;
	-moz-border-radius: 8px;
}


Le souci avec cette déclaration, c'est que si j'ajoute un lien ou un élément dans le menu, je dois également modifier ma feuille de style.
C'est assez embêtant. J'avais penser à une solution pour cela.

Je déclare un div global positionné en absolu. Dans ce div, je placerai mon menu et mes liens positionnés en relatif. Est ce que ça résoudrait mon problème?

Merci pour vos réponses.
Bonjour,

Cette div de liens est-elle inclue telle quelle dans la liste ul ? Ou bien les liens sont-ils sagement dans des éléments de liste li ?

Pourrais-tu nous montrer le code html correspondant.
Igor a écrit :
Bonjour,

Cette div de liens est-elle inclue telle quelle dans la liste ul ? Ou bien les liens sont-ils sagement dans des éléments de liste li ?

Pourrais-tu nous montrer le code html correspondant.

Les liens sont inclus dans éléments de liste li.

Voici le code html :

<div id="gauche">
<ul id="menu">
	<li><?php if ($pageName == "homePage") {echo "<div id=\"on\">Accueil</div>";} else {echo "<a href='index.php'>Accueil</a></li>";}?>
	<li><?php if ($pageName == "cours") {echo "<div id='on'>Cours</div>";} else {echo "<a href='cours.php'>Cours</a>";}?></li>
	<li><?php if ($pageName == "ftp") {echo "<div id='on'>FTP</div>";} else {echo "<a href='ftp.php'>FTP</a></li>";}?>
	<li><?php if ($pageName == "CV") {echo "<div id='on'>CV</div>";} else {echo "<a href='cv.php'>CV</a>";}?></li>
	<li><?php if ($pageName == "ajouterNews") {echo "<div id='on'>Ajouter news</div>";} else {echo "<a href='ajouterNews.php'>Ajouter news</a>";}?></li>
	<li><?php if ($pageName == "Contact") {echo "<div id='on'>Contact</div>";} else {echo "<a href='mailto:mahefrancois@yahoo.fr'>Contact</a>";}?></li>
</ul>

<ul id="Divliens">
<div id="titreLiens">Liens</div>
	<li><a href="http://www.alsacreations.com/">Alsacréation - le site</a></li>
	<li><a href="http://forum.alsacreations.com/forum.php">Alsacréation - le forum</a></li>
	<li><a href="http://wiki.media-box.net/documentation/css?orderByType=1">Médiabox - Dicolive</a></li>
</ul>


<div id="divValidator">
<img border="0" src="http://www.w3.org/Icons/valid-xhtml10" alt="">
</div>
</div>

Donc pour l'instant, j'ai une solution qui marche mais un peu lourde : la partie gauche de mon site est constitué d'une div principale relative (gauche), dans laquelle je trouve une div pour mon menu en absolu (menu), une div pour mes liens en absolu (DivLiens). Y a t-il une solution plus optimale?


Merci en tout cas pour la réponse.
Sujet clos
Aller à