Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Incontournables XHTML / CSS :

Forum Alsacréations : CSS et Standards Web · Salon spécifique aux Tutoriels et articles Alsacréations · Cadre avec images
Rechercher dans le sujet :
Auteur
Towell
# 05 Jul 2008 - 17:00:29
Citer
23 Posts
 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)
^
Florent V.
# 05 Jul 2008 - 17:43:08
Citer
On va manger des chips.
Modérateur
12934 Posts
 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;

}

Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
http://www.covertprestige.net 
^
Towell
# 05 Jul 2008 - 18:36:32
Citer
23 Posts
 Non cela ne fonctionne pas chez moi confus

^
Florent V.
# 05 Jul 2008 - 18:50:37
Citer
On va manger des chips.
Modérateur
12934 Posts
Towell a écrit :
Non cela ne fonctionne pas chez moi 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). cligne
Modifié par Florent V. (05 Jul 2008 - 18:53)
Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
http://www.covertprestige.net 
^
Towell
# 06 Jul 2008 - 11:34:28
Citer
23 Posts
 Pourrais-tu me donner un petit exemple avec une image pour ta solution plus haut stp ?
^
Florent V.
# 06 Jul 2008 - 13:06:31
Citer
On va manger des chips.
Modérateur
12934 Posts
 Quelque chose avec une image comme celle-ci?

upload/2043-tow-fondhau.png

Tu as le code, tu as l'image... si tu n'arrives pas à mettre une page sur pied c'est qu'il faut absolument revoir ou apprendre les bases. cligne
Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
http://www.covertprestige.net 
^
Towell
# 06 Jul 2008 - 14:05:29
Citer
23 Posts
 Oui ok merci c'est bon j'ai réussi cligne

Mon problème venait du "left top;" sur les images.
Merci.
^
Towell
# 06 Jul 2008 - 15:22:30
Citer
23 Posts
 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 ?
^
Towell
# 09 Jul 2008 - 13:05:50
Citer
23 Posts
 Comment faire svp ?
^
Towell
# 24 Jul 2008 - 14:49:35
Citer
23 Posts
 Comment pourrais-je faire un cadre avec contours en fond englobant tous le site entier (sauf bannière) svp ??
^
Prévenir un modérateur
Répondre au sujet
Aller à

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.7.9 © dew
Contacter l'administrateur - 11.3 ms - Charte