Bonjour à tous,
je suis entrain de plancher sur un site web et me suis un peu mis au css vu les conseil de nombreux site. Je ne connais aucun langage mais j'essaye de me débrouiller par analogie... j'utilise en éditeur dreamweaver mx.
Alors mon pb, je suis entrain de faire un menu de gauche qui s'ouvre quand on y passe la souris (aller à cette adresse pour vous faire une idée : ce n'est ni l'adresse définitive ni le contenu définitif ! : http://atoutvend.chez.tiscali.fr). Comme vous pourrez le voir j'ai trois case, et g envie d'en faire une quatrième mais je n'arrive pas à le faire ;(, deplus, j'aimerai remplacer un titre par une image et pas de déroulant (lien pour l'accueil) mais je n'y arrive pas non plus : la taille des cases !
alors si un de vous est ok pour m'aider, voir de continuer à correspondre avec moi en cas de pépin, ben je suis d'accord !
je vous met le css et le html qui va avec :
css :
body {
background-color: #FFFFFF;
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
hr{
display: none;
}
.logo {
border-style:solid;
border-width:3px;
border-color:#FFFFFF;
background-color:#375E99;
width:783px;
height:33px;
padding:10px;
position:absolute;
right:0px;
top:0px;
}
.menu, .ssmenu {
background-color:#375E99;
color:#333;
border:0.1em solid #FFF;
position:absolute;
top: 85px;
margin:1em;
}
.menu span, .ssmenu span {
display:none;
}
.menu a, .ssmenu a {
text-decoration:none;
color:#FFFFFF;
}
.menu {
padding:0 1em;
position:absolute;
top:85px;
}
.ssmenu {
padding:0;
}
.ssmenu li {
list-style-type:disc;
list-style-position:inside;
padding-left:0.2em;
color:#375E99;
}
.ssmenu li:hover, .ssmenu a:hover, .ssmenu a:focus {
background-color:#375E99;
color:#FFCC66;
}
.ssmenu li:hover {
list-style-type:circle;
}
#access a, #texte a {
color: #000000;
}
#access a:hover, #texte a:hover {
text-decoration:none;
}
#access a:focus, #texte a:focus {
text-decoration:none;
background-color:#FFCC66;
color:#FFFFFF;
}
#access {
margin:1em;
padding:0;
}
#texte {
border-style: solid;
border-width: 4px;
border-color: #375E99;
margin-left: 225px;
width: 611px;
padding: 10px;
height: absolute;
position:absolute;
right: 158px;
top: 93px;
}
.titrerubrique {
border-style:solid;
border-width:2px;
border-color:#FFCC66;
background-color:#375E99;
width: 611px;
padding:10px;
height:20px;
position:absolute;
right:165px;
top:190px;
}
.sousrubrique {
border-style:solid;
border-width:2px;
border-color:#FFCC66;
background-color:#375E99;
width: 611px;
padding:10px;
height:auto;
position:absolute;
right:165px;
top:190px;
}
.sousrubrique2 {
border-style:solid;
border-width:2px;
border-color:#FFCC66;
background-color:#375E99;
width: 611px;
padding:10px;
height:auto;
position:absolute;
right:165px;
top:325px;
}
.menudroite {
border-style:solid;
border-width:5px;
border-color:#FFFFFF;
background-color:#375E99;
width:125px;
padding:10px;
height:423px;
position:absolute;
right:0px;
top:93px
}
html du menu :
<p id="menu1" class="menu">
<a href="#" onmouseover=
"MontrerMenu('ssmenu1');" onfocus=
"MontrerMenu('ssmenu1');">Sélection<span> :</span></a>
</p>
<ul id="ssmenu1" class="ssmenu">
<li>
<a href="#" title=
"Sous-menu 1"><a href="mes favoris.htm">Mes favoris</a></a><span> ;</span>
</li>
</ul>
<p id="menu2" class="menu">
<a href="#" title="Apprendre et se coucher moins bête." onmouseover=
"MontrerMenu('ssmenu2');" onfocus=
"MontrerMenu('ssmenu2');">Tutoriaux<span> :</span></a>
</p>
<ul id="ssmenu2" class="ssmenu">
<li>
<a href="#" title=
"Sous-menu 1">Gandhi</a><span> ;</span>
</li>
<li>
<a href="#" title="Sous-menu 2">César</a>
<span> ;</span>
</li>
<li>
<a href="#" title="Sous-menu 3">Soumettre...</a><span>.</span>
</li>
</ul>
<p id="menu3" class="menu">
<a href="#" title="Ne jamais se séparer de sa boîte à outil !" onmouseover=
"MontrerMenu('ssmenu3');" onfocus=
"MontrerMenu('ssmenu3');">Logithèque<span> :</span></a>
</p>
<ul id="ssmenu3" class="ssmenu">
<li>
<a href="logithèque%20indispensables.htm" title=
"Sous-menu 1">Les indispensables</a><span> ;</span>
</li>
<li>
<a href="#" title=
"Sous-menu 2">Musique légale</a><span> ;</span>
</li>
<li>
<a href="#" title=
"Sous-menu 3">Télécharger !</a><span> ;</span>
</li>
</ul>