18041 sujets

Questions générales et questions de débutants

Cadre avec images

Salut tout le monde,

J'ai fais une page web, tout est nickel, il ne me reste maintenant plus qu'à faire les bordures des menus.

Mais je rencontre un petit soucis, j'ai suivis à la lettre ce tuto http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
mais l'effet voulu n'est pas totalement identique...

J'ai bien fais 2 parties comme dans le tuto ci-dessus, mais je ne peux pas écrire autant qu'eux, si j'écris trop il y a un espace entre l'image du haut pour le titre et le bas du menu.
Assez embêtant donc, et si je fais une grande image "menu-bas" comme dans le tuto, ça vient se mettre tout en haut sur l'image du haut.

Image; http://img368.imageshack.us/my.php?image=sanstitrela4.jpg

Mon code XHTML:

<div id="menu_gauche">

        <div class="boite_g">                           	               
				<h6>Titre menu</h6>
				
               <ul>
                   <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
				                      <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
				                      <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
               </ul>
			   			   
            </div>


Mon code CSS:

#menu_gauche
{
    float: left; /* Le menu flottera à gauche */
    width: 156px; /* Très important : donner une taille au menu */
    position: relative; z-index: 2;
}

.boite_g{
	width: 156px;
	margin-left: 10px;
	padding-bottom: 10px;
	background: url(images/m-b.png) no-repeat;
	background-position: center bottom;
	margin-top: 40px;
}

.boite_g h6 {
	margin: 0;
	padding: 10px 20px 5px 20px;
	background: transparent url(images/h.png) no-repeat;
	background-position: center top;
	text-align: center;
}

.boite_g p {
	margin: 1em 5px;
	text-align: justify;
}


Auriez-vous la solution à mon problème ?
Modifié par Towell (05 Jul 2008 - 17:21)
Bonjour,

Tu fais une image unique suffisament haute (genre 1000 ou 1500px pour avoir de la marge), qui comprendra aussi bien le dessin du haut (en haut) que celui de bas (en bas) et une grande partie centrale (au centre).

Ensuite, tu travailles avec un code HTML de ce type:
<div class="box">
	<div class="boxheader">
		<!-- Ici mon titre ou éventuellement rien du tout -->
	</div>
	<div class="boxcontent">
		<!-- Ici le contenu de mon bloc -->
	</div><
</div><!-- .box -->

Et côté CSS:
.box {
	width: ...; /* la largeur de ton image */
}
.boxheader {
	min-height: 10px;
	padding: 1px 0;
	background: url(box-bg.png) no-repeat left top;
}
.boxcontent {
	min-height: 10px;
	padding: 1px 0;
	background: url(box-bg.png) no-repeat left bottom;
}
Towell a écrit :
Non cela ne fonctionne pas chez moi Smiley confus

Voilà une réponse qui nous aide beaucoup à t'aider...

Peut-on voir le test que tu as effectué pour appliquer cette solution? Avec une page en ligne.

Autre sujet: le choix d'un H6 pour ton titre est erroné. Tu as à priori besoin d'un H2 ou peut-être d'un H3. Si cela te semble problématique, alors il te manque quelques connaissances de base en HTML (Les titres : les éléments H1, H2, H3, H4, H5 et H6) et CSS (notamment la propriété font-size). Smiley cligne
Modifié par Florent V. (05 Jul 2008 - 18:53)
Oui ok merci c'est bon j'ai réussi Smiley cligne

Mon problème venait du "left top;" sur les images.
Merci.
Une dernière petite chose;

Sur le screen de mon 1er message, il y a derrière le contenu de la page une texture, j'aimerais en fait faire un cadre comme pour la bannière qui englobe toute la page, même les menus etc.

Comment faire, peut-être en prenant exemple sur le cadre des menus pour y faire ?
Comment pourrais-je faire un cadre avec contours en fond englobant tous le site entier (sauf bannière) svp ??
Sujet clos
Aller à