28172 sujets

CSS et mise en forme, CSS3

Menu graphique css

Bonjour à tous,
Je suis un débutant en xhtml/css et j'ai enfin décidé de laisser les tableaux et dreamweaver derrière moi.
Je suis en train de réaliser un site pour une amie, pour cela je me suis servi d'un tuto assez complet sur la fermeduweb.com. j'ai donc commencer par ma maquette psd, découpe, puis codage.
Le rendu est pas mal, cependant je ne sais pas comment m'y prendre pour faire une barre de navigation graphique avec des roll-over, ce qui était enfantin en raisonnant avec des tableaux...,
je vous joins la partie menu que j'ai découpé, je souhaiterais faire un menu horizontal sur la partie en relief...
Merci à tous d'avance pour vos conseils et votre indulgence
A +
Bonjour,

Tu as apparement oublié les fichiers joints.

Ce que tu semble vouloir faire ressemble à la technique des portes coulissantes.

Dans la section "Apprendre" du site il y a quelques tuto orienté création de menu qui pourraient éventuellement t'être utiles.
Merci pour ta réponse si rapide, j'avais déjà vu ces tutos mais je n'arrive pas à les adapter à ce que je veux faire...
Je joins le fichier pour que tu puisse d'avantage imaginer ce que je souhaite faire:
upload/27123-menu.jpg
Je voudrais mettre mes images de survol et lien sur la partie haute de l'image...

Merci d'avance pour ton aide
je voudrais arriver à faire un roll-over avec une étoile qui se supperpose au background de la div. menu un truc du genre pour l'accueil :
upload/27123-menu.jpg
Aidez moi SVP... Je nage la brasse coulée depuis ce matin
Hello sylvain40 et bienvenue,

quand on demande de l'aide il faut toujours donner le code (html et css) permettant de reproduire le problème ou simplement pour montrer à quel endroit on est bloqué.

L'idéal étant bien sûr un lien vers une page en ligne.
Salut heyoan, voilà donc mon pb plus en détail, je rappel que je suis débutant...
En fait mon code html est le suivant:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Deamouv</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" href="design.css" />
	   <link href="styles/monstyle.css" rel="stylesheet" type="text/css" />
   </head>
	<body>
		<div id="conteneur">
		   <div id="header"></div>
		   <div id="menu">
                       <a href='index.html'>Accueil</a> <a href='index.html'>Services</a> <a href='index.html'>Actus</a> <a href='index.html'>Photos</a> <a href='index.html'>Contact</a>                   </div>
		   <div id="corps"></div>
<div id="footer">
                      Nawak Copyright - Tous droits réservés © 2010-2011
                   </div>
		</div>
	</body>
</html>




et pour le css, j'ai ça:



@charset "iso-8859-1";
/* CSS Document */
body
{
	background-color: #fffff;
}

#header
{
   background-image: url("../images/header.jpg");
   width: 876px;
   height: 185px;
}

#menu
{
   background-image: url("../images/menu.jpg");
   width: 876px;
   height: 87px;
   text-align:center;
   font-size: 16px;
   padding-top: 30px;
}

#corps
{
   background-image: url("../images/corps.jpg");
   background-repeat: repeat-y;
   width: 816px;
   padding-left: 30px;
   padding-right: 30px;
   font-size: 14px;
   text-align:justify;
}

#footer
{
   background-image: url("../images/footer.jpg");
   width: 876px;
   height: 81px;
   text-align:center;
   font-size: 12px;
   color:#0000CC;
   padding-top: 20px;
}

#conteneur
{
   margin: auto;
   border: 1px solid blue;
   margin: auto;
   width: 876px;
}
#menu a
{
   color: red;
   text-decoration: none;
   margin-left: 10px;
   margin-right: 10px;
}

#menu a:hover
{
   text-decoration: underline;
}


J'ai enregistré les images correspondant aux boutons de mon menu pour accueil,..., contact, pour les états normaux et survolés au format png pour avoir un effet de transparence et voir ainsi le background de ma div.menu.
Je voudrais les placer en haut de ma div menu de manière horizontale afin que cela corresponde exactement à la barre de mon menu qui n'est qu' une partie de ma div.menu...

J'attends vos conseils, et merci d'avance pour votre aide précieuse
Modifié par sylvain40 (23 Feb 2010 - 11:50)
Hello,

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises [ code] ... ici ton code [ /code] (sans espace après le crochet ouvrant) pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance. Smiley cligne
Désolé d'être un peu boulet, les balises codes insérées, c'est vrai que c'est beaucoup plus lisible, en espérant que cela en inspire certains...
A +
Modifié par sylvain40 (23 Feb 2010 - 11:53)
As-tu jeté un oeil sur le tutoriel que Laurie-Anne a proposé ? Il est bien fait et te permettrait de faire exactement ce que tu veux faire.

Si tu as cependant des questions sur ce tutoriel, tu les formuleras Smiley smile
Sujet clos
Aller à