Bonjour,
Après quelques semaines de labeur ( et ce n'est que le commencement), voila une page modèle en XHTML + CSS:
www.rosegrenouille.com/cageq
Cette page est mon labo d'expérimentation et je pense qu'il y a peut etre des choses a revoir dans le CSS mais bon ca fonctionne tres bien hormis le fond transparent du flash qui ne plait vraiment pas a Opera.
Svp vos critiques sur le design et l'ergonomie de cette page ( le contenu est assez classique et comence par LOREM IPSUM ....ne me faites pas d'analyse la dessus
). Jouez avec la largeur de la fenetre pour mieux vous rendre compte!!!! Allez ne m'epargnez pas, je suis prêt a encaisser, c'est comme ca qu'on apprend...
EN attendant je vais en critiquer moi meme d'autres sites.
LE CSS est la
merci pour vos commentaires
Modifié par RoseGrenouille (19 Sep 2005 - 22:02)
Après quelques semaines de labeur ( et ce n'est que le commencement), voila une page modèle en XHTML + CSS:
www.rosegrenouille.com/cageq
Cette page est mon labo d'expérimentation et je pense qu'il y a peut etre des choses a revoir dans le CSS mais bon ca fonctionne tres bien hormis le fond transparent du flash qui ne plait vraiment pas a Opera.
Svp vos critiques sur le design et l'ergonomie de cette page ( le contenu est assez classique et comence par LOREM IPSUM ....ne me faites pas d'analyse la dessus
). Jouez avec la largeur de la fenetre pour mieux vous rendre compte!!!! Allez ne m'epargnez pas, je suis prêt a encaisser, c'est comme ca qu'on apprend...EN attendant je vais en critiquer moi meme d'autres sites.
LE CSS est la
/* CSS Document */
* {margin: 0; padding: 0;}
/* éléments généraux */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color:#cccccc;
margin:0;
padding:0;
}
ul {
list-style-type: none;
width:100%;
padding:0;
margin:0;
}
h1 {
font-family: "Century Gothic", Verdana, sans-serif;
font-weight:bold;
font-size:x-large;
color:#196caa;
text-decoration:none;
text-align:right;
margin-right:5px;
}
h2 {
font-family: "Century Gothic", Verdana, sans-serif;
font-weight:normal;
font-size:small;
color:#666666;
text-decoration:none;
width:400px;
text-align:right;
float:right;
margin-top:30px;
margin-right:5px;
}
h3 {
font-family: "Century Gothic", Verdana, sans-serif;
font-weight:bold;
font-size:large;
color:#196caa;
text-decoration:underline;
text-align:left;
margin-bottom:10px
}
h4 {
font-family: "Century Gothic", Verdana, sans-serif;
font-weight:normal;
font-size:medium;
color:#44a72f;
text-decoration:underline;
text-align:left;
margin-top:10px;
margin-bottom:10px;
}
/* fin des éléments généraux */
/* éléments ID */
#conteneur {
position: absolute;
width:90%;
background-image:url(IMAGES/fondvert.gif);
background-repeat:repeat-y;
margin-right:5%;
margin-left:5%;
margin-top:10px;
margin-bottom:10px;
padding:0;
border:1px solid gray;
}
#header {
background-color:white;
background-image:url(Images/Header.gif);
background-repeat:no-repeat;
background-position:left;
height:130px;
position:relative;
border-bottom-color:#999999;
border-bottom-style:solid;
border-bottom-width:1px;
}
#flash {
left:0px;
top:0px;
position:absolute;
z-index:2;
height: 130px;
}
#menuhaut {
background-color:#196caa;
background-image:url(Images/sous-header.gif);
background-repeat:no-repeat;
height:80px;
text-align:right;
position:relative;
top:0;
border-bottom:1px solid gray;
}
#gauche {
position:absolute;
left:0px;
width: 150px;
}
#centre {
background-color:#F2F4F4 ;
margin-left:150px;
padding:10px;
text-align:justify;
border-left:1px solid gray;}
#pied {
background-color:#196CAA;
background-image:url(Images/footer.gif);
background-repeat:no-repeat;
text-align:right;
padding:10px;
border-top:1px solid gray;
}
/* fin des éléments ID */
/* éléments CLASS */
.mentions a{
font-family:"century Gothic", verdana, arial, sans-serif;
font-weight:lighter;
font-size:smaller;
color:#333;
text-align:right;}
.mentions a:hover {
color:#fff;}
.menu li {
float: right;
}
.menu a {
width: 100px;
height: 15px;
display: block;
text-align: center;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
text-decoration: none;
color: #fff;
background: transparent;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:small;
}
.menu a:hover {
background: #ccc;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
color:#196caa;
}
.menu a:active {
background: gray;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
color: #fff;
}
.menugauche a {
width: 140px;
height: 15px;
display: block;
text-align: left;
text-decoration: none;
color: #333;
border-bottom: 1px solid gray;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:small;
margin-left:10px;
}
.menugauche a:hover {
background: #ccc;
border-bottom: 1px solid gray;
color:#44a72f;
}
.menugauche a:active {
background: gray;
border-bottom: 1px solid gray;
color: #fff;
}
.texte{
font-family: "Century Gothic", Verdana, sans-serif;
font-weight:normal;
font-size:small;
color:#333;
text-decoration:none;
text-align:justify;
margin-top:10px;
margin-bottom:10px;
}
.imggauche{
float:left;
margin-right:10px;
margin-top:10px;
border:1px solid gray;
width:30%;
height:30%;
min-width:120px;
}
.imgdroite{
float:right;
margin-left:10px;
margin-top:10px;
border:1px solid gray;
width:30%;
height:30%;
min-width:120px;
}
/* fin des éléments CLASS */
/* fin de ma feuille de style */merci pour vos commentaires
Modifié par RoseGrenouille (19 Sep 2005 - 22:02)
