Espace inexpliqué

Sujet résolu

25 décembre 2005 à 21:24:04

Bonjour,

J'ai des espaces inexpliqué dans mon site
url : http://www.hlmod.net/hlmod/lire_mod.php?id=7
je comprend vraiment pas car dans le code source ya rien

scaler

25 décembre 2005 à 21:44:44

'Soir,

Tu utilises trop de div et ton codage n'est pas assez propre. Pour un menu, la base pourrait être :

<div class="menu">
<h2>titre du menu</h2>
<ul>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
</ul>
</div>

.menu
{
float: left; (ou right);
width: XXpx;
background: url(images/bas_menu.jpg) no-repeat bottom;
padding-bottom: XXpx; /* hauteur de l'image du bas du menu */
}

.menu h2
{
height: XXpx; /*hauteur de l'image du titre du menu*/
background: url(images/titre_menu.jpg) no-repeat;
margin: 0;
padding: 0;
/* font-size: XXem; */
}

.menu ul
{
margin: 0;
padding: 0;
background: url(image/fond_menu) repeat-y;
padding-top: 10px;
padding-bottom: 10px;
}

.menu li
{
margin-left: XXpx; /* ou text-indent selon les cas */
}

bon courage.

gcyrillus

25 décembre 2005 à 23:46:12

bonjour,
ton espace vient du fait que tu utilise en test un clear:both; qui vient tout simplement se placer sous le dernier flottant le plus long, la c'est ton menu.
2 solutions:placer le menu en

position :absolute;

pour le sortir du flux et le cacher au "clear;"
... ou ne pas donner de hauteur a ton div.navigation et lui applique un

overflow:auto;

En optant pour la seconde soluce ton css pour .navigation deviendrais :

.navigation {
text-align: justify;
padding: 10px;
color: white;
margin: -50px 0 0 208px;
width: 594px;
overflow:auto;/* les element contenu et avec un clear ne devraient plus prendre en consideration les flottants exterieurs */
}

et pour les contenu de .navigation:(pour info)je les verrai plutot comme ça:

.haut_navigation {
background-image: url(./images/navigation.jpg);
background-repeat: no-repeat;
text-align: center;
height: 2em;
width: 593px;
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
}
.center_navigation {
background-image: url(./images/center_navigation.jpg);
background-repeat: repeat;
width: 573px;
padding: 10px;
}

a plus, bonne année a tous ( ...et a l'année prochaine !)

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Sadenki

26 décembre 2005 à 15:27:24

Merci à toi aussi