Forum d'aide création graphique / [Résolu] Menu CSS

charlie101097 · 31-07-2010 19:39:01

Bonjour, je souhaite créer un menu avec des bouton qui changent de couleur au passage du curseur. De plus je souhaite que le texte de bouge pas, et que seulement une nouvelle image apparaisse (pour faire le changement de couleur).
Mon problème est que je n'arrive pas placer ces boutons lumineux sur ceux dessinés sur le header, et quand j'y arrive un autre problème qui fait que quand le curseur passe sur 'Accueil' par exemple et bien les autres menu après se déplaces...
Je ne sais pas si je me suis bien exprimé. Mais j'espère que vous pourrez m'aider.

CSS :

Si vous pouvez m'aider, je vous en serais reconnaissant

[Edit] : Au lieu de créer un autre post je vais éditer celui-là smile

Alors, le site est composé de header, corp, corp1 et footer.
Le texte se pose entre header et footer.
Cependant, j'ai un autre problème qui me turlupine : le texte ne passe pas sur le corp 2 (soit il le déplace, soit il passe dessous ou bien même il passe dessus mais dans mise en page)
De plus il semble que ce corp2 bouge et passe sous le header...
J'ai essayé de déplacer le <div id="content2"></div> sans résultat probant. Alors je me tourne une seconde fois vers vous smile

J'espère que vous pourrez m'aider, merci d'avance smile

Dernière modification par charlie101097 (07-10-2010 22:51:43)

charlie101097 · 03-08-2010 01:15:26

Personne ne saurait m'aider pour mes problèmes ? :s

charlie101097 · 04-08-2010 17:00:56

Bonjour,
J'ai remis le <div id="content2"></div> et le menu avec les boutons.
J'ai tenté plusieurs solutions mais toujours sans succès pour le content2. Pour le menu, quand j'essaie de modifier un peu les marges ça se décale trop.
Mon objectif est que le content2 reste collé au footer et se déplace en fonction du footer tout en ayant de texte dessus. Pour le texte j'ai réussi mais j'arrive pas a le coller au footer.
Pour le menu j'essai que lorsqu'on passe la souris dessus un menu, juste l'image du bouton s'ajoute et que le texte ne bouge pas.

J'essaie toujours de chercher des solutions, mais de l'aide n'est vraiment pas de refus big_smile

Voici mon CSS

Code:

body {
    background: #fef5e4;
    font: normal 80% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: black;
    margin: 0;
    padding: 0 0 0 0;
    text-align: center;
}

#site {
    margin:0 auto;
    width: 1000px;
}

/* ------------------------------------ */
/*               Header                 */
/* ------------------------------------ */


#header {
    position: relative;
    width: 1000px;
    height: 181px;
    background: url(images/header.jpg) left top no-repeat;
    margin: 0 auto;
}

#barre-infos {
    height: 23px;
    width: 267px;
    background: url(images/barre-infos.jpg) left top no-repeat;
    color: #bfbfbf;
    float: right;
    padding: 2px 12px 0 60px;
    text-align: left;
    font-size: 0.9em;
}

#barre-infos p {
    margin: 0;
    padding: 0;
}

#barre-infos a {
    color: #bfbfbf;
}

#menuh {
    position: absolute;
    top: 134px;
    left: 2px;
    text-align: left;
}

#menuh ul li {
    float: left;
    margin-right: 0px;
    list-style: none;
    width: 110px;
    text-align: center;
    margin-right: 11px;
}

#menuh li a {
    color: #FFF;
    padding: 0 0 0 0px;
}

#menuh li a:hover {
    font-weight: bold;
}


/*Menu horizontal*/
#menu   {margin-left:1px; padding-top: 1px; height:0px; text-align: left;}
#menu ul        {padding : 1px; list-style : none;text-align : center; font-size: 7pt; margin-left:24px;}
#menu a                {display : block; height:30px; width:100px; color: #FFF;text-decoration : none;line-height: 30px; font-weight: bold; margin-right: 12.5px;}
#menu li               {float : left; margin-top: 130px; padding-right: 0px; margin-left: 11px; }
#menu a:hover          {background: url(images/menu_hover.png);width: 111px; margin-right:1px;}


/* ------------------------------------ */
/*               Content                */
/* ------------------------------------ */

#content {
    background: url(images/corp.jpg) left top no-repeat;   
    text-align: left;
    width: 1000px;
    height: 320px;
    margin: 0 auto;
    padding-top: 0px;
    z-index: 1;
}
    
#content2 {
    background: url(images/corp2.png) left top no-repeat;   
    text-align: left;
    width: 1000px;
    height: 320px;
    margin: 0 auto;
    padding-top: 0px;
    z-index: 2;
    
}

#left {
    float: left;
    width: 703px;
    
}

#left-p {
    padding: 0px 20px 0 41px;
}

h2 {
    margin: 1.6em 0 1.1em 0;
    font-weight: bold;
    font-size: 1.5em;
    color: #79a004;
}

#right {
    float: left;
    width: 297px;
}

#right-p {
    padding-left: 19px;
}

#right h3 {
    margin: 1.6em 0 1.1em 0;
    font-weight: bold;
    font-size: 1.3em;
    color: #79a004;
}

.rss {
    height: 70px;
    width: 258px;
    background: url(images/right-rss.jpg) left top no-repeat;
    margin: 10px 0 10px 0;      
}

.rss p {
    font-weight: bold;
    color: #e55300;
    margin: 0;
    padding: 20px 60px 0 18px;
}

.rubrique {
    background: url(images/rubrique-bg.jpg) repeat-y;
}

.rubrique-top {
    height: 12px;
    background: url(images/rubrique-top.jpg) no-repeat;
}

.rubrique-bottom {
    height: 12px;
    background: url(images/rubrique-bottom.jpg) no-repeat;
}

.rubrique-content {
    padding: 5px 0 5px 20px;
}

.rubrique ul {
    margin: 0px;
    padding: 0;
}

.rubrique li {
    list-style: none;
    color: #836b61;
    margin-bottom: 5px;
}

.rubrique li a {
    color: #836b61;
}


/* ------------------------------------ */
/*               Footer                 */
/* ------------------------------------ */






#footer {
    background: url(images/footer3.png) left top no-repeat;
    height:168px;
    margin-top:0px ;
    padding-top: 0px;
    z-index:3;
    
    
    
    
    
}

#footer-inner {
    margin:0 auto;
    width: 1000px;
    padding: 15px 0 0 62px;
    color: #FFF;
    text-align: left;
}

#footer-left {
    float: left;
    width: 400px;
    padding-right: 25px;
    margin-left: 125px;
    padding-top: 3px;
    
}

#footer-left a {
    color: #FFF;
}

#w3c {
    margin: 90px 0 0px 40px;
}

#w3c ul {
    padding: 0px;
}

#w3c ul li {
    float: left;
    list-style: url(images/valide.jpg);
    margin: 14px 45px 0 0;
}

#w3c li a {
    color: #f0d5b3;
    font-weight: bold;
}

#footer-right {
    float: left;
    width: 265px;
    padding-right: 15px;
    padding-top: 0px;
    margin-left: 100px;
}

#footer-right ul {
    list-style: none;
    padding: 0px;
}

#footer-right li {
    width: 225px;
    height: 22px;
    background: url(images/footer-li-bg.png) no-repeat;
    margin-bottom: 3px;
    
}

#footer-right li a {
    padding: 3px 0 0 9px;
    color: #FFF;
}

#footer h3 {
    margin: 0 0 0.8em 0;
    font-weight: bold;
    font-size: 1.3em;
    color: #FFF; 
}



/* ------------------------------------ */

a {
    color: #5b6811;
    text-decoration: none;
}

.clear {
    width: 807px;
    height: 14px;
    margin: 0 auto;
    font-size: 1px;
    clear: both;
}

Dernière modification par charlie101097 (04-08-2010 20:30:53)

charlie101097 · 11-08-2010 12:20:50

J'ai réussi à rapprocher un peu les boutons mais j'ai toujours pas réussi à les placer correctement sad

charlie101097 · 18-08-2010 13:39:05

Bonjour,

Désolé pour cette réponse tardive mais je n'étais pas chez moi smile

Bref, j'ai bien vus que j'abusais des padding et margin, et après ça deviens n'importe quoi tongue

Je vais tester ce code, j'éditerais un re-posterais un message pour dire si ça marche bien smile
Merci pour ton aide en tout cas !

EDIT : J'ai modifié de quelque pixels les marges pour bien y aligner mais ça marche nickel smile
à part IE qui a un léger décalage de 1px environ mais ça ne dérange pas smile

Dernière modification par charlie101097 (18-08-2010 13:56:26)

charlie101097 · 18-08-2010 20:15:14

Re-bonjour,

Quand une chose s'arrange, une autre marche plus tongue Et bien c'est mon cas -_- .
Je viens de découvrir il y a quelques instants une marge créée entre le header et le haut du site. J'ai alors cherché d'où cela provenait.
J'en ai conclu que ça venait du menu. En effet quand j'enlève les <div></div> la marge disparait.

Alors pour le CSS que j'ai un peu modifié ça donne ça :

Code:

#menu ul               {list-style : none;text-align : center; font-size: 7pt}
#menu li               {float : left; margin-top: 141px; }       
#menu a                {display : block; height:30px; width:111px; color: #FFF;text-decoration : none;line-height: 30px; font-weight: bold; margin-right: 10.5px;}
#menu a:hover          {background: url(images/menu_hover.png);width: 111px;}

J'ai tenté de tout modifier, enlever, même modifier les valeurs une par une. Rien à faire.
Ce que je comprends pas c'est que je ne vois pas ce qui cause ces marges alors le seul margin-top n'en créé pas.
Si je trouve le problème moi même j'éditerais le post smile
Je viens de voir que seul IE n'affiche pas de marge.

Alors après avoir refait des testes pour trouver le problème j'en ai conclu que en théorie il ne devrait pas avoir de marge... ce qui est embêtant

Dernière modification par charlie101097 (18-08-2010 20:43:27)

jeje88 · 19-08-2010 14:43:49

Lien mort ....

charlie101097 · 19-08-2010 17:25:33

Bonjour,

Comment ça lien mort ?

pour le css j'ai copié seulement la partie qui pose problème.

Dernière modification par charlie101097 (07-10-2010 22:53:24)

#1 31-07-2010 19:39:01

[Résolu] Menu CSS

#2 03-08-2010 01:15:26

Re: [Résolu] Menu CSS

#3 04-08-2010 17:00:56

Re: [Résolu] Menu CSS

Code:

#4 11-08-2010 12:20:50

Re: [Résolu] Menu CSS

#5 18-08-2010 13:39:05

Re: [Résolu] Menu CSS

#6 18-08-2010 20:15:14

Re: [Résolu] Menu CSS

Code:

#7 19-08-2010 14:43:49

Re: [Résolu] Menu CSS

#8 19-08-2010 17:25:33

Re: [Résolu] Menu CSS

Pied de page des forums