[HTML CSS] Petit détail

Ou comment rectifier la position d'une puce et d'un hover

Sujet résolu

4 août 2006 à 23:51:17

Voila, j'ai un probléme:
1) Si vous ouvrez la page normalement, le menu "contact", si vous passez le curseur sur contacts il s'illumine, normalement sa devrais pas le faire...
2) normalement aussi, une image doit apparaitre en dessous de bienvenue et il n'y a rien pourtant, j'ai vérifié l'adresse de mon image elle est bonne...

#imagea
{
background-image: url("images/tie.gif");
text-align: center;
background-repeat: no-repeat;
}

body
{
width: 760px;
margin-right:auto
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/wall.png");
}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/ban.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left;
width: 100px;
}

.element_menu
{
background-color: black;
background-image: url("images/menu.png");
background-repeat: repeat-x;

border: 2px solid red;

margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.gif");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: yellow;
}

.element_menu a:hover
{
color: yellow;
background:red;
}
.element_menu a:active
{
color:orange;
}

/* Le corps de la page */

#corps
{
margin-left: 120px;
margin-right: 120px;
margin-bottom: 20px;
padding: 5px;
color: white;
background-color: black;
background-image: url("images/wall.png");
background-repeat: repeat-x;

border: 2px solid red;
}

#corps h1
{
color: yellow;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-style: strong;
font-style: underline;
}

#corps h2
{
height: 30px;

background-image: url("images/warn.gif");
background-repeat: no-repeat;

padding-left: 30px;
color: orange;
text-align: left;
}

/* Le pied de page */

#pied_de_page
{
padding: 5px;

text-align: center;
margin-left: 120px;
margin-right: 120px;
margin-top: 20px;

color: white;
background-color: black;
background-image: url("images/menu.png");
background-repeat: repeat-x;

border: 2px solid red;
}

#menu_droit
{
float: right;
width: 100px;
}

.droite
{
background-color: black;
background-image: url("images/menu.png");
background-repeat: repeat-x;

border: 2px solid red;

margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.droite h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.droite ul
{
list-style-image: url("images/puce.gif");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 25px;
}

.droite a
{
color: yellow;
}

.droite a:hover
{
color: yellow;
background:red;
}
.droite a:active
{
color:orange;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>DUEL DE YOUNGLINGS : Le site officiel</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<link rel="stylesheet" media="screen" type="text/css" title="css" href="css.css" />

<link rel="alternate stylesheet" media="screen" type="text/css" title="pourrav" href="pourrav.css" />
</head>
</head>
<body>



<div id="en_tete">

</div>



<div id="menu">
<div class="element_menu">
<h3>Menu</h3>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="cons.html">LE FILM !</a></li>
<li><a href="goodies.html">Goodies</a></li>
<li><a href="FAQ.html">FAQ</a></li>
</ul>
</div>

<div class="element_menu">
<h3>La prod...</h3>
<ul>
<li><a href="cons.html">Dark Snake<a>
<li><a href="cons.html">Captain Cookie<a>
<li><a href="cons.html">Captain Pizza<a>
<li><a href="cons.html">NeoLitik<a> </li></ul>
</div>
</div>

<div id="menu_droit">
<div class="droite">
<h3>Contacts</h3>

<ul><li><a href="">Livre d'or</a>
<li><a href="http://dueldeyounglings.forumactif.com">Forum</a>
<li><a href="mail.html">Email</a></li></ul>
</div>
</div>
</div>



<div id="corps">
<h1>Bienvenue</h1>

<div id="imagea">

</div id="imagea">

<p>
Vous allez adorer ici, c'est un site génial qui va parler de : DUEL DE YOUNGLINGS, un film d'une production amateur
sur l'univers star wars ! ne me demandez pas ce qu'est un younglings, on en reparlera plus tard... Pour l'instant le site est pas top
mais revenez dans quelques jours... vous serez surpris !
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
Aux fan de star wars et de l'univers star wars ! (enfin si vous etes pas spécialement fan vous pouvez venir aussi ! :p) </p>
</center>
</div>



<div id="pied_de_page">
<p>Copyright "Duel De Younglings©" 2006, tous droits réservés.</br>
Creation du site et design par NeoLitik</p>
</div>
</body>

</body>
</html>

Gunjack

5 août 2006 à 1:56:21

Salut,
t'as pas donné le lien vers la page

NeoLitik

5 août 2006 à 2:20:57

http://dueldeyounglings.free.fr

YoyoS

5 août 2006 à 3:49:07

.droite a:hover
{
color: yellow;
background:red;}

<div class="droite">
<h3>Contacts</h3>

voila la réponse du 1, il suffit de t'arranger pour que Contacts ne soit pas influencé par le hover que tu as mis sur la class="droite"

pour le 2, c koi ca ?

j'ai jamais vu ca moi, mettre deux balises identiques dans une paire de balise <div></div>

ptet que si tu mettais juste ca

ca suffirait ...

NeoLitik

5 août 2006 à 4:12:42

Citation : YoyoS

.droite a:hover
{
color: yellow;
background:red;}

<div class="droite">
<h3>Contacts</h3>

voila la réponse du 1, il suffit de t'arranger pour que Contacts ne soit pas influencé par le hover que tu as mis sur la class="droite"

pour le 2, c koi ca ?

<div id="imagea">

</div id="imagea">

j'ai jamais vu ca moi, mettre deux balises identiques dans une paire de balise <div></div>

ptet que si tu mettais juste ca

<div id="imagea"></div>

ca suffirait ...

Ben justement, avant j'avais fait sa, alors j'ai pensé la meme chose que toi mais a l'envers ! Mais sa ne marche toujours pas pour l'image comme le "contact"

YoyoS

5 août 2006 à 5:25:44

ben je n'ai pas testé, mais pour le hover du contact, tu dois absolument revoir ton code css en regardant qui est le parent de l'autre. Car c'est à 100% sur que c'est un problème de ce genre

Pour l'image, mhhh, tu as essayé de ne pas mettre d'id (#) et de plutot mettre une class (.).

Je veux dire mettre class="imagea" et dans ton css .imagea et pas de id="imagea" et #imagea

J'ai du voir quelques part que le id ne pouvait s'utiliser qu'une seule fois, ca peut venir de la ...

Tu dois avoir en tête que c'est universel "class"

BN !

NeoLitik

5 août 2006 à 13:23:25

Citation : YoyoS

ben je n'ai pas testé, mais pour le hover du contact, tu dois absolument revoir ton code css en regardant qui est le parent de l'autre. Car c'est à 100% sur que c'est un problème de ce genre

Pour l'image, mhhh, tu as essayé de ne pas mettre d'id (#) et de plutot mettre une class (.).

Je veux dire mettre class="imagea" et dans ton css .imagea et pas de id="imagea" et #imagea

J'ai du voir quelques part que le id ne pouvait s'utiliser qu'une seule fois, ca peut venir de la ...

Tu dois avoir en tête que c'est universel "class"

BN !

Sa ne marche tjs pas !

rmuffat

5 août 2006 à 15:55:50

<div class="droite">
<h3>Contacts</h3>

Non ?