Bonjour,
J'ai longuement hésité à mettre ce post mais je n'ai pas trouvé ce qui cloche. J'ai fait des recherches mais je suis nouvelle en la matière.
Bien, j'ai fait ma page CSS avec l'aide d'un pote pour les corrections. Puis j'ai voulu mettre des zones cliquables enfain d'enlever les map. Et c'est là que j'ai du faire une borde! Normalement, j'ai un header avec une image en fond sur laquelle j'ai du texte, un menu à gauche avec pareil et un conteneur. Donc j'ai fait mon code pour mettre mes zones cliquables.. mais ça a tout chamboulé. Et j'ai pas mes zones... J'ai vérifié ma grammaire css W3C c'est correcte. Pour la page index.html, je sais que j'ai mis du javascript qui ne va pas en vérification stricte. Mais bon c'est pas un souci je peux virer et faire autrement.
Voici mon code CSS:
Pour voir le résultat cliquez: ICI. C'est affreux et nul mais bon faut que j'assume j'ai fait une bourde...
Merci de m'aider à comprendre mon erreur.
J'ai longuement hésité à mettre ce post mais je n'ai pas trouvé ce qui cloche. J'ai fait des recherches mais je suis nouvelle en la matière.
Bien, j'ai fait ma page CSS avec l'aide d'un pote pour les corrections. Puis j'ai voulu mettre des zones cliquables enfain d'enlever les map. Et c'est là que j'ai du faire une borde! Normalement, j'ai un header avec une image en fond sur laquelle j'ai du texte, un menu à gauche avec pareil et un conteneur. Donc j'ai fait mon code pour mettre mes zones cliquables.. mais ça a tout chamboulé. Et j'ai pas mes zones... J'ai vérifié ma grammaire css W3C c'est correcte. Pour la page index.html, je sais que j'ai mis du javascript qui ne va pas en vérification stricte. Mais bon c'est pas un souci je peux virer et faire autrement.
Voici mon code CSS:
/* définition par défaut pour tous les éléments: * */
* {
font-family : Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px;
padding:0px;
border:0px none;
}
body {
background-color:#ffffff;
margin:auto;
}
#header {
height:159px;
background:url('http://lamaisonnettedemokao.free.fr/images/arbre_automne2_01.gif');
background-repeat:no-repeat;
}
/* elements du menu de gauche*/
#menugauche {
float: left;
padding-top: 10px;
width: 192px;
height: 525px;
background-image:url('http://lamaisonnettedemokao.free.fr/images/arbre_automne2_02.gif');
background-repeat: no-repeat;
list-style-type: none;
}
#menugauche a{
width:120px;
height:25px;
margin-left:33px;
margin-top:60px;
text-decoration:none;
}
#menugauche a:hover {
border:dashed 1px;
border-color: #FFFACD;
}
/* elements masques */
#menugauche a i {
visibility:hidden;
text-decoration:none;
font-size:1px;
}
/* Les éléments du menu du haut*/
#menuhaut {
float: left;
padding-top: 10px;
width: 192px;
height: 525px;
background-image:url('http://lamaisonnettedemokao.free.fr/images/arbre_automne2_01.gif');
background-repeat: no-repeat;
list-style-type: none;
}
#menuhaut a{
width:100px;
height:25px;
margin-left:45px;
margin-top:100px;
text-decoration:none;
}
#menuhaut a:hover {
border:dashed 1px;
border-color: #FFFACD;
}
/* elements masques */
#menuhaut a i {
visibility:hidden;
text-decoration:none;
font-size:1px;
}
#contenu {
width:664px;
height:525px;
padding:10px;
margin:0px;
background:url('http://lamaisonnettedemokao.free.fr/images/arbre_automne2_03.gif');
background-repeat:no-repeat;
overflow:auto;
}
#croixrouge {
display:block;
margin-top:-100px;
margin-right:1000px;
padding:0px;
width:175px;
height:48px;
}
/* styles de textes et mise en page */
p {
color: black;
margin-top:5px;
margin-right:45px;
text-align: justify;
text-indent: 0px;
}
h1 {
color: rgb(68,88,11);
margin-right:45px;
font-size: small;
text-decoration: blink;
text-align: justify;
text-transform: uppercase;
border-bottom: 2px double black;
}
h2 {
margin-top: 45px;
margin-left:77px;
}
P:first-letter {
font-weight: bold;
font-size: 100%;
}
ul {
list-style-type: circle;
list-style-position: inside;
border: none;
}
/* definitions des liens */
a {
color: black;
font-style: italic;
text-decoration: none;
}
a:visited /* Quand le visiteur a déjà vu la page concernée */ {
text-decoration: underline;
}
a:active, a:focus /* Appliquer le même style aux liens actifs et focus */ {
text-decoration: underline;
background-color: #ffcc66;
}
a:hover /* Quand le visiteur pointe sur le lien */{
text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
color: green; /* Le lien sera écrit en vert quand on pointera dessus */
}
Pour voir le résultat cliquez: ICI. C'est affreux et nul mais bon faut que j'assume j'ai fait une bourde...
Merci de m'aider à comprendre mon erreur.
