28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Pour le menu, tu crée un bloc <div>, tu met en css pour ce bloc "#menu {display: block;}" ainsi que "img {display: block;}".

Dans la page html:


<img image 1 />
<div="menu">
...
</div>
<img image2  />


C'est tout !
++
Modifié par Chypster (09 Aug 2007 - 16:49)
voici mon code css que j'ai deja fait:
#menu h1
{
        line-height: 25px;
        margin: 0;
        padding-top: 10px;
        padding-left:20px;
        padding-bottom:5px;
        vertical-align: bottom;
        color:#C1C1C1;
        background-color:#FDFDFD;
        background: url('images/menu_haut.jpg') no-repeat;
        border-right:1px solid rgb(200,195,200);
       
}

#menu h1 img {margin-right:5px;}


et coté HTML, en voici le code:
<div id="menu_cours">
<h1>xxxxxxxxxx</h1>
<div class="corps_menu">
<ul>
<li><a href="#.htm">lien1</a></li>
<li><a href="#.htm">lien2</a></li>
<li><a href="#.htm">lien3</a></li>
<li><a href="#.htm">lien4</a></li>
</ul>
</div>
</div>
Chypster a écrit :
Bonjour,

Pour le menu, tu crée un bloc <div>, tu met en css pour ce bloc "#menu {display: block;}" ainsi que "img {display: block;}".

Dans la page html:


<img image 1 />
<div="menu">
...
</div>
<img image2  />


C'est tout !
++


j'ai essayé ce que tu viens de me donner et ça n'a pas marché!
la réponse et la solution de ce problème:
En css:

.boite {
	width: 130px;
	padding-bottom: 10px;
	background:    url(image_centre_bas.png) no-repeat;
	background-position: center bottom;
	font-size: 95%;
}
.boite h2 {
	margin: 0;
	padding: 8px 5px 0px 5px;
	background: transparent url(iamge_haut.png) no-repeat;
	background-position: center top;
	text-align: left;
}
.boite p {
	margin: 1em 20px;
	text-align: justify;
}


ainsi vous aurez un bloc sous forme de cadre compris entre de images.