Comment "fixer" des <ul> dans des <div>?

Marsh Posté le 09-03-2005 à 23:34:58

Salut.
Vous pouvez voir mon problème sur le premier jet de mon site. http://www.fisenne.be/new/test.php
J'essaye donc de créer des boutons transparents pour que les noms présents sur mon image de fond servent de boutons. Je sais créer le principe de lien mais je n'arrive pas à ce que mon cadre UL reste bien centré dans mon cadre DIV. Comment dois-je faire? Voici mon code:
<html>
<head>
<title>Fisenne</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<STYLE type="text/css">
BODY { background: url("final_fond.jpg" ) ; background-position: center ; background-repeat: no-repeat }
.Style1 {
color: #FFFFFF;
font-size: 12px;
}

#conteneur {
position:absolute;
left: 50%;
top: 50%;
width: 885px;
height: 590px;
margin-top: -295px; /* moitié de la hauteur */
margin-left: -445px; /* moitié de la largeur */
border: 1px solid #000;
}

#global {
position:absolute;
left: 50%;
top: 50%;
width: 555px;
height: 360px;
margin-top: -85px; /* moitié de la hauteur */
margin-left: -130px; /* moitié de la largeur */
border: 1px solid #000;
overflow:auto;
}
#cadre {
position:absolute;
left: 50%;
top: 50%;
width: 200px;
height: 450px;
margin-top: -285px; /* moitié de la hauteur */
margin-left: -430px; /* moitié de la largeur */
border: 3px solid #000;
}
ul#menu
{
position:absolute;
width: 200px;
height: 450px;
border: 1px solid #000;
list-style-type: none;
}
ul#menu li a
{
color: #A8B4F3 ;
text-decoration: none ;
}

li#accueil a {
width: 78px;
height: 33px;
left: 1px;
top: 2px;
border: 1px solid #000;

}
li#projets a {
width: 102px;
margin-left: -15px;
height: 32px;
position:absolute;
left: 30px;
top: 196px;
border: 1px solid #000;

}
li#team a {
width: 83px;
margin-left: 0px;
height: 37px;
position:absolute;
left: 28px;
top: 144px;
border: 1px solid #000;

}
li#forum a {
width: 164px;
margin-left: -14px;
position:absolute;
left: 34px;
top: 285px;
height: 31px;
border: 1px solid #000;
}
li#livre a {
width: 152px;
margin-left: -22px;
position:absolute;
left: 34px;
top: 328px;
height: 32px;
border: 1px solid #000;
}
li#liens a {
width: 133px;
position:absolute;
height: 35px;
border: 1px solid #000;
left: 50%;
top: 50%;
margin-top: -50px; /* moitié de la hauteur */
margin-left: px; /* moitié de la largeur */
}

ul#menu li a span
{
display: none ;
}

</STYLE>

<body>

<div id="conteneur">

<div id="cadre">

<ul id="menu">
<li id="accueil"><a href="index.html" title="Page de news"><span>News</span></a></li>
<li id="projets"><a href="index.html" title="Nos projets"><span>Projets</span></a></li>
<li id="team"><a href="index.html" title="Notre équipe"><span>La team</span></a></li>
<li id="forum"><a href="index.html" title="Visiter le forum"><span>Forum</span></a></li>
<li id="livre"><a href="index.html" title="Nous laisser un message"><span>Livre d'or</span></a></li>
<li id="liens"><a href="index.html" title="Autres pages intéressantes"><span>Liens</span></a></li>

</ul>
</div>

<div id="global"><?php
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page'];
switch($page)
{
case 'accueil': include ('accueil.htm');break;
case 'fisenne': include ('http://www.fisenne.be/new/fisenne.htm');break;
case 'calendrier':include ('http://www.fisenne.be/new/fisenne1.htm');break;
case 'albumphotos':include ('albumphotos.htm');break;
}
?>
</div>
</div>
</body>
</html>

Reply

Marsh Posté le 09-03-2005 à 23:34:58

Reply

Marsh Posté le 10-03-2005 à 00:46:23

hello pour centrer un element dans un autre y a une combine je crois qui consiste a fixer la largueur de ta balise et de mettre les margin droite et gauche en auto
tu peux essayé de chercher par la

Reply

Marsh Posté le 10-03-2005 à 12:05:47

concrètement, je dois changer quoi à mon code? Je ne trouve pas... je dois bien travailler dans le css de "menu"? Celui-ci étant le cadre que je voudrais centrer dans le "cadre". Parce que si je rajoute
margin-left: auto;
margin-right: auto;
dans "ul#menu" ca ne change rien...
Merci d'avance

Reply

Marsh Posté le 10-03-2005 à 12:34:51

C'est bon les gars j'ai trouvé. Si ça intéresse qq, j'ai simplement changé la balise "position": au lieu de absolute, j'ai mis: static et c'est nikel

Reply

Comment "fixer" des <ul> dans des <div>?

Sujets relatifs:

Leave a Replay