Besoin d'aide CSS

block, bordure et background

4 novembre 2006 à 1:59:34

Aprés avoir lu le tuto de m@teo (XHTML et CSS), j'ai decidé de refaire mon site entierement (XHTML ET CSS bien sur :P)

J'ai mes menu qui sont présenté comme ca :
Image utilisateur

J'utilisais des tableau pour faire ca avant, mais la j'aimerais le faire en css.
Voila ce à quoi j'arrive pour le moment :
Image utilisateur

Mais quand je veux appliquer une bordure (gauche,droite et bas, je me retrouve confronté à 2 problèmes :
Image utilisateur

1) il faudrait que je puisse ne faire commencer la bordure de mon block seulement à partir de 23px du haut (la hauteur de ma barre en haut)
2) que la bordure ne decalle pas mon image background

Possible ou pas ? une astuce ?

Voila mon code :

<div class="menu_blocs">
<img src="pics/menu_home.png" alt="icone 16x16" />
<h3>Sommaire</h3>
<ul>
<li><a href="index.php?page=news">News</a></li>
<li><a href="index.php?page=support">Forum</a></li>
<li><a href="index.php?page=books">Livres</a></li>
<li><a href="index.php?page=links">Liens</a></li>
<li><a href="index.php?page=contact">Contact</a></li>
<li><a href="index.php?page=search">Rechercher</a></li>
<li><a href="index.php?page=banners">Bannières</a></li>
</ul>
</div>

et le css qui va avec :

.menu_blocs {
margin-bottom: 10px;
background-image: url("pics/menu_top.png");
background-repeat: no-repeat;
border: 1px solid #B9B9B9;
border-top: 0px;
}
.menu_blocs p {
text-indent: 0px;
text-align: center;
}
.menu_blocs img {
float: left;
margin-left: 4px;
margin-top: 4px;
margin-right: 4px;
}
.menu_blocs h3 {
padding-top: 6px;
font-size: 12px;
}

Merci

Steeve

4 novembre 2006 à 9:50:57

Moi je couperais ton image juste en dessous du titre (sur le fond blanc).
Sa te rajoute un bloc.

Je garderais ton div "menu_blocs", et en fait dans ton html il comprendra un div "menu_titre" et un deuxième bloc "menu_fond" à qui tu appliques ton border.

En fait faut revoir ton agencement

.menu_blocs {
margin-bottom: 10px;
border-top: 0px;
}

.menu_titre {
background-image: url("pics/menu_titre.png");
background-repeat: no-repeat;
margin-bottom: 10px;
border-top: 0px;
float: left;
}

.menu_fond {
background-image: url("pics/menu_fond.png");
background-repeat: repeat;
margin-bottom: 10px;
border-top: 0px;
float: left;
}

Ton image menu_ fond tu peux carrement la réduire, vu que c est juste une couleur unie, tu gagnes en chargement et le repeat fera le reste.
Ton menu avec tes liens tu le mettras dans ton div "menu fond".

<div class="menu_blocs">
<div class="menu_titre"></div>
<div class="menu_fond">
<h3>Sommaire</h3>
<ul>
<li><a href="index.php?page=news">News</a></li>
<li><a href="index.php?page=support">Forum</a></li>
<li><a href="index.php?page=books">Livres</a></li>
<li><a href="index.php?page=links">Liens</a></li>
<li><a href="index.php?page=contact">Contact</a></li>
<li><a href="index.php?page=search">Rechercher</a></li>
<li><a href="index.php?page=banners">Bannières</a></li>
</ul>
</div>
</div>

Y a certainement d autres solutions.

der_shadow

4 novembre 2006 à 12:30:40

Je penses à la même chose que steeve

Danyz

4 novembre 2006 à 19:15:03

Thx

Je pense que c'est pas mal comme ca en effet, je vais faire des tests ce soir, merci

Besoin d'aide CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Besoin d'aide CSS

block, bordure et background

Besoin d'aide CSS

Supprimer

Modérer

Signaler le message aux modérateurs