Bonjour et merci à celui qui portera un intérêt à mon post.
Voila je tente de faire un design web que j'ai moi même crée. J'ai crée un menu avec un effet réalisé grâce à la technique des sprites/css.
En dessous du menu j'ai placé une image arrondi qui va servir aux contenus. Je l'ai intégré grâce à CSS, ce que j'aimerai savoir c'est si la manière à laquelle j'ai intégré ce bout d'image pour donner un effet arrondi à mon contenu est bien fait, ou alors il y a plus simple ?
Merci.
Voici le code html + css dans une même page. En pièce jointe je mets les fichier crées.
Modifié par mln95400 (24 Jun 2012 - 18:31)
Voila je tente de faire un design web que j'ai moi même crée. J'ai crée un menu avec un effet réalisé grâce à la technique des sprites/css.
En dessous du menu j'ai placé une image arrondi qui va servir aux contenus. Je l'ai intégré grâce à CSS, ce que j'aimerai savoir c'est si la manière à laquelle j'ai intégré ce bout d'image pour donner un effet arrondi à mon contenu est bien fait, ou alors il y a plus simple ?
Merci.
Voici le code html + css dans une même page. En pièce jointe je mets les fichier crées.
<body>
<div id="conteneur">
<div id="entete">
</div><!-- entete -->
<div id="menu">
<ul>
<li><a href="" class="btn1"><span></span></a></li>
<li><a href="" class="btn2"><span></span></a></li>
<li><a href="" class="btn3"><span></span></a></li>
<li><a href="" class="btn4"><span></span></a></li>
</ul>
</div><!-- Menu -->
<div id="contenu">
fgdfgdfgfdgfgfdgd
</div><!-- Contenu -->
</div><!-- Conteneur -->
</body>
body{
background-image: url(bgbg.png);
}
#conteneur{
width: 550px;
margin: 0 auto;
}
#entete{
background-image: url(entete.png);
background-repeat: no-repeat;
height: 37px;
margin: 20px 0 40px 0;
}
#menu{
overflow:hidden;
}
#menu ul{
margin: 0;
padding: 0;
}
#menu ul li{
list-style: none;
float: left;
margin: 0 10px 0 0;
}
#menu ul li a{
text-decoration: none;
height: 42px;
width: 127px;
color: #FFFFFF;
font-family: ar berkley;
line-height: 36px;
font-size: 24px;
text-align: center;
display: block;
}
#menu ul li a.btn1{
background-image: url(btn1sprite.png);
}
#menu ul li a.btn2{
background-image: url(btn2sprite.png);
}
#menu ul li a.btn3{
background-image: url(btn3sprite.png);
}
#menu ul li a.btn4{
background-image: url(btn4sprite.png);
}
#menu ul li a:hover{
background-position: bottom;
}
#contenu{
background-color: #FFFFFF;
position: relative;
bottom: 6px;
right: 5px;
border-radius: 10px;
padding: 0 10px;
}
Modifié par mln95400 (24 Jun 2012 - 18:31)