Coucou, je bosse sur un nouveau site et la j'ai un bug dans mon css quand je met une taille en % pour avoir un design qui s'étire entre la #navbar & #content il y a par moment un espace ça dépend des résolutions et la largeur content s'agrandit d'1px ...
Par contre si je met ma taille en pixel pour avoir un design fixe le bug disparait !
Mon css est un peu cafouillis car je fait pleins de test !
J'ai essayé en vain par différent moyens, mais je n'arrive pas à le faire correctement ...
Si quelqu'un à l'amabilité de m'aider, un grand merci d'avance !
CSS
HTML
Modifié par Bleeps (23 Apr 2006 - 22:09)
Par contre si je met ma taille en pixel pour avoir un design fixe le bug disparait !
Mon css est un peu cafouillis car je fait pleins de test !
J'ai essayé en vain par différent moyens, mais je n'arrive pas à le faire correctement ...
Si quelqu'un à l'amabilité de m'aider, un grand merci d'avance !
CSS
body
{
font-family:"Trebushet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:70%;
color: #422D1C;
margin: 0px;
background-color: #a0daf5;
background-image: url(../pics/design/pattern_all.png);
background-repeat: repeat;
background-attachment: fixed;
border-left:3px solid #7F6C57;
border-right:3px solid #7F6C57;
height:100%;
}
img {border: none;}
acronym,abbr { cursor: help; }
html
{
border-left:15px solid #422D1C;
border-right:15px solid #422D1C;
height:100%;
}
/* Mise en page */
#container {width:;margin:auto;}
#before_navbar { padding-top:5%;}
#content
{
height:43em;
margin:auto;
text-align:left;
color: #422D1C;
background-color:#BFA383;
border-left:1px solid #7F6C57;
border-right:1px solid #7F6C57;
padding:5px;
}
/* Menu */
#navbar
{
height:1.5em;
margin:auto;
padding-left:5px;
padding-right:5px;
color: #422D1C;
background-color: #a0daf5;
font-weight:700;
font-size: 110%;
letter-spacing:1px;
border:1px solid #7F6C57;
/* Coins arrondis sur Mozilla */
-moz-border-radius: 0px 10px 0px 00px;
}
#navbar ul
{
list-style-type: square ;
margin:0 0 0 0em;
padding:0;
float:left;
}
#navbar li
{
margin:0 0 0 1em;
padding : 0 1em 0 0;
background-color: transparent;
list-style-type: square ;
float:left;
}
#navbar .more { float:right;font-weight:none;}
/* Pied de page */
#footer
{
height:1.5em;
margin:auto;
padding-left:5px;
padding-right:5px;
color: #422D1C;
background-color: #a0daf5;
font-weight:700;
font-size: 110%;
letter-spacing:1px;
border:1px solid #7F6C57;
/* Coins arrondis sur Mozilla */
-moz-border-radius: 0px 0px 0px 10px;
}
#footer ul
{
list-style-type: square ;
margin:0 0 0 0em;
padding:0;
float:left;
}
#footer li
{
margin:0 0 0 1em;
padding : 0 1em 0 0;
background-color: transparent;
list-style-type: square ;
float:left;
}
HTML
<body>
<div id="container">
<div id="before_navbar"></div>
<div id="navbar">
<ul>
<li> <a href="../news/" title="Nouvelles" accesskey="2"> Nouvelles </a></li>
<li> <a href="disco/" title="Discohgraphie">Discographie</a> </li>
<li> <a href="infos/" title="Informations" accesskey="8" ><span class="online" > Informations </span></a></li>
<li> <a href="http://devstude.net/bozoorak/forum/" title="Forums"> Forums </a> </li>
<li> <a href="liens/" title="Liens" > Liens</a></li>
<li> <a href="contact/" accesskey="7">Contact</a> </li>
</ul>
</div> <!-- #navbar -->
<div id="content">
<h1>Informations </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus quam eu risus. Sed vulputate ultricies mi. Aliquam porta. Sed ut libero vel purus pulvinar placerat. Nulla tristique tortor quis tortor. Phasellus euismod luctus mauris. Donec pharetra. Nulla blandit venenatis mi. Vivamus lorem. Maecenas mi ante, pulvinar a, facilisis a, commodo at, tellus. Nam placerat consectetuer lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus quam eu risus. Sed vulputate ultricies mi. Aliquam porta. Sed ut libero vel purus pulvinar placerat. Nulla tristique tortor quis tortor. Phasellus euismod luctus mauris. Donec pharetra. Nulla blandit venenatis mi. Vivamus lorem. Maecenas mi ante, pulvinar a, facilisis a, commodo at, tellus. Nam placerat consectetuer lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus quam eu risus. Sed vulputate ultricies mi. Aliquam porta. Sed ut libero vel purus pulvinar placerat. Nulla tristique tortor quis tortor. Phasellus euismod luctus mauris. Donec pharetra. Nulla blandit venenatis mi. Vivamus lorem. Maecenas mi ante, pulvinar a, facilisis a, commodo at, tellus. Nam placerat consectetuer lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus quam eu risus. Sed vulputate ultricies mi. Aliquam porta. Sed ut libero vel purus pulvinar placerat. Nulla tristique tortor quis tortor. Phasellus euismod luctus mauris. Donec pharetra. Nulla blandit venenatis mi. Vivamus lorem. Maecenas mi ante, pulvinar a, facilisis a, commodo at, tellus. Nam placerat consectetuer lacus.</p>
</div> <!-- #left -->
<div id="footer">
<ul>
<li><a href="../en/" >English</a> </li>
<li><a href="map/" accesskey="3" >Plan du site</a> </li>
<li><acronym lang="en" title="Really Simple Syndication"><a href="../rss/news.xml" >RSS</a></acronym></li>
</ul>
<span class="rightsite"><a href="index.php" accesskey="1"></a> </span>
</div> <!-- #footer -->
</div> <!-- #container -->
Modifié par Bleeps (23 Apr 2006 - 22:09)
