Un coup d'oeil sur mon site

3 août 2006 à 4:41:17

J'aimerais aussi avoir l'avis d'experts car je suis assez novice en ce qui concerne le xhtml et le css. J'ai essayé de faire un design qui sort du commun, propre, centré, adapté pour les resolutions 1024 et +

J'ai pensé qu'un dégradé de bleu de l'extérieur vers l'intérieur pourrait être pas mal.

Evidemment, il ne plaira pas à ceux qui n'aiment les sites que sobres et simples.

Dites moi quoi

---> http://www.cave-a-yoyo.com

Je n'ai pas encore fait de menu, mais pour cela, il faut que je réfléchisse comment je vais le décorer, quels fonds, quelles couleurs et polices...

Je ferai ca demain

YoyoS

3 août 2006 à 16:56:18

Pas d'avis ? j'aimerais savoir si j'ai bien respecté la sémantique etc

Pour le futur menu, j'ia l'intention d'utiliser les balises de liste

KLiQ

3 août 2006 à 19:12:22

J'aime bien ton site, la banniere moin. Pour le menu a ta place je le ferrai en haut en horizontal.
Allez a plus

YoyoS

3 août 2006 à 19:38:36

J'avoue que la bannière est un peu flashy

je vais voir ce que ca donne avec le menu à gauche comme j'avais prévu, si ca va pas je me tournerai vers ton idée

YoyoS

5 août 2006 à 3:11:26

J'ai fait le menu la, je vais trouver une idée pour la bannière

Anonyme

5 août 2006 à 10:47:07

Bonjour et Bienvenue !...
ne se trouve pas au centre de la page mais en bas à gauche

il faut un fond derrière le menu
a+

YoyoS

5 août 2006 à 13:13:06

Bonjour, oui j'avais pensé à un fond, mais soit j'en fais un aussi transparent et la ca pourrait passer, mais s'il est opaque, ca va cacher le design du menu.

J'ai regardé les couleurs qui passaient sur ce fond et celle la pouvait encore passer. Faire un png transparent d'une autre couleur est une bonen idée mais le problème c'est avec IE encore une fois ... Je vais essayer en gif ptet

MKBB

5 août 2006 à 13:41:43

Alors deux choses:

- Quand on passe sur le menu avec la souris la pub en haut a tendance a clignoter par dessus la banniere (j'ai testé juste sous FF)

- Au niveau du menu toujours, quand on passe sur le mot, il s'encadre, et la puce passe en rouge : ok, mais quand tu passe juste a coté sans toucher le mot, la puce passe en rouge mais le mot s'encadre pas et le lien ne marche pas -> soit tu fais en sorte que la puce passe pas en rouge, soit tu rend le lien valide et tu encadre le mot

voilou +

Celmi

5 août 2006 à 13:49:42

C'est sympa mais je trouve que le menu n'est pas assez lisible.

YoyoS

5 août 2006 à 22:24:25

Bonsoir, je viens de refaire le code xhtml car je n'avais pas pensé à avoir le cadre de contenu qui s'agrandit en fonction du texte qu'il y avait dedans

Maintenant ca va mais j'ai un autre bug, lorsque j'écrit bcp de texte et que la boite de contenu s'agrandi et augmente en hauteur, elle sort de la balise class="global".

J'ai essayé de mettre uen valeur à la class="global" en height: 1000px; ca marche jusqu'à ce que la boite de contenu devienne trop grande et la dépasse.

J'ai essayé aussi "auto", ca marche pas et "100%" ca marche po :/

Une idée, ca pourrait m'éviter de devoir mettre une valeur à "height" pour chaque page que je crée ... ? Voici l'url de mon site, le code xhtml et le css

Merci d'avance

url: http://www.cave-a-yoyo.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenue sur le Site de la Cave A Yoyo !</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="global">
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header1"></td>
<td class="header2"></td>
<td class="header3"></td>
<td class="header4"></td>
</tr>
</table>
</div>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="nav1"></td>
<td class="nav2"></td>
<td class="nav3"></td>
<td class="nav4"></td>
<td class="nav5"></td>
<td class="nav6"></td>
<td class="nav7"></td>
   </tr>
</table>
</div>
<div id="menu">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="menu1">
<div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6%"></td>
<td width="94%">
<ul><li class="spuce"> </li>
<li class="puce"><a href="/" title="Page d'Accueil">Accueil</a></li>
<li class="puce"><a href="creations.html" title="Mes Créations Photoshop">Créations</a></li>
<li class="puce"><a href="forum.php" title="Forum de Discussion">Forum</a></li>
<li class="spuce"> </li>
<li class="puce"><a href="liens.html" title="Liens utiles">Liens</a></li>
<li class="puce"><a href="tuto.html" title="Tutoriaux">Tutoriels</a></li>
<li class="puce"><a href="aide.html" title="Aide">Aide</a></li>
<li class="spuce"> </li>
<li class="puce"><a href="infos.html" title="Infos">Infos</a></li>
</ul></td>
</tr>
</table>
</div>
   </td>
   </tr>
<tr>
<td class="menu2"></td>
</tr>
</table>
</div>
<div id="content">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="content1"></td>
<td class="content3">

<div>
   <h1>Bonjour et Bienvenue ! </h1>
<p>Vous voila donc arrivé sur un site, mais pas n'importe quel site

! </p>
<p>Il reste encore beaucoup de boulot

Mais pour le site en lui même, c'est bon

Allez bye

à tous et bonne visite dans les rubriques qui n'existent pas encore hihihhi. </p>
<p>TEST DE L'ELASTICITE DU DESIGN EN COURS ... </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Pas de bug au niveau de l'afficahge du contenu ! Chouette j'ai reussi

</p>
<p> </p>
<p>Par contre il faut trouver comment le background de la class="global" augmente sa hauteur en fonction de la hauteur du contenu

</p>
<p> </p>
<p>Qui sait ce qu'il faut faire ? </p>
</div>

   </td>
<td class="content5"></td>
</tr>
<tr>
<td class="content2"></td>
<td class="content4"></td>
<td class="content6"></td>
</tr>
</table>
</div>
<div id="footer">
   <table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="262">
<div class="partners"><div class="w3c">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict"

width="88" height="31" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss"

width="88" height="31" border="0" alt="Valid CSS!"/>
</a>
</div>
<div id="xiti"><a href="http://www.xiti.com/xiti.asp?s=263740" title="Mesurez votre audience">
<script type="text/javascript">

</script>
<object>
<noscript>
<div id="xiti-logo-noscript">
Mesure d'audience ROI frequentation par <img width="39" height="25" src="http://logv31.xiti.com/hit.xiti?

s=263740&p=page_d_accueil" alt="Analyse d'audience" /></div>
</noscript>
</object>
</a>
</div>
</div>
         </td>
   <td width="631">
<div class="pub1">
<script type="text/javascript" src="http://ads.allotraffic.com/clicstandart?id=6736"></script>
</div>
   </td>
   <td width="97"></td>
</tr>
   </table>
</div>
<div class="copyright">
<p>Copyright © cave-a-yoyo.com - Droits réservés: Yoyo <br />
Toute reproduction totale ou partielle est interdite sans l'accord des auteurs</p>
</div>

</div>
</body>
</html>

#menu {
float: left;

}
#content {
float: left;
}
#global {
width: 990px;
height: 1000px;
margin: auto;
border: 2px solid black;
background: url(images/fond_global.png) repeat;
}
body {
background-image: url(images/fond_body.png);
background-repeat: repeat;
font-family: 'Trebuchet MS', Tahoma, Verdana, 'Times New Roman', Times, serif;
}
.header1 {
height: 175px;
width: 227px;
background: url(images/header1.png) no-repeat;
}
.header2 {
height: 175px;
width: 34px;
background: url(images/header2.png) repeat-x;
}
.header3 {
width: 644px;
height: 175px;
background: url(images/header3.png) no-repeat;
}
.header4 {
width: 85px;
height: 175px;
background: url(images/header4.png) repeat-x;
}
.nav1 {
height: 43px;
width: 172px;
background: url(images/nav1.png) no-repeat;
}
.nav2 {
background-repeat: no-repeat;
height: 43px;
width: 34px;
background-image: url(images/nav2.png);
}
.nav3 {
background-repeat: repeat-x;
height: 43px;
width: 204px;
background-image: url(images/nav3.png);
}

.nav4 {
background-repeat: no-repeat;
height: 43px;
width: 31px;
background-image: url(images/nav4.png);
}
.nav5 {
background-repeat: repeat-x;
height: 43px;
width: 506px;
background-image: url(images/nav3.png);
}
.nav6 {
background-repeat: no-repeat;
height: 43px;
width: 43px;
background-image: url(images/nav5.png);
}
.content4 {
height: 33px;
width: 741px;
background: url(images/content4.png) repeat-x;
}
.content6 {
height: 33px;
width: 43px;
background: url(images/content6.png) no-repeat;
}
.content1 {
background: url(images/content1.png) repeat-y;
height: 402px;
width: 34px;
}

.content5 {
height: 449px;
width: 43px;
background: url(images/content5.png) repeat-y;
}
.content2 {
background: url(images/content2.png) repeat-y;
width: 34px;
height: 33px;
}
.content3 {
background: url(images/content3_fond.png) repeat;
height: 402px;
width: 741px;
vertical-align: top;
}
.menu1 {
background-image: url(images/menu1.png);
background-repeat: no-repeat;
height: 402px;
width: 172px;
vertical-align: middle;
}
.menu2 {
height: 33px;
width: 172px;
background: url(images/menu2.png) no-repeat;
}
#footer {
height: 80px;
width: 990px;
float: left;
}
.partners {
width: 176px;
height: 31px;
padding-bottom: 30px;
margin: auto;
}

.pub1 {
width: 489px;
margin: auto;
background: url(images/pub.png) no-repeat;
height: 80px;
padding-top: 8px;
padding-left: 11px;
}
.w3c {
height: 31px;
width: 182px;
margin: 0px auto;
}
#xiti {
width: 39px;
height: 25px;
margin: auto;
padding-top: 5px;
}

.liens {
height: 168px;
width: 416px;
}
.copyright {
color:#000000;
text-align:center;
font-size:13px;
vertical-align: middle;
width: 990px;
float: left;
}
ul {
background: url(images/fond_menu.png);
}
li a {
color: #CC0000;
font-size: 24px;
font-weight: bold;
text-decoration: none;
}
.puce a:hover {
background: url(images/fond_menu.png);
list-style: url(images/on.gif) none;
color: #CE6506;
border: 1px solid black;
}
.puce:hover {
list-style: url(images/on.gif) none;
}
.spuce {
list-style: none;
}
.puce {
list-style: url(images/off.gif) none;
}

Anonyme

5 août 2006 à 22:29:14

comme c'est une division tu peu mettre :

overflow:hidden; max-width:; max-height:;

YoyoS

5 août 2006 à 22:45:49

merci pour la fonction overflow

mais j'ai jsute modifié le global comme ca et ca fonctionne, j'ai viré la valeur du height que j'avais mis et j'ai rajouté hidden pour overflow

#global {
width: 990px;
margin: auto;
border: 2px solid black;
background: url(images/fond_global.png) repeat;
overflow: hidden;
}

et ca fonctionne 0_o
c'est quoi max-height et max-width ? car avec ou sans ca marche (IE et FF)

Anonyme

5 août 2006 à 22:55:45

c'est pour les divs, c'est comme son nom l'indique une hauteur ou une largeur maximum, utile pour la gestion des sites extensibles

YoyoS

5 août 2006 à 23:14:52

a oui

tu n'aurais pas un tuto la dessus ? si je me souviens bien, Mateo nous a fait une demo avec un site qui n'etait pas extensible. Au debut je voulais faire mon site extensible vu qu'il a toutes les images répétées pour le faire mais je ne savais pas comment faire.

Si je trouve comment je teste direct sur un nouveau site

Anonyme

5 août 2006 à 23:24:09

http://fr.selfhtml.org/index.htm
il y a un sommaire de référence CSS très bien expliqué

Anonyme

6 août 2006 à 0:07:28

lu,
Je ne suis pas du tout ton site il est encore en construction ?
Ou alor c'est moi car tout les liens sont morts.

Anonyme

6 août 2006 à 0:10:59

?????
Quelle lien, j'ai aucun lien mort... enfin je croit.

Le seul truc qui ne risque pas de fonctionner c'est le menu enfin je sé pas j'ai repris le script originale et modifier le mien en conséquence donc si j'ai bien fait il devrait fonctionner normalement. (avec ie)

YoyoS

6 août 2006 à 1:22:15

je m'occupe du graphisme la pour l'instant

après je crois qu'il n'y a pas besoin d'aide pour creer le contenu

Et de toute manière je dois finir ma première page complètement avant de la dupliquer et de creer les différentes pages de mon site

En bref, oui il est en construction, mais presque terminé puisque tout fonctionne, il reste juste à modifier quelques images, le code semble bon puisque je n'ai pas eu de critiques, on va bien voir

Anonyme

6 août 2006 à 9:46:39

si sur ton code deux avertissement pour la même chose :

<div id="xiti-logo-noscript">
Mesure d'audience ROI frequentation par <img width="39" height="25" src="http://logv31.xiti.com/hit.xiti?

s=263740&p=page_d_accueil" alt="Analyse d'audience" /></div>

à remplacer par :

<div id="xiti-logo-noscript">
<p>Mesure d'audience ROI frequentation par <img width="39" height="25" src="http://logv31.xiti.com/hit.xiti?s=263740&p=page_d_accueil" alt="Analyse d'audience" /></p></div>

(je croit que les <p> ne sont pas obligatoires)

YoyoS

6 août 2006 à 16:14:47

eu non, j'ai rajouté la balise <p> et ca a fait descendre le truc, donc je l'enlève

Et puis ca passe dans le validateur donc c bon

J'ai refait le fond de mon menu la, les liens ressortent bien maintenant !

-----

j'avais testé sur l'id="xiti" mais j'avias pas vu qu'il y en avais un autre à l'intérieur du script même. Ce script vient directement de xiti et il est certifié xhtml 1.0 strict

J'ai quand même rajouté les <p></p> pour la forme

YoyoS

18 août 2006 à 3:42:52

Voila il n'y a plus de liens mort et j'ai regardé dans l'ensemble mon site. Quelque chose d'importat à dire avant que je m'y mette et que je recopie à grande échelle mes pages ?

C'est toujours embettant de devoir modifier quelquechose dnas le code html lorsque l'on a bcpbcp de pages

Si vous avez encore des critiques, c'est le moment

Little

18 août 2006 à 5:23:55

la bannière fit pas du tout avec le reste du design, revoit les couleurs , et les dégradés c'est beau quand on le voit pas trop

YoyoS

18 août 2006 à 5:28:31

oui la bannière peut etre à changer, mais ca ce n'est qu'une image, je l'ai faite à la va vite

tellement j'ai bossé sur la charpente :D. C'est vrai que le dégradé de la bannère est flashant

YoyoS

8 octobre 2006 à 22:36:46

hop. Je viens de refaire le header du site et du forum, si vous voulez donner votre avis

Vive la commande recherche recemment ajoutée !!! :D:D:D

rabs

9 octobre 2006 à 5:38:22

Le logo et la bannière semble être de style cartoon tandis que le reste du site est morne (je fais référence au bleu et aux encadrés), qui ne s'agence pas trop bien.
Le menu convient encore moins car il est ni cartoon, ni fade.
N'oubli pas que les boutons n'ont pas besoin d'être giganteste pour être vue et lisible.
Au fait, tes images sont libre de droit ? Car elles me font penser à Hitman...
Pour les pubs, google et tout... cela c'est pas la priorité de ton site, l'idéal serait de les mettre au bas.

Voilà mon opinion, sinon ça semble bien.

YoyoS

9 octobre 2006 à 6:34:48

j'ai utilisé 2images d'hitman c'est tout

Et non je ne sais pas s'il y a des droits dessus mais ce n'est pas comme si c'était un site spécialisé en fonds d'écran ... De plus il n'y avait pas de copyright sur les images mêmes. Et pour la bannière l'effet cartoon n'était pas voulu, je verrai si je peux encore la changer :p. Merci pour avoir donné ton avis