Quels améloiration pour mon site?

13 février 2006 à 21:51:32

Bonsoir,

Voilà, je fait un site pour un club de Gym, dans le cadre d'un exercice scolaire faisait l'objet d'une soutenance.
On nous a demandé de créer un site pour ce club de gym, avec une partie administration.
L'administrateur pourra modifié le contenu des pages et ajouter des sous administrateur via une interface web. Pour cela nous devons utiliser le language PHP, que nous avons pas appris, donc tout à apprendre...

Enfin pour le moment que nous nous trouvons dans la partie xhtml CSS, voilà je demande votre avis sur cette page.. (sachant que les critère seront certainement, la programmation et ensuite le design). Si cela ne tiendrais cas moi, j'aurais tout fait en flash!

http://wareswebsite.free.fr/lecorff/index.php

A vos crayon!

merci.

PS: Le titre est ammené à evoluer.
(la partie CSS sera une feuille de style CSS indépendante quand j'aurais fini la prmeier page)

Ziir

13 février 2006 à 21:53:31

L'URL ne serait pas de refus :-°

chucky

14 février 2006 à 1:23:39

déjà c'est beaucoup trop vert ... essaye de varier les couleurs, 2 couleurs dominantes minimum c'est bien

et la typographie !!! le texte est limite désagréable à lire ..., réduit la taille à 11-12 px, choisis une police, met en valeur tes titres autrement que par le fait de les mettre en gars ( des puces, ou les souligner ... )

essayes d'arrondir tout les cadres, la c'est un peu trop carré
et perso je trouve que l'association blan vert rouge, dans ton menu est pas tiptop ...

voilà @++

rybus

14 février 2006 à 7:38:57

Salut,
Pendant que j'y suis, je rajoute que le mieux c'est de poster sur le SDZ des travaux finis !!
Pas des travaux en cours de construction !!
Les profs demandent pas les copies au milleu du devoir pour voir et mettre une note !

Enfin bon, vous fêtes ce que vous voulez mais si vous ne montrez pas un traval fini, comment voulez vous jugez si les 3/4 des trucs restent à faire !
Enfin voilà quoi, ton site n'est pas fini et est loin de l'être, tu as beacoup de travail à faire. Reviens montrer un travail fini !

J'allais oublier, quand on demande des amélioration, c'est pour du travail fini.
Sur ce, bonne journée et bonne St Valentin.

scruffy

14 février 2006 à 11:39:24

Citation : chucky

déjà c'est beaucoup trop vert ... essaye de varier les couleurs, 2 couleurs dominantes minimum c'est bien

et la typographie !!! le texte est limite désagréable à lire ..., réduit la taille à 11-12 px, choisis une police, met en valeur tes titres autrement que par le fait de les mettre en gars ( des puces, ou les souligner ... )

essayes d'arrondir tout les cadres, la c'est un peu trop carré
et perso je trouve que l'association blan vert rouge, dans ton menu est pas tiptop ...

voilà @++

Pour les couleur, j'ai une certaine contrainte du à la charte graphique. Ce sont les couleur du club, donc utiliser d'autre couleur, cela n'est pas interdit, mais c'est loin d'être évident.

En ce qui concerne les titres, je suis d'accord, je devrais les améloirer un peu, même si ici, c'est n'est qu'un texte bidonc.

Pour la typo, faut que je fasse des essais

Arrondire les cadres.... (je sais pas)
Les couleur des menu, je pense que je vais arondire la bande rouge ,-/

voilà

Anonyme

14 février 2006 à 14:14:00

Salut,

Je suppose que tu utilise mozilla firefox....car avec internet explorer, ton menu est à moitié caché derrière ton corps

Et oui les joies d'internet explorer

scruffy

14 février 2006 à 15:55:03

Citation : Zandramas

Salut,

Je suppose que tu utilise mozilla firefox....car avec internet explorer, ton menu est à moitié caché derrière ton corps

Et oui les joies d'internet explorer

arf, mais c'est vrai en plus! Je savais que des fois il y avait de leger décallage, mais à ce point!
On comprends mal les gens qui continue a utilisé explorer

Comment puis-je corriger cela?!
merci

rybus

14 février 2006 à 17:35:46

Citation : scruffy

On comprends mal les gens qui continue a utilisé explorer

Ils ne conaissent pas Firefox tout simplement.

Anonyme

14 février 2006 à 18:06:20

Personellement , je me sert des 2 en meme temps, parfois ca permet des comparaisons intéréssantes

scruffy

14 février 2006 à 23:27:21

j'ai un gros problème sous Explorer.
Deja le corp et dans le titre pour la page index alors que pour les autres pages pas de problème (même CSS pourtant)

Mais ce qui me chagrine le plus c'est que mon menu sous explorer ne marche pas! Les liens ne sont pas cliquables, ce qui est un peu embetant si l'on souhaite naviguer!

D'ou cela petit-il venir?

http://wareswebsite.free.fr/lecorff/index.php
http://wareswebsite.free.fr/lecorff/entrainements.php
http://wareswebsite.free.fr/lecorff/bureau.php

Anonyme

15 février 2006 à 13:09:13

Tu devrais donner le code parce que ce problème à l'air vraiment bizzare o_O

>>>>>> html + css

scruffy

15 février 2006 à 13:33:40

Citation : Zandramas

Tu devrais donner le code parce que ce problème à l'air vraiment bizzare >>>>>> html + css

J'ai testé sous MacOS, sous safari, pas de problème.
Sous explorer 5.2 (lol) bizarrement le site ne bug quasiment pas et le menu marche normalement!

Page index.php

<!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>Club de gymnastique artistique de Vineuil</title>

<link rel="stylesheet" href="main.css" type="text/css">
<style type="text/css">
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc */
}

caption /* Titre du tableau */
{
margin: auto; /* Centre le titre du tableau */
font-family: Arial, Times, "Times New Roman", serif;
text-align: left;
font-size: 0.2em;
color: #009900;
margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
}

table /* Le tableau en lui-même */
{
margin-top: -30px;
border: 0px; /* Bordure du tableau */
border-collapse: collapse; /* Colle les bordures entre elles */
}

th /* Les cellules d'en-tête */
{
color: white;
font-size: 14px;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
text-align: left;
}

td /* Les cellules normales */
{
border: 0px;
font-family: Times, "Times New Roman", serif;
text-align: left;
padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}
</style>

</head>

<body>
<div id="en_tete">

</div>

<div id="menu">

<div class="element_menu"> 
<h3> Information</h3>
<ul>
<li><a href="bureau.php">Le bureau</a></li>
<li><a href="entrainements.php">Les entrainements</a></li>
<li><a href="equipes.php">Les équipes</a></li>
   <li><a href="agres.php">Les agrès</a></li>
</ul>
</div>
<div class="element_menu"> 
      <h3> Compétitions</h3>
<ul>
   <li><a href="calendrier.php">Le calendrier</a></li>
<li><a href="deroulement.php">Le déroulement</a></li>
<li><a href="palmaresduclub.php">Palmarès du club</a></li>
</ul>
</div>
</div>
<div id="corps">
<caption></caption>
<table>
      <tr>
<th width="300"><h2>Voilà mon super site!</h2>
<p class="Style1">Bienvenue sur mon super site !</p>
<p><span class="Style1">Je sais pas vous, mais moi je crois que l'on devrais faire un concour du site le plus moche de la promo. Je pense que mon site devrait être plutot bien placé, maglré sont manque de finition!</span> <br />
</p></th>
<th width="276"><p align="right">
<br />
<img src="images/g1.jpg" alt="Photo G1"width="274" height="246" border="1px solid black" /></p></th>
</tr>

<tr>
<td colspan="2"><h2>Pourquoi un site aussi moche ?</h2>
<p>Vraiment une question utile! J'emmet 2 explications. Premièrement, Monsieur Lecorff nous demande de faire un site, et cette exercice concerne plus la programmation du site que du design en lui même. Pour l'instant cela ne parait pas mais il ya beaucoup de programmation derrière (XHTML, CSS, PHP, MySQL, XML), qui n'a pas été encore inseré (notament la partie administration). Ce n'est pas pour autant que le site est terminé, loin de là! Deuxièment je ne vous le dirais pas, je me le reserve pour ma soutenance!!! </p>

<h2>Pourquoi le webmaster ne sait-il pas écrire ?</h2>
<p>Pas beaucoup d'explication à ce sujet, C'est surrement un bouzeux, comme on en fait maintenant, un bon bouzeux du Berry!</p></td>
</tr>
<tr>
<td colspan="2"> <h2>L'auteur</h2>

<?php echo "(CE bout de texte à été écrit en PHP) ATTENTION ! L'auteur décline toute responsabilité contre d'eventuelles renvoies spontannée (aussi appelé vomitos) à la suite du visionnage de ce site."; ?></td>
</tr>
</table>

</div>

<div id="admin"><a href="login.htm" class="element_admin">Administration</a> | Copyright "Club de gymnastique artistique de Vineuil" 2006, tous droits réservés | <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwareswebsite.free.fr%2Flecorff%2Findex.php"><img src="w3cvalidationxhtml.jpg" width="80" height="15" border="0" /> </a><a href=" http://jigsaw.w3.org/css-validator/validator?uri=http://wareswebsite.free.fr/lecorff/index.php"><img src="w3cValidationcss.jpg" width="80" height="15" border="0" /></a></div>

</body>
</html>

CSS

/* CSS Document */

<style type="text/css">
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc */
}
#en_tete
{
width: 759px;
height: 121px;
background-image: url("images/en_tete.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
}
/* Le menu */

#menu
{
float: left; /* Le menu flottera à gauche */
width: 140px; /* Très important : donner une taille au menu */
margin-top: -20px;
}
.element_menu
{
background-color: #626262;
background-image: url("images/menu.gif");

border: 1px solid black;

margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
/* Quelques effets sur les menus */

.element_menu h3 /* Tous les titres de menus */
{
color: #050505;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: Left;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #FFFFFF;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
color: #E22541;
}

#admin
{

width: 760px; /* Très important : donner une taille au menu */
background-color: #FFFFFF;
border: 1px solid black;
margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
text-align: center;
font-family: "Times New Roman", Times, serif;
}
/* Le corps de la page */

#corps
{
margin-left: 150px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
margin-top: -20px;
padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #FFFFFF;
background-image: url("images/corps.png");
background-repeat: repeat; /* Une petite image de fond qui se répètera horizontalement en haut */
text-align: left;
border: 1px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps h1 /* Tous les titres h1 du corps */
{
color: #FFFFFF;
text-align: left;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

}

#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;
padding-left: 30px;
color: #FFFFFF;
text-align: left;
background-image: url("images/pucet1.png");
background-repeat: no-repeat;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{

text-align: center;
color: #FFFFFF;
background-color: #FFFFFF;
width: 600px; /* Très important : donner une taille au menu */
border: 0px solid black;
float: right; /* Le menu flottera à gauche */
margin-top: -20px;
}
.Style1 {font-size: 10}
</style>

Anonyme

15 février 2006 à 13:48:00

Je pense avoir trouvé pourquoi ton corp est sur la banniere

Citation : Scruffy

#en_tete
{
width: 759px;
height: 121px;
background-image: url("images/en_tete.gif");
background-repeat: no-repeat;
margin-bottom: 10px; marge de 10 pixels vers le bas
}

Citation : scruffy

#corps
{
margin-left: 150px;
margin-bottom: 10px;
margin-top: -20px; et la une marge négative de -20px vers le haut
}

scruffy

15 février 2006 à 13:57:24

j'ai regardé en rectifiant voir ce que cela donne.
Effectivement le corp ne par pas dans le titre, mais en revenche le cadre déconne en bas, et ie bug quand je scroll en bas et que je remonte cela ma manger le fond du corp formant une bande grise

Ziir

15 février 2006 à 22:43:00

http://www.freegaia.com est ton ami

Cherches y des puces et des images de fond par exemple .

scruffy

16 février 2006 à 19:13:52

Le menu déconne encore QUE sur a page index.php.

(sinon pour les couleur, je viens de voir le site a partir d'un autre ordinateur, c'est mon portable qui a tendance à noircir les couleur!!

C'est vrai que le vert est bien moche!