Bonjour,
Dans la continuité de la modification aux normes standard de mon site, qui est à l'heure actuelle en frame et tableaux mais valider par W3C.
Je fais appel à vous afin de solutionner 2 problèmes :
Le premier concerne la réintégration de mon menu-boutons rollovers horizontal que j'avais mis dans un tableau d'une ligne et 8 colonnes.
Bref j'ai utilisé le modèle n°7 et 8 à ce lien, qui correspond le mieux et que j'ai décortiqué pour apprendre les positionnements et comment coder des blocs là c'est OK ;
ce qui va solutionner mes frames.
Voilà dans la normale mon tableau le rollover fonctionne très bien
Le code du fichier rollover1.css appelé
ce qui donne ceci en image
maintenant c'est de réintégrer mon menu qui pose problème, j'ai dû modifier dans mon Css l'élément display:block; en display:inline; mais mes rollovers s'affichent en partie derrière le texte du menu modèle. en images
La page html
Quand j'enlève les liens textes mes rollovers disparaissent - en images lol c'est le problème qui tue !!!
C'est sûr que la solution c'est que je remette un tableau dans le bloc mais je ne veux pas y retourner.
Pouvez-vous me dire ce qui ne vas pas dans mon code ou une page exemple avec le code de menu liens-images et non de texte comme dans les tutoriels
D'avance je vous en remercie
Modifié par Gil88 (25 Aug 2008 - 16:22)
Dans la continuité de la modification aux normes standard de mon site, qui est à l'heure actuelle en frame et tableaux mais valider par W3C.
Je fais appel à vous afin de solutionner 2 problèmes :
Le premier concerne la réintégration de mon menu-boutons rollovers horizontal que j'avais mis dans un tableau d'une ligne et 8 colonnes.
Bref j'ai utilisé le modèle n°7 et 8 à ce lien, qui correspond le mieux et que j'ai décortiqué pour apprendre les positionnements et comment coder des blocs là c'est OK ;
ce qui va solutionner mes frames.
Voilà dans la normale mon tableau le rollover fonctionne très bien
<div id="bouton">
<table width="85%" align="center">
<tbody>
<tr>
<td id="bouton1" align="center" valign="middle" width="10%" height="90%"><a href=
"accueil.html" target="frame_contenu"></a></td>
<td id="bouton2" align="center" valign="middle" width="10%" height="90%"><a href=
"pourquoinouschoisir.html" target="frame_contenu"></a></td>
<td id="bouton3" align="center" valign="middle" width="10%" height="90%"><a href=
"nosprestations.html" target="frame_contenu"></a></td>
<td id="bouton4" align="center" valign="middle" width="10%" height="90%"><a href=
"clientele.html" target="frame_contenu"></a></td>
<td id="bouton5" align="center" valign="middle" width="10%" height="90%"><a href=
"exemples/exemples.html" target="frame_contenu"></a></td>
<td id="bouton6" align="center" valign="middle" width="10%" height="90%"><a href=
"contact.html" target="frame_contenu"></a></td>
<td id="bouton7" align="center" valign="middle" width="10%" height="90%"><a href=
"javascript:showTwo();"></a></td>
<td id="bouton8" align="center" valign="middle" width="10%" height="90%"><a href=
"plandusite.html" target="frame_contenu"></a></td>
</tr>
</tbody>
</table>
</div>
Le code du fichier rollover1.css appelé
/* propriétés des images du menu suppression des cadres images */
a img {
border : 0;
}
#bouton{background:top left no-repeat;}
#bouton a{display:block;width:100%;height:100%;color:#000000;}
/* préchargement de l'image2 */
#bouton1 {width:75px;height:30px;}
#bouton1 a{background:url(roll/boutonaccueil2.png) no-repeat;}
#bouton1 a:hover{background:url(roll/ov_boutonaccueil2.png) no-repeat 5px 0;}
#bouton2 {width:108px;height:30px;}
#bouton2 a {background:url(roll/boutonouschoisir2.png) no-repeat;}
#bouton2 a:hover{background:url(roll/ov_boutonouschoisir2.png) no-repeat 5px 0;}
#bouton3 {width:81px;height:30px;}
#bouton3 a {background:url(roll/boutonprestations2.png) no-repeat;}
#bouton3 a:hover{background:url(roll/ov_boutonprestations2.png) no-repeat 5px 0;}
#bouton4 {width:75px;height:30px;}
#bouton4 a {background:url(roll/boutonclientele2.png) no-repeat;}
#bouton4 a:hover{background:url(roll/ov_boutonclientele2.png) no-repeat 5px 0;}
#bouton5 {width:75px;height:30px;}
#bouton5 a {background:url(roll/boutonexemples2.png) no-repeat;}
#bouton5 a:hover{background:url(roll/ov_boutonexemples2.png) no-repeat 5px 0;}
#bouton6 {width:75px;height:30px;}
#bouton6 a {background:url(roll/boutoncontact2.png) no-repeat;}
#bouton6 a:hover{background:url(roll/ov_boutoncontact2.png) no-repeat 5px 0;}
#bouton7 {width:75px;height:30px;}
#bouton7 a {background:url(roll/boutonebook2.png) no-repeat;}
#bouton7 a:hover{background:url(roll/ov_boutonebook2.png) no-repeat 5px 0;}
#bouton8 {width:106px;height:26px;}
#bouton8 a {background:url(roll/boutonplandusite2.png) no-repeat;}
#bouton8 a:hover{background:url(roll/ov_boutonplandusite2.png) no-repeat 5px 0;}
ce qui donne ceci en image
maintenant c'est de réintégrer mon menu qui pose problème, j'ai dû modifier dans mon Css l'élément display:block; en display:inline; mais mes rollovers s'affichent en partie derrière le texte du menu modèle. en images
La page html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur fixe 750, header/menu haut/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="rollover1.css" />
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
width: 100%;
margin: 0 auto;
}
#header {
height: 157px;
margin-left:20px;
background: url(image/logonc.gif) no-repeat;
}
#haut {
height: 60px;
width: 100%;
text-align:center;
background-color:#FFFFFF;
}
.menuhaut {
margin: 30px;
padding: 0px;
}
.menuhaut li {
display: inline;
}
.menuhaut a {
margin: 0 20px;
color: #000000;
text-decoration: none;
}
#centre {
margin: 10px;
padding: 20px;
background-color:#FFFFFF;
}
p {margin: 0 0 5px 0;}
</style>
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="haut">
<ul class="menuhaut" id="bouton">
<li id="bouton1"><a href="" title="Accueil">Bouton 1</a></li>
<li id="bouton2"><a href="" title="Nous choisir ?">Bouton 2</a></li>
<li id="bouton3"><a href="" title="Nos produits">Bouton 3</a></li>
<li id="bouton4"><a href="" title="Clientèle">Bouton 4</a></li>
<li id="bouton5"><a href="" title="Exemples">Bouton 5</a></li>
<li id="bouton6"><a href="" title="Contact">Bouton 6</a></li>
<li id="bouton7"><a href="" title="ebook">Bouton 7</a></li>
<li id="bouton8"><a href="" title="Plan du site">Bouton 8</a></li>
</ul>
</div>
<div id="centre">
partie centrale qui "pousse" les colonnes vers le bas.<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
</div>
</div>
</body>
</html>
Quand j'enlève les liens textes mes rollovers disparaissent - en images lol c'est le problème qui tue !!!
C'est sûr que la solution c'est que je remette un tableau dans le bloc mais je ne veux pas y retourner.
Pouvez-vous me dire ce qui ne vas pas dans mon code ou une page exemple avec le code de menu liens-images et non de texte comme dans les tutoriels
D'avance je vous en remercie
Modifié par Gil88 (25 Aug 2008 - 16:22)