test Problème webdesign - Graphisme, pub, photo, architecture, vidéo... - Communauté JDG Network - Forum internet

Aller au contenu


Photo

Problème webdesign

Débuté par dmw307 , jun 02 2011 10:45

  • Veuillez vous connecter pour répondre
6 réponses à ce sujet

#1 dmw307

dmw307

    Habitué du JDG

  • Members
  • PipPip
  • 20 messages

Posté 02 juin 2011 - 10:45

Bonjour,
voilà ce que je veux réaliser en HTML et CSS :http://img40.imageshack.us/f/forum01.png/
J'ai fais ça sous photoshop, mais maintenant il faut que ça devienne concret.
En fait, je ne vois pas du tout comment m'y prendre ...
Sachant que la typo "s’illumine" quand la souris passe dessus, sauf pour "Catalogue" où c'est le menu déroulantqui apparaît. Pour le menu déroulant, c'est un fond rouge qui prends place quand la souris se ballade dedans.
Je ne sais pas si il faut que je découpe ma barre, ou si je la prends en un seul morceau, etc.
Un des autres soucis que je rencontre : l'image que j'utilise pour ma barre de menu se situe tout en haut de la page, centrée. Le problème est qu'il reste quelques mm pour qu'elle soit réellement en haut, et là je ne vois pas comment faire ...
Pourriez-vous me guider svp ?
 
Merci d'avance pour votre aide :)

#2 3rr0r404

3rr0r404

    Inconditionnel du JDG

  • Members
  • PipPipPip
  • 526 messages

Posté 02 juin 2011 - 10:45

Petit message extrêmement rapide pour te mettre sur la voie :
Recherche sur Google "menu horizontal déroulant", la plupart seront en Javascript et tu devrais trouver ton bonheur.
Par exemple là : http://css.developpez.com/galerie/ ou là : http://css.developpez.com/tutoriels/menu-deroulant/
 
Par dessus il te faudra un peu de CSS avec des mouseHover (par exemple) associés a des changements d'images/de background-color.
 
Petit conseil : découpe ta barre pour pouvoir avoir des rendus différents selon la section (menu déroulant ou changement de couleur).
 
Pour ton histoire de décalage je penses que "jouer" avec les propriétés "padding" (top, right, left, bottom) devrait là encore résoudre ton problème.
 
J'espère t'avoir au moins mis sur la voie ;)

#3 dmw307

dmw307

    Habitué du JDG

  • Members
  • PipPip
  • 20 messages

Posté 02 juin 2011 - 10:45

Merci pour ta réponse, je vais voir ce que ça donne.
 
Sinon voilà ce que j'ai actuellement :
http://img20.imagesh...f/forum02k.png/
En fait, j'arrive pas à faire en sorte que le sous menu reste blanc, ni que le fond de catégorie soit gris comme le sous menu, et encore moins à mettre le rouge de ma première image ...
Encore merci pour ton aide :D
N.B : Je te met le code, car je ne comprends pas pourquoi la fin de mon css "n'est pas pris en compte" ...
HTML :
http://img40.imagesh.../htmly.png/     (car le forum interprête mon code ^^)
CSS :
@charset "iso-8859-1";/* CSS Document */
body{    width:100%;    height:100%;    background-image: url(background.png);}
#mainmenu {     width:940px;     height:42px;     background:url(mainmenu_bg.png)     no-repeat 0 0;     margin:-7px auto;}
#mainmenu ul {    margin:0;     padding:0;     list-style-type:none;     text-align:center;    font-size:16px;    font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif; }
#mainmenu li a {     display:block;     width:170px;     color:white;    text-decoration:none;    padding:7px;}
#mainmenu li {    float:left;    margin:auto;    padding:0;}
/* Quand souris passe sur "catalogue" */#mainmenu ul li:hover ul {     display:block;    background:url(gris.png);    opacity:1;}
/* Sous menu vertical */#mainmenu ul li ul {     display:none;    font-size:12px;    text-align:center;    position:absolute;    }
#mainmenu li:hover ul li {     float:none;}
#mainmenu li a:hover {    color:#666;}
/* Pour que le sous menu reste blanc, mais ne fonctionne pas ... */#mainmenu li a ul li a:hover {    color:#FFF;    background:url(rouge.png);}
 
 
 

#4 dmw307

dmw307

    Habitué du JDG

  • Members
  • PipPip
  • 20 messages

Posté 02 juin 2011 - 10:45

J'y suis presque !! Là où je veux du rouge, j'ai du gris sur du gris ^^
http://img818.images.../f/forum03.png/
Voici le HTML :
http://img819.images...s/f/html03.png/
 
Et le CSS :
@charset "iso-8859-1";/* CSS Document */
body{    width:100%;    height:100%;    background-image: url(background.png);}
#mainmenu {     width:940px;     height:35px;     background:url(mainmenu_bg.png)     no-repeat 0 0;     margin:-7px auto;}
#mainmenu ul {    margin:0;     padding:0;     list-style-type:none;     text-align:center;    font-size:16px;    font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif; }
#mainmenu li a {     display:block;     width:170px;     color:white;    text-decoration:none;    padding:7px;}
#mainmenu li {    float:left;    margin:auto;    padding:0;}
/* Quand souris passe sur "catalogue" */#catalogue li:hover {     background:url(gris.png);}
#catalogue li:hover ul {     display:block;    background:url(gris.png);}
/* Sous menu vertical */#mainmenu ul li ul {     display:none;    font-size:12px;    text-align:center;    position:absolute;}
#mainmenu li:hover ul li {     float:none;}
/* Tout les item sauf le 2eme en gris si passage souris */#accueil li a:hover {    color:#666;}
#reste li a:hover {    color:#666;}

#5 3rr0r404

3rr0r404

    Inconditionnel du JDG

  • Members
  • PipPipPip
  • 526 messages

Posté 02 juin 2011 - 10:45

Heu tu n'aurais pas un espace en ligne pour que l'on puisse tester ?
Ce serait plus pratique...
 
Tu connais peut être déjà mais n'hésite pas à te servir d'outils comme "Web Developer" et "Firebug" qui te permettent de modifier ton css à la volée et de localiser quel partie de code est impactée par quel élément...

#6 dmw307

dmw307

    Habitué du JDG

  • Members
  • PipPip
  • 20 messages

Posté 02 juin 2011 - 10:45

tout ce que je peux faire, c'est te donner mon msn ou skype ...

#7 ciib

ciib

    Habitué du JDG

  • Members
  • PipPip
  • 21 messages

Posté 02 juin 2011 - 10:45

Salut,
 
Pareil que 3rr, met le en ligne, sa nous aidera beacoup !
Retourner dans Graphisme, pub, photo, architecture, vidéo...



Similar Topics Collapse

  Sujet Forum Commencé par Statistiques Infos sur le dernier message

0 utilisateur(s) li(sen)t ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)

  1. Communauté JDG Network - Forum internet
  2. → Journal Graphic
  3. → Graphisme, pub, photo, architecture, vidéo...