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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [XHTML/CSS] Demande d'avis sur cette page

protoinou

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>

Publicité

antp

Super Administrateur
Champion des excuses bidons

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

protoinou

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

antp

Super Administrateur
Champion des excuses bidons

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
{
...
}

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

protoinou

Ah ouai ok, je comprends, ouai tu as raison

J'en prends note

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[CSS] Cherche lien de menus horizontals	[VB] Clicker automatiquement sur un bouton de page web
[CSS] Problème simple de répétition verticale.	C et page web
Recuperer une page externe	Installation automatique de font (CSS 2.0)
[PHP] Probleme pour afficher un champ (bd) dans une page PHP	chargement d'un lien dans un cadre a l'ouverture de la page ???
création d'un fichier excel en html (ancre nommé en bas de page??)	[JPgraph] page blanche !
Plus de sujets relatifs à : [XHTML/CSS] Demande d'avis sur cette page

Page générée en 0.108 secondes