Bonjour a tous,
Donc je reprecise mon idée:
Je voudrais savoire si je peux rajouter un menu deroulant sur des liens qui contiennent deja un :hover.
Plus precisement a ajouter l'option de galerie image et video au passage de la souris sur le lien du menu "Galerie"
(j'avourais que je ne sais plus comment j'ai fas le menu mais je me souviens d'avoire ramé,Je vous y invite dailleurs pur vous faire une idée sur shima.fr. (les faute d'orthographe sont provisoire ^^)
ps:dsl mon codage est un peu fouilli
Modifié par ShimA (15 May 2008 - 07:25)
Donc je reprecise mon idée:
Je voudrais savoire si je peux rajouter un menu deroulant sur des liens qui contiennent deja un :hover.
Plus precisement a ajouter l'option de galerie image et video au passage de la souris sur le lien du menu "Galerie"
(j'avourais que je ne sais plus comment j'ai fas le menu mais je me souviens d'avoire ramé,Je vous y invite dailleurs pur vous faire une idée sur shima.fr. (les faute d'orthographe sont provisoire ^^)
ps:dsl mon codage est un peu fouilli
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>David sureault Portfolio galerie graphiste 2D illustratoion </title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
</head>
<body>
<div id="en_tete">
</div>
<div id="menu">
<a class="a" href="index.html"> <img alt="bouton" src="image/accueil.gif" border="0"/> </a>
<a class="b" href="galerie.html"> <img alt="bouton" src="image/galerie_lueur.gif" border="0"/> </a>
<a class="c" href="cv.html"> <img alt="bouton" src="image/cv.gif" border="0"/> </a>
<a class="d" href="liens.html"> <img alt="bouton" src="image/liens.gif" border="0"/> </a>
</div>
<div id="corp">
<div id="galerie">
<ul id="galerie_mini">
<li><a title="bouche froide" href="galerie/bouche_froide.jpg"> <img alt="dessin" src="thumbnails/bouche_froide.jpg" /></a></li>
<li><a title="compo 02" href="galerie/compo02.jpg"> <img alt="dessin" src="thumbnails/compo02.jpg" /></a></li>
<li><a title="compo 03" href="galerie/compo03.jpg"> <img alt="dessin" src="thumbnails/compo03.jpg"/></a></li>
<li><a title="compo 04" href="galerie/compo04.jpg"> <img alt="dessin" src="thumbnails/compo04.jpg" /></a></li>
<li><a title="compo 01" href="galerie/compo.jpg" > <img alt="dessin" src="thumbnails/compo.jpg"/></a></li>
<li><a title="compo visage" href="galerie/composition_de_visage.jpg"> <img alt="dessin" src="thumbnails/composition_de_visage.jpg"/></a></li>
<li><a title="corbeaux" href="galerie/corbeau.jpg"> <img alt="dessin" src="thumbnails/corbeau.jpg"/></a></li>
<li><a title="Doba" href="galerie/Doba.jpg"> <img alt="dessin" src="thumbnails/Doba.jpg"/></a></li>
<li><a title="banniere" href="galerie/dodoche_beta_1.1.jpg"> <img alt="banniere" src="thumbnails/dodoche_beta_1.1.jpg"/></a></li>
<li><a title="compo05" href="galerie/femme.jpg"> <img alt="dessin" src="thumbnails/femme.jpg"/></a></li>
<li><a title="papillons" href="galerie/Femme_papillon.jpg" > <img alt="dessin" src="thumbnails/Femme_papillon.jpg"/></a></li>
<li><a title="produit laitier" href="galerie/Fromage.jpg"> <img alt="icone" src="thumbnails/Fromage.jpg" /></a></li>
<li><a title="Gatsu" href="galerie/GaTsu.jpg"> <img alt="dessin" src="thumbnails/GaTsu.jpg"/></a></li>
<li><a title="gorille" href="galerie/Gorilla.jpg"> <img alt="dessin" src="thumbnails/Gorilla.jpg"/></a></li>
<li><a title="GoRo" href="galerie/shima [1600x1200].jpg" > <img alt="dessin" src="thumbnails/shima-[1600x1200].jpg" /></a></li>
<li><a title="GoRo" href="galerie/goroyellow.jpg"> <img alt="dessin" src="thumbnails/goroyellow.jpg"/></a></li>
<li><a title="GoBz" href="galerie/tete de gob.jpg"> <img alt="dessin" src="thumbnails/tete-de-gob.jpg"/></a></li>
<li><a title="maître" href="galerie/grand_maitre.jpg"> <img src="thumbnails/grand_maitre.jpg"/></a></li>
<li><a title="hajime no gatsu" href="galerie/hajime_no_gatsu.jpg"> <img alt="dessin" src="thumbnails/hajime_no_gatsu.jpg"/></a></li>
<li><a title="king" href="galerie/KinG.jpg"> <img alt="dessin" src="thumbnails/KinG.jpg"/></a></li>
<li><a title="horizon" href="galerie/le_penseur_de_ShimA.jpg"> <img alt="dessin" src="thumbnails/le_penseur_de_ShimA.jpg"/></a></li>
<li><a title="Levitons" href="galerie/levitation.jpg"> <img alt="dessin" src="thumbnails/levitation.jpg"/></a></li>
<li><a title="BiC" href="galerie/ma_femme.jpg"> <img alt="dessin" src="thumbnails/ma_femme.jpg"/></a></li>
<li><a title="mafio" href="galerie/mafio.jpg"> <img alt="dessin" src="thumbnails/mafio.jpg"/></a></li>
<li><a title="danse" href="galerie/oriental.jpg"> <img alt="dessin" src="thumbnails/oriental.jpg"/></a></li>
<li><a title="dodoche" href="galerie/dodoche_beta_1.1.jpg"> <img alt="dessin"src="thumbnails/dodoche_beta_1.1.jpg"/></a></li>
<li><a title="Bull-terrier" href="galerie/wahou.jpg"> <img alt="dessin" src="thumbnails/wahou.jpg"/></a></li>
<li><a title="Portfolio" href="galerie/portfolio_03.jpg"> <img alt="screenshot" src="thumbnails/portfolio_03.jpg"/></a></li>
</ul>
<dl id="photo">
<dt>bull-terrier</dt>
<dd><img id="big_pict" src="galerie/wahou.jpg" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
*
{
padding:0px;
margin:0px;
}
body
{
width:1400px;
height:800px;
background-color:#fff;
background-repeat:no-repeat;
margin:auto;
}
#en_tete
{
width:834px;
height:138px;
background-image:url(image/Banniere-ShimA-et-logo.jpg);
background-repeat:no-repeat;
margin:auto;
background-position:bottom right;
}
#menu
{
background-image:url(image/menu_bleue1.jpg);
background-repeat:no-repeat;
background-position:center;
width:874px;
height:75px;
margin:auto;
text-decoration:none;
}
#corp
{
width:874px;
max-height:2500px;
min-height:500px;
margin:auto;
background-image:url(image/echantillon2.jpg);
background-repeat:repeat-y;
background-position:center;
padding-top:10px;
}
#footer
{
width:874px;
height:78px;
background-image:url(image/footer_bleue1.jpg);
background-repeat:no-repeat;
margin:auto;
}
a
{
text-decoration:none;
color:white;
}
#menu a
{
margin-top:25px;
margin-left:50px;
width:130px;
float:left;
border:none;
}
a.a
{
display: block;
width: 136px;
height: 48px;
background-image:url(image/accueil_lueur.gif);
}
a.a:hover
{
visibility:visible;
}
a.a:hover img
{
visibility:hidden;
}
a.b
{
display: block;
width: 136px;
height: 48px;
background-image:url(image/galerie_lueur.gif);
}
a.b:hover
{
visibility:visible;
}
a.b:hover img
{
visibility:hidden;
}
a.c
{
display: block;
width: 115px;
height: 48px;
background-image:url(image/cv_lueur.gif);
}
a.c:hover
{
visibility:visible;
}
a.c:hover img
{
visibility:hidden;
}
a.d
{
display: block;
width: 120px;
height: 48px;
background-image:url(image/liens_lueur.gif);
}
a.d:hover
{
visibility:visible;
}
a.d:hover img
{
visibility:hidden;
}
.info
{
width:350Px;
height:210px;
color:#fff;
font-family:GeosansLight;
text-indent:5px;
font-size:20px;
letter-spacing:0.0em;
border: solid #0074ff 2px;
padding:10px;
margin-left:30px;
margin-top:55px;
border-bottom:0px;
border-left:0px;
clear:both;
float:left;
}
.image
{
margin-top:150px;
}
.cv
{
width:89.5%;
font-size:medium;
color:#fff;
font-family:Vrinda;
margin-left:25px;
margin-right:25px;
clear:right;
border-right:dotted #99ccdf 1px;
border-top:dotted #99ccdf 1px;
}
.cvv
{
display:block;
float:right;
width:437px;
border:dotted red 1px;
border-bottom:0Px;
border-left:0px;
font-size:medium;
color:#fff;
font-family:Vrinda;
margin-left:25px;
}
.cvvv
{
width:437px;
border:dotted blue 1px;
border-bottom:0Px;
border-left:0px;
font-size:medium;
color:#fff;
font-family:Vrinda;
margin-right:25px;
}
.cvvvv
{
float:right;
clear:both;
width:350px;
border:dotted yellow 1px;
border-bottom:0Px;
border-left:0px;
font-size:medium;
color:#fff;
font-family:Vrinda;
margin-right:25px;
}
.cvvvvv
{
clear:both;
width:350Px;
border:dotted orange 1px;
border-left:0px;
font-size:medium;
color:#fff;
font-family:Vrinda;
margin-left:25px;
margin-right:25px;
border-bottom:0px;
margin-top:10px;
float:left;
}
.ident
{
width:350Px;
border:dotted purple 1px;
border-left:0px;
font-size:medium;
color:#fff;
font-family:Vrinda;
margin-left:25px;
border-bottom:0px;
}
.typo
{
text-indent:5px;
color:#006666;
font-family:Bebas;
}
div#galerie
{
width: 780px ;
background: #3399cc;
padding-top: 10px ;
padding-bottom: 10px ;
margin:auto;
text-align: center ;
font: 0.9em Georgia, serif ;
}
ul#galerie_mini
{
margin: 0px ;
padding:0px;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 1px 1px ;
border: 1px solid #3f474a ;
min-width:35px;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font-family:"Kravitz Thermal",Kravitz,"Kravitz Extra Thermal";
font-size:25px;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
#galerie_mini a
{
}
.telecharger
{
width:95px;
margin-right:25px;
padding:5px;
margin-top:15px;
margin-bottom:5px;
border:1px solid #0066ff;
float:right;
text-decoration:none;
display:block;
}
.telecharger:hover
{
border:1Px solid #fff;
color:#0066ff;
}
.liens
{
list-style-type:none;
margin-left:50px;
padding:px;
font-weight:bold;
color:#FFFFFF;
font-size:20px;
font-family:GeosansLight;
padding:5px;
margin-bottom:330px;
}
.liens a:hover
{
color:#FF0000;
}
h3
{
font-family:Bebas;
color:#0066FF;
}
ul
{
color:white;
list-style-type:none;
}
#block1
{
border: white 1px dotted;
border-bottom:none;
border-right:none;
width:370px;
height:450px;
float:left;
margin-left:25px;
padding:5px;
font-family:GeosansLight;
font-size:18px;
}
#block2
{
width:370px;
height:430px;
float:right;
margin-right:25px;
padding:5px;
border-top:none;
border-left:none;
font-family:GeosansLight;
font-size:18px;
}
#block2 ul
{
border:1px #fff dotted;
border-top:none;
border-left:none;
}
#block1 ul
{
border:1px #fff dotted;
border-bottom:none;
border-right:none;
}
Modifié par ShimA (15 May 2008 - 07:25)