Bonjours à tous
Je suis en train de réaliser un menu des plus simples en css et je n'arrive pas à center correctement le bloc ul dans ma div de menu. Firefox ne respecte pas la taille fixe que je lui donne et ie7 me l aligne n'importe comment...
Voici le script de mon css :
et voici l'html :
Merci d'avance à celui qui pourra m'aider
Modifié par SugataSan (22 Aug 2006 - 10:51)
Je suis en train de réaliser un menu des plus simples en css et je n'arrive pas à center correctement le bloc ul dans ma div de menu. Firefox ne respecte pas la taille fixe que je lui donne et ie7 me l aligne n'importe comment...
Voici le script de mon css :
/* CSS Document */
html {
background: transparent url(html_background.png) repeat-x;
}
body {
background-color: transparent;
color : #333333;
font-family: Arial, Verdana, Geneva, sans-serif;
font-size: smaller;
line-height: 170%;
}
p {
padding: 5px 20px 5px 20px;
/*text-indent: 1em;*/
}
a {
color: #444444;
}
a:hover {
color: #990000;
}
#conteneur {
position: absolute;
width: 700px;
left: 50%;
margin-left: -375px;
text-align: left;
/*border: 1px solid #CC0000;*/
}
#banniere {
height : 357px;
background-image : url(banniere.png);
background-repeat : no-repeat;
background-position: right;
margin-top: -30px;
margin-bottom : 10px;
}
#contenu
{
float: right;
height: auto;
width: 700px;
margin: 0;
background-image: url(bg_contenu.png);
background-repeat: repeat-y;
/*border: 1px solid #CC0000;*/
}
#contenu p {
margin-left: 250px;
margin-right: 20px;
margin-bottom: 10px;
}
#liste {
position: relative;
background-image: url(bg_menu.png);
background-position: right;
width:175px;
top: -330px;
left: 48px;
font-size: 1em;
margin: 0;
text-align: center;
border: 1px solid #CC0000;
}
#liste a {
color: #FFF;
text-decoration: none;
margin-left: 30px;
}
#liste ul {
width: 175px;
margin-top: 15px;
margin-left: -20px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #CC0000;
list-style: none;
}
#liste li {
background-image: url(bg_partie1.png);
background-position: center;
background-repeat: no-repeat;
margin-bottom: 8px;
}
#pied {
clear: both;
text-align: center;
background: url(bg_pied.png) no-repeat;
width: 700px;
height: auto;
height: 213px;
/*border: 1px solid #CC0000;*/
}
#pied_contenu {
margin-left: auto;
margin-right: auto;
padding-top: 4px;
text-align: center;
}
et voici l'html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>index</title>
<link rel="stylesheet" type="text/css" href="css/montciel.css">
</head>
<body>
<div id='conteneur'>
<div id='banniere'>
</div>
<div id='contenu'>
<p>here is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.<br />
CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.<p>
<div id='liste'>
<ul>
<li><a href='#'>partie 1</a></li>
<li><a href='#'>partie 2</a></li>
<li><a href='#'>partie 3</a></li>
<li><a href='#'>partie 4</a></li>
</ul>
</div>
</div>
<div id='pied'>
<a href="#">Contact</a>
</div>
</div>
</body>
</html>
Merci d'avance à celui qui pourra m'aider
Modifié par SugataSan (22 Aug 2006 - 10:51)