Comment réaliser un menu comme celui-ci ?

SVP

Sujet résolu

2 septembre 2006 à 0:01:46

Bonjour,

Voilà je suis en train de suivre le tutorial pour faire son site et je ne comprends pas comment réaliser un menu comme celui-ci ----> http://www.csszengarden.com/?cssfile=192/192.css
Je ne sais pas trop ! je pense qu'il y a une image en haut et en bas puis une autre image au milieu qui se répète, nan ? j'ai pensé un moment qu'il y avait trois block mais si on regarde bien le texte passe dessus l'image du haut alors je me dis que si il y avait trois block ça ne serait pas possible, enfin j'en sais rien je débute moi

HyperOs

2 septembre 2006 à 0:17:12

Bon voilà :

1. block avec une image en fond :
Image utilisateur

2. block avec une image qui se repette :
Image utilisateur

3. comme 1
4. comme 2

Pour les "Select a design" et "Archives" se sont des gif inseré avec le code :

HyperOs.

Toubo

2 septembre 2006 à 12:22:01

Ah c'est super gentil pour la réponse aussi bien détaillée

Donc même pour l'image du bas du menu c'est un autre block ? Mais ce ke je ne comprends pas c'est que dans ce menu-ci, si le premier block est une image et ke le texte est dans le 2eme block comment ca se fait que l'on voit ke le texte passe dessus l'image du premier block ? J'espère être clair

Merci J'aurais d'autres questions mais j'attends un peu hihi

HyperOs

2 septembre 2006 à 12:55:46

Au fait j'ai revu et il y'a que trois block :
le premier :
Image utilisateur

le deuxiemen :
Image utilisateur

et le troisieme :
Image utilisateur

sinon je vois pas de quel texte tu parles ? y'a pas de text sur la premier image y'a une gif, et si il voulait en mettre il pouvait bien parceque l'image et un fond.

Toubo

2 septembre 2006 à 17:02:03

Okay, bein je parle de la liste à puce du menu là où c'est marqué "dazzling beauty by..." c'est phrase là passe dessus l'image que tu indique être en block 1 ? Tu vois ce que je veux dire ?

Skit

2 septembre 2006 à 17:23:45

c'est simplement qu'il a du insérer l'image en la positionnant par dessus le texte parce que j'imagine que ça buggait un peu son affichage sinon?

Toubo

2 septembre 2006 à 17:53:00

Par dessus le texte ? :s

Skit

2 septembre 2006 à 17:55:41

vi
peut-être avec un z-index
enfin je ne sais pas trop mais c'est son bidouillage qui doit être imparfait car s'il avait bien travaillé l'image du fond ne mangerait pas un peu la place du texte

Toubo

2 septembre 2006 à 20:14:20

Bon okay je n'ai pas tout compris, mais je vais me débrouiller et je vous montrerez le résultat...un jour....j'espère ! lol

Merci à tous

HyperOs

2 septembre 2006 à 21:13:33

Skit tu penses que c'est un bug ? bah non aparament c'est voulu alors tout simplement moi je crois que "dazzling beauty by..." et inseré dans le block 1 et le reste dans le block 2 (j'ai pas vu le code source)

Skit

2 septembre 2006 à 23:05:58

tu penses que le fait que "archives" mord en partie sur le texte est voulu? ça m'étonnerait franchement o_O

HyperOs

3 septembre 2006 à 1:38:38

Non je parle du test en haut, et chez moi archive est gentille elle mort personne t'es sous quel navigateur ?

Toubo

3 septembre 2006 à 10:48:05

Bonjour,
alors voilà j'ai essayer de faire avec ce model.
J'ai fais 3 block :
- 1 pour une image fix comme en tête ;
- 2 pour le texte avec une image en background qui se répète ;
- 3 pour une image fixe comme pied ;

Le probleme c'est que mes 3 block ne s'attachent pas entre eux, il y a un espace de chaque côtés du block 2, je pense que le problème viens de lui. Sur aucun de ces trois block je n'ai mis de marge, je ne comprends pas c'est tout pourri

HELPPPPP !

HyperOs

3 septembre 2006 à 12:15:24

Penses aussi à mettre 1er un block menu qui contien les 3 block genre tu veux déplacer le menu tu déplace tout à la fois, et pour l'espace met des margins:0px; et padding:0px; .

Toubo

3 septembre 2006 à 13:26:58

Merci mais ca ne fonctionne pas :s pour le block qui entoure les 3 block je l'avais fait parcontre

Skit

3 septembre 2006 à 16:33:49

défini dans le block principal qui reprend les 3 un width strictement équivalent à la taille de tes blocs; si ça ne marche toujours pas alors un max-width
et enlève tous les paddings et margins de tes sous-blocks

Toubo

3 septembre 2006 à 21:34:38

Bon pour le menu j'ai reussi, je ne sais pas comment mais ca tient :s lol Mais j'ai encore plein de problemes dont je ne trouve pas la solution, j'ai tout retourné dans tout les sens ça devrait marcher mais nan

Est ce que l'un de vous pourrais m'aider hors ligne ? sur msn ca serait abuser ? hihi Surtout que c'est tout con ce que je veux faire ! HELP ME Pleaseeeeeeeee

Skit

3 septembre 2006 à 23:04:40

expose ça ici

Anacondange

4 septembre 2006 à 8:05:31

Oué il y a beaucoup plus d'intérêt à exposer ton problème ici

car le problème que tu rencontre là c'est des questions que beaucoups de zéro se posent ! D'ailleurs il y a quelque mois j'aurais été ravi de trouver ce post >_<

mais maintenant j'ai compris comment ça marché ! Il faudrait d'ailleur faire un tuo des zéros pour ce problème car bien que le cours de m@téo soit très complet, il oublie ou évite de compliquer un peu le design... Donc si j'ai le temps je ferai un tuto pour ce genre de menu

Sâche qu'un bloc possède toujours une marge (petite certes mais non négligeable pour ce genre de traveaux) et que tant que tu ne lui indique pas de margin:0; et au besoin un padding:0; cette marge est toujours éxistante

!
Bon c'était mon dernier message sur ce forum en mode VACANCE ! Now c'est la rentrée donc je souhaite bonne chance à tout le monde pour la reprise des cours (et pour moi aussi >_<

)!
NeB

Toubo

4 septembre 2006 à 9:51:50

Bon me revoilou !

Alors tout dabord la structure de mon site pour que vous compreniez ce que je cherche a faire

Ensuite voilà mon premier probleme entre Firefox et Internet explorer :s :

Image utilisateur

Et j'ai un autre de drôle de probleme en fait, ca vient peut être de cà, c'est que lorsque je regarde l'apercu de mon site dans Dreamweaver, il y a un probleme dans le block "CORPS" ! Ca depasse !!!! et pourtant j'ai mis les bonnes dimensions

Voilà j'espère être assez clair ? Merci à vous

J'ai mis un peu de temps à répondre car j'essai de trouver les solution moi même mais là je bloque

j'ai quand même résolu quelques problèmes dont je ne suis pas peu fière

Anacondange

4 septembre 2006 à 19:33:09

Peux tu nous montrer dans ton html et css ? A premiere vu ça ressemble à un float left que t'as pas appliqué :s
Enfin envoi les source qu'on puisse voir

(en tout cas ça donne bien sous FF

)

Toubo

4 septembre 2006 à 19:36:45

Heu comment je fais je copie et je colle ici ? :s

Anacondange

4 septembre 2006 à 19:43:05

Tu copies le html d'abord tu ouvre des balises codes que tu peux voir en haut à gauche, tu selectionne le code que tu veux ici le xhtml, ensuite tu renouvelle l'opération pour le css

Good luck

Toubo

4 septembre 2006 à 19:55:30

Heu voilà encore merci, je sens que je vais me taper la honte soyez gentil c'est mon tout premier

</div>

<div class="menu">
<div class="en_tete_menu">

</div>

<div class="corps_menu">
<ul>
<li><a href="index.html" title="Introduction">Intro</a></li>
<li><a href="xhtml/nouvelles.html" title="News">Nouvelles</a></li>
<li><a href="xhtml/dates.html" title="Dates de concerts">Sur la route</a></li>
<li><a href="xhtml/histoire.html" title="Biographie">L'histoire</a></li>
<li><a href="xhtml/recreation.html" title="Musiques et videos">Récréation</a></li>
<li><a href="xhtml/images.html" title="Photos et illustrations">Images</a></li>
<li><a href="xhtml/ailleurs.html" title="Liens">Ailleurs</a></li>
<li><a href="xhtml/shop.html"title="Pour se procurer l'album !">shop</a></li>
<li><a href="xhtml/contacts.html"title="Où nous joindre">Contacts</a></li>
</ul>
</div>

<div class="pied_menu">

</div>
</div>

<div class="corps">
<h3 class="centre">Introduction</h3>
<p class="centre">
La vie est une absurdité remplie de fous aux visages défigurés par le temps...<br />
Mon refuge est un arbre, un ruisseau, un oiseau...<br />
Il est en chacun de nous une endroit où l'on conjure le sort...<br />
Ici est le mien...
</p>
</div>

<div class="pied_de_page">
<img src="general/pied_index.jpg" alt="pied_de_page"/>
</div>

</body>
</html>

body
{
width: 602px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
background-image: url("../general/fond3.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
}

.en_tete
{
padding: 0px;
width: 480px;
height: 263px;
}

.menu
{
height: 97px;
width: 120px;
float: right;
}

.en_tete_menu
{
background-image: url("../general/menu_top.jpg");
height: 81px;
width: 120px;
background-repeat: no-repeat;
margin : 0px;
padding : 0px;
}

.corps_menu
{
background-image: url("../general/menu_center.jpg");
background-repeat: repeat-y;
margin : 0px;
padding : 0px;
width: 120px;
}

.pied_menu
{
background-image: url("../general/menu_bottom.jpg");
height: 15px;
width: 120px;
background-repeat: no-repeat;
margin : 0px;
padding : 0px;
}

.corps_menu ul
{
font-size: 75%;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
list-style-image: url("../general/puce.gif");
padding: 0px;
padding-left: 29px;
margin: 0px;
}

.corps
{

width: 480px;
color: #000000;
background-image: url("../general/motif3.jpg");
background-repeat: repeat-y; /* Une petite image de fond qui se répètera horizontalement en haut */
margin : 0px;
padding : 20px;

}

p
{
font-size: 0.7em;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
}

a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
color: #3399ff; /* Le lien sera écrit en vert quand on pointera dessus */
}

a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: #dd9f54;
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
}

.centre
{
width: 440px;
padding: 0px;
margin: 0px;
text-align: center;
}
.pied_de_page
{
width: 480px;
margin : 0px;
padding : 0px;
}

Lpu8er

4 septembre 2006 à 20:01:09

Non, c'est juste visible que tu utilises un logiciel

Pour le menu, ne suffit-il pas d'étirer l'image en hauteur en conséquence, plutôt que de la répéter ?
Le résultat est le même mais le moyen est différent (xHTML ou CSS).

Toubo

4 septembre 2006 à 20:04:41

Bein je ne sais pas moi