probleme feuille de style

dementia · probleme feuille de style

bonjours a tous,
Tout d'abord, je vous souhaite a tous et toutes une excellente année 2010 !
passons aux choses sérieuse :)
Je suis actuellement en train de faire un site dans le cadre d'un stage pour mon lycée... seul probleme, je ne suis pas vraiment une lumiere en css, et meme si j'arrive a me débrouiller avec les choses disons basiques, le reste est pour moi assez problématique...

Ainsi je viens vous demander de l'aide : je m'explique.

J'ai commencé mon site, et ça avance plus ou moins bien, j'ai fait une "barre de menu" pour naviguer dans le site, mais j'en ai trouvé une mieux, le seul probleme est que le css de ce menus, est inséré dans la page html, et que mon css à moi, est sur une feuille de style externe... et je dois avouer que je nage vraiment pour le coup...

Ceci est le code que je souhaite insérer :

.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu2 li {float:left;}
.menu2 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu2 li.current a {color:#fff; background:url(button3.gif);}
.menu2 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu2 li a:hover {color:#fff; background:#000 url(button4.gif);}
.menu2 li a:hover b {background:url(button4.gif) no-repeat right top;}
.menu2 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu2 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

</style>
</head>

<body>

<ul class="menu2">
<li><a href="#nogo">Acceuil</a></li>
<li><a href="#nogo">Support / Medias</a></li>
<li><a href="#nogo">Nos engagements / Tarifs</a></li>
<li><a href="#nogo">Nous contacter</a></li>
</ul>

</body>
</html>

voici la feuille de style externe :

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
background: #FFFFFF url(images/background-header.jpg) repeat-x top;
}

div#site {
text-align:left;
width: 1000px;
margin: auto;
}

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

div#header {
background: url(bannière/bannieretest2 copie.jpg) no-repeat 0 0;
height: 171px;
margin: 0;
padding: 0;
}

div#sous-header {
background: url(images/button1.gif);
height: 34px;
margin: 0;
padding: 0;
}

div#mh {
margin-left: 240px;
}

div#mh a, div#mh a:link {
float: left;
padding-right: 50px;
padding-top:10px;
font-family: Verdana;
font-size: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}

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

div#corp {
background: url(images/corp.jpg) repeat-y;
}

div#left {
float: left;
width: 318px;
margin: 0px;
padding: 0px;
background: url(images/left-background.jpg) repeat-y;
}

div#contenu-left {
background: url(images/left-top.jpg) no-repeat;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 63px;
padding-right: 25px;
}

div#title {
background: url(images/title.jpg) no-repeat;
height: 26px;
width: 216px;
margin-bottom: 10px;
padding-top: 5px;
padding-left: 10px;
font-family: "Times New Roman", Times, Verdana;
font-size: 13px;
color: #000000;
font-weight : bold;
font-style: italic;
}

div#contenu-menu {
padding-bottom: 0px;
padding-left: 10px;
padding-bottom: 18px;
}

div#menu {
margin-left: 10px;
padding-left: 4px;
padding-top: 7px;
background: url(images/li.jpg) repeat-y;
}

div#menu a {
color : #666666;
font-weight : bold;
font-size: 11px;
height: 10px;
}

div#right {
width:682px;
float:left;
}

div#arbo {
padding-top: 10px;
padding-bottom: 35px;
padding-left: 0px;
padding-right: 70px;
}

div#contenu-right {
background: url(images/right-top.jpg) no-repeat;
padding-top: 20px;
padding-bottom: 40px;
padding-left: 0px;
padding-right: 70px;
}

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

#footer {
height:33px;
width:100%;
margin:0 auto;
padding:0;
background: url(images/background-footer.jpg) repeat-x bottom;
background-color: #0196fc;
text-align:center;
clear: both;
margin-top:-42px;
}

#footer p {
padding-top: 12px;
font-size: 10px;
color: #FFFFFF
}

#footer a {
color : #FFFFFF;
font-family:verdana;
text-decoration:none;
}

#footer a:hover , a:active , a:focus {
color : #FFFFFF;
font-weight : bold;
text-decoration:none;
}

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

html, body {
margin: 0;
padding: 0;
}

span.spacer {
height:0.01em;
overflow:hidden;
display:block;
width:100%;
clear:both;
}

img { border: 0; }
li { list-style: none; }

a {
color : #666666;
font-family:verdana;
text-decoration:none;
}

a:hover , a:active , a:focus {
color : #666666;
font-weight : bold;
text-decoration:none;
}

h3 {
font-size: 11px;
font-weight: bold;
color: #ff5a00;
margin-bottom: 15px;
}

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

serait-il possible que quelqu'un m'aide a le mettre dans ma page externe ?

En vous remerciant d'avance :)
Dementia

Mister $$$ · 03-01-2010 12:14:46

c00lman · Re probleme feuille de style

Bonjour et bonne année également dementia :),

Bon, je dois avouer ne pas avoir tout comprit à ton soucis ?D après ce que j'ai "comprit", tu as juste à copier le code css du menu qui t'intéresse dans ta feuille de style et tu fais la même chose concernant le code XHTML du menu dans tes documents.

dementia · Re probleme feuille de style

oui c'est celà, mais je n'y arrive pas :s, il doit falloir modifier certaines choses, et je ne trouve absolument pas quoi :S

c00lman · Re probleme feuille de style

Je ne pige pas ce qui cloche ?
Tu as juste un copier/coller du css à faire dans ta feuille de style :

Code:

.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu2 li {float:left;}
.menu2 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu2 li.current a {color:#fff; background:url(button3.gif);}
.menu2 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu2 li a:hover {color:#fff; background:#000 url(button4.gif);}
.menu2 li a:hover b {background:url(button4.gif) no-repeat right top;}
.menu2 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu2 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

Puis un copier/coller du menu dans ton document et à l'endroit ou tu souhaite l'afficher :

Code:

<ul class="menu2">
<li><a href="#nogo"><b>Acceuil</b></a></li>
<li><a href="#nogo"><b>Support / Medias</b></a></li>
<li><a href="#nogo"><b>Nos engagements / Tarifs</b></a></li>
<li><a href="#nogo"><b>Nous contacter</b></a></li>
</ul>

Qu'est ce qui cloche exactement?
Qu'est ce qui ne fonctionne pas?
As tu une url pour voir le soucis?

dementia · Re probleme feuille de style

a nooooooon xD, jviens de voir ma bétise .... merci l'ami, jviens d'avoir mon illumination de la semaine :D
je te souhaite un excellent dimanche ! Encore merci :D

c00lman · Re probleme feuille de style

dementia a écrit:
a nooooooon xD, je viens de voir ma bêtise .... merci l'ami, je viens d'avoir mon illumination de la semaine :D

content (130)

Annonce

#1 probleme feuille de style du 03-01-2010 12:14:46

03-01-2010 12:14:46

#2 Re probleme feuille de style du 03-01-2010 12:27:57

Re: probleme feuille de style

#3 Re probleme feuille de style du 03-01-2010 12:46:38

Re: probleme feuille de style

#4 Re probleme feuille de style du 03-01-2010 13:38:29

Re: probleme feuille de style

Code:

Code:

#5 Re probleme feuille de style du 03-01-2010 13:43:00

Re: probleme feuille de style

#6 Re probleme feuille de style du 03-01-2010 13:45:18

Re: probleme feuille de style

dementia a écrit:

Partenaires de « créer un site internet »