[XHTML/CSS] Demande d'avis sur cette page

Marsh Posté le 13-04-2004 à 17:32:15

Re Salut :hello:

Voilà un menu que je viens de finir, pourriez vous me dire ce que vous en pensez et ce que je peux améliorer ??

Merci à tous

CODE HTML à Enregistrer dans un fichier .html et lancer dans un navigateur.

Code :

<!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" lang="fr" xml:lang="fr">
<head>
<title>DEMO MENU CSS/JS V1</title>
<meta name="" content="" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" />
<meta http-equiv="pragma" content= "no-cache " />
<meta http-equiv="Cache-Control" content="no-cache" />
<style type="text/css" media="screen">
body {
background:none #000000;
color:#fff;
width:100%;
height:100%;
text-align:center;
}
.plan {
text-align:left;
font-family:Helvetica, sans-serif;
font-size:12px;
color:#abd;
}
.ici{
color:#bbb;
text-decoration:underline overline;
}
.texte {
font-family:fantasy;
font-size:18px;
}
.m {
position:relative;
bottom:0em;
left:0em;
padding-bottom:90px;
width:100%;
}
.menu{
background:#900;
border:1px solid #FFF;
margin:1px;
width: 95px;
font-size:11px;
float:left;
}
.menu p:hover, .menu a:hover, .menu a:focus{
background-color:#F93;
}
.menu a:active, .ssmenu a:active {
background:#abc;
color: #000;
}
.menu a {
text-decoration:none;
color:#fff;
display:block;
}
.ssmenu {
border:1px dashed #FFF;
background:#900;
position:absolute;
bottom:0.3em;
left:19em;
margin:0em;
width:100px;
font-size:12px;
display:block;
text-align:left;
list-style-position:inside;
}
.ssmenu li{
background-color:#900;
}
.ssmenu li:hover, .ssmenu a:hover, .ssmenu a:focus {
background-color:#F93;
list-style-type: circle;
}
.menu span, .ssmenu span {
display:none;
}
.ssmenu a{
text-decoration:none;
color:#fff;
}
hr {
width:70%;
}
</style>
<script type="text/javascript">
function Chargement() {
CacherMenus();
}
function MontrerMenu(strMenu) {
CacherMenus();
document.getElementById(strMenu).style.visibility="visible";
}
function CacherMenus() {
for(i=1;i<=6;i++) {
with(document.getElementById("ssmenu"+i).style) {
visibility="hidden";
}
}
}
</script>
</head>
<body onload="Chargement();">
<h1>Bienvenue sur le site de DEMO MENU CSS/JS V1 </h1>
<div class="plan">
Vous etes ici : ACCUEIL > Le club > présentation
</div>
<pre class="texte">
Du texte Du texte Du texte Et encore du texte
du texte du texte
Bon bah voilà un menu qu'il est beau
Entierement fait en CSS et xhtml
Validé W3C
</pre>
<hr/>
..:: Menu Général ::..
<div id="m" class="m">
<a href="#" title="Menu 1" onmouseover="MontrerMenu('ssmenu1');" onfocus="MontrerMenu('ssmenu1');">Club :</a>
<ul id="ssmenu1" class="ssmenu">
<li>
<a href="#" title="Sous-menu 1">Présentation</a> ;
</li>
<li>
<a href="#" title="Sous-menu 2">Plan</a> ;
</li>
<li>
<a href="#" title="Sous-menu 3">La salle</a>.
</li>
</ul>
<a href="#" title="Menu 2" onmouseover="MontrerMenu('ssmenu2');" onfocus="MontrerMenu('ssmenu2');">Equipes :</a>
<ul id="ssmenu2" class="ssmenu">
<li>
<a href="#" title="Sous-menu 1">Les filles</a> ;
</li>
<li>
<a href="#" title="Sous-menu 2">Les gars</a> ;
</li>
<li>
<a href="#" title="Sous-menu 3">Les petits</a>.
</li>
</ul>
<a href="#" title="Menu 3" onmouseover="MontrerMenu('ssmenu3');" onfocus="MontrerMenu('ssmenu3');">Acteurs :</a>
<ul id="ssmenu3" class="ssmenu">
<li>
<a href="#" title="Sous-menu 1">Le bar</a> ;
</li>
<li>
<a href="#" title="Sous-menu 2">Les arbitres</a> ;
</li>
<li>
<a href="#" title="Sous-menu 3">Les bénévoles</a> ;
</li>
<li>
<a href="#" title="Sous-menu 4">Les entraineurs</a>.
</li>
</ul>
<a href="#" title="Menu 4" onmouseover="MontrerMenu('ssmenu4');" onfocus="MontrerMenu('ssmenu4');">News&Evénements :</a>
<ul id="ssmenu4" class="ssmenu">
<li>
<a href="#" title="Sous-menu 1">Les tournois</a> ;
</li>
<li>
<a href="#" title="Sous-menu 2">Les matchs</a> ;
</li>
<li>
<a href="#" title="Sous-menu 3">Fiestas</a> ;
</li>
<li>
<a href="#" title="Sous-menu 4">Autres</a>.
</li>
</ul>
<a href="#" title="Menu 5" onmouseover="MontrerMenu('ssmenu5');" onfocus="MontrerMenu('ssmenu5');">Photos :</a>
<ul id="ssmenu5" class="ssmenu">
<li>
<a href="#" title="Sous-menu 1">Album entier</a> ;
</li>
<li>
<a href="#" title="Sous-menu 2">Recherche</a>.
</li>
</ul>
<a href="#" title="Menu 6" onmouseover="MontrerMenu('ssmenu6');" onfocus="MontrerMenu('ssmenu6');">Résultats :</a>
<ul id="ssmenu6" class="ssmenu">
<li>
<a href="#" title="Sous-menu 1">Les filles</a> ;
</li>
<li>
<a href="#" title="Sous-menu 2">Les gars</a> ;
</li>
<li>
<a href="#" title="Sous-menu 3">Les petits</a>.
</li>
</ul>
<a href="#" title="Menu 7" onmouseover="CacherMenus();" onfocus="CacherMenus();">Contacts</a>
<a href="#" title="Menu 8" onmouseover="CacherMenus();" onfocus="CacherMenus();">Forum</a>
<a href="#" title="Menu 9" onmouseover="CacherMenus();" onfocus="CacherMenus();">Club House</a>
<a href="#" title="Menu 10" onmouseover="CacherMenus();" onfocus="CacherMenus();">Inscriptions</a>
</div>
<hr/>
©Tibetoine Webmaster
<img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" />
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" />
</body>
</html>

Reply

Marsh Posté le 13-04-2004 à 17:32:15

Reply

Marsh Posté le 13-04-2004 à 17:44:50

Tu pourrais te passer des class="menu" et class="ssmenu" en déclarant tes classes menu et ssmenu comme ceci :

div.m p.menu
{
...
}

div.m ul.ssmenu
{
...
}

(faut aussi adapter les classes qui en dépendent, genre les li)

Pour les images "xhtml valide" et "css valide", tu devrais les mettre sur ton serveur plutôt que de faire un lien vers celles du W3C. Ou plutôt utiliser celles dispo ici qui sont plus jolies :
http://www.gtmcknight.com/buttons/validated.php

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 13-04-2004 à 17:52:13

Yes antp,

pour les images, ce n'est pas ce qui me préoccupe le plus.

Par contre pour ce que tu dis avant, j'ai pas compris, est ce que tu peux m'expliquer ça mieux ?

EDIT: Et sinon tu en penses quoi ?

Message édité par protoinou le 13-04-2004 à 17:53:15

Reply

Marsh Posté le 13-04-2004 à 18:56:27

bah le code a l'air propre.
Ce que je voulais dire, c'est que tu répètes le class="menu" pour tous les qui sont dans div.m
Il est plus simple de dire qu'un p qui est dans div.m a un style précis.

pour mon exemple je me suis planté en fait
je voulais écrire :

div.m p
{
...
}

div.m ul
{
...
}