Mon premier design

Anonyme

27 janvier 2007 à 21:54:45

Bonsoir.

Voila j'ai fini mon premier design de site web:

http://tpecouleursfeuilles.site.voila.fr

Pour le moment je m'excuse pour les utilisataires de firefox, sa marche pas encore bien dessu je sait pas vraiment pourquoi, mais je vais regarder sa dans la soirée

Sinon j'aimerais connaitres vos critiques sur ce design, pour que je puisse m'améliorer.

MErci d'avance

orklah

27 janvier 2007 à 22:25:31

ton design est assez simple
peut etre meme trop...
revois l'affichage sous IE ton menu est trop gros
ensuite le lien vers prizee dans la banniere c'est pas top
sinon le compteur ne fait pas tres bien dans la page
sa c'est pour le design sinon tu a pas mal de problemes de code
retourne lire les cours pour voir que toutes les balises doivent etre en minuscule et passe ton code au validateur pour virer ce qui ne va pas^^

Anonyme

27 janvier 2007 à 22:35:31

Pour la simplicité je vais tenter de le faire un peu plus dur. J'aimerais par exemple mettre des bordures que j'aurais déssiné préalablement sur gimp, mais j'arrive pas vraiment a les placer aprés.

revois l'affichage sous IE ton menu est trop gros

Tu veut dire sous firefox? parce que moi je voit tout niquel sous IE.

Pour le lien pour prizee j'avais mit la banniére de sa parce que je l'avais sous la main pour me faire quelque chose a présenter au départ, et j'ai oublié de mettre le lien de mon accueil ^^.

Pour le compteur je vais tenter de le réduire et de mettre une couleur qui passe mieu.

Et enfin pour le code je vais tenter de modifier tout sa

Merci de ta réponse.

PS:pour l'affichage sous firefox j'arrive pas a ce que l'en-tête ne dépasse plus sur le corps, comment je peut faire svp?

Merci.

orklah

27 janvier 2007 à 22:59:10

nan nan je parle bien de IE:
EDIT:j'ai enlevé l'image si vous voulez voir envoyer moi un MP

Anonyme

27 janvier 2007 à 23:28:26

Ouch je vois pas sa moi, bizare. Je vois tout en ordre, t'a une idée pour résoudre le bléme?

Marcucio

28 janvier 2007 à 0:22:20

Et si tu descenderais le cadre du milieu en hauteur car je pense que c'est tout le problème.

Il faudrait que tu nous passe le CSS et le HTML de ta page

Anonyme

28 janvier 2007 à 0:27:38

<!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" xml:lang="fr" >
<head>
<title>Page d'exemple pour tester le CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="design.css" />
</head>
<body>

<div id="en_tete">
<a href="lien de l'accueil" target=_blank ><img src="http://img251.imageshack.us/img251/3158/bannierebe2.jpg" border=0 width=728 height=90 alt="Prizee : Jeux Gratuits et Cadeaux !" title="Prizee : Jeux Gratuits et Cadeaux !"></a>
<a href="mettre un lien"><img alt="Accueil" src="http://img148.imageshack.us/img148/6456/accueilvs3.jpg" border="0"></a>
<a href="mettre un lien"><img alt="Forum" src="http://img148.imageshack.us/img148/6158/forumnd0.jpg" border="0"></a>
<a href="mettre un lien"><img alt="Téléchargement" src="http://img213.imageshack.us/img213/1235/tlchargementtl9.jpg" border="0"></a>
<a href="mettre un lien"><img alt="Nous contacter" src="http://img264.imageshack.us/img264/5073/nouscontactertt7.jpg" border="0"></a>
</div>

<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

</div>

<div id="corps">
<h1>Un titre</h1>

<p>
du blabla
</p>

<h2>titre</h2>
<p>
blabla
</p>

<h2>titre</h2>
<p>
blbabla
</p>
</div>

<div id="pied_de_page">
<p>Copyright "JAKAM Corporation" 2007, tous droits réservés</p>
<script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=6/25/7047/1/2&ID=192232"></script>
</div>
</body>
</html>

/* CSS Document */

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png");
background-color:#fafad2;
}

#en_tete
{
width: 760px;
height: 100px;
background-color: #fafad2;
background-repeat: no-repeat;
margin-bottom: 10px;
text-align: center;
color:#009900;

}

#menu
{
float: left;
width: 120px;
margin-right: 10px;
margin-top: 10px;
}

.element_menu
{
background-color:#e4ffcc;
background-repeat: repeat-x;
border: 3px double #5a9d5a;
margin-bottom: 20px;
margin-left: 0px;
}

.element_menu h3
{
color:#009900;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color:#009900;
}

.element_menu a:hover
{
background-color:#e4ffcc;
color:#009900;
}

#corps
{
margin-left: 130px;
margin-top: 10px;
margin-bottom: 20px;
padding: 5px;
background-color:#e4ffcc;
color:#009900;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 3px double #5a9d5a;
}

#corps h1
{
color:#009900;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;

background-image: url("images/titre.png");
background-repeat: no-repeat;

padding-left: 30px;
color:#009900;
text-align: left;
}

#pied_de_page
{
padding: 5px;
text-align: center;
color:#009900;
background-color:#e4ffcc;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 3px double #5a9d5a;
}

Désolé c'est assé brouillon, et surement beaucoups de fautes sont présentes

Pour ce qui est du probléme d'affichage sous firefox, sa doit être réglé, perso je voit le site s'afficher normalement. Cependant maintenant je vois une marge énorme entre l'en-tête et le corps sour IE, alors qu'avant je le voyait bon ^^. Svp dites moi si l'affichage est bon chez vous?

Merci.

Marcucio

28 janvier 2007 à 0:35:55

Dans ton CSS, la balise la :

#corps
{
margin-left: 130px;
margin-top: 10px;
margin-bottom: 20px;
padding: 5px;
background-color:#e4ffcc;
color:#009900;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 3px double #5a9d5a;
}

Il faut modifier la valeur de margin-top et tu augmente cette valeur et tu teste.

Anonyme

28 janvier 2007 à 0:38:41

C'est ce que j'ai fait, sa a l'air de marcher sauf, que maintenant je vois un écart entre l'en-tête et le corps sous IE.

Baikan

28 janvier 2007 à 6:08:23

Moi c'est bon, mais vraiment je trouve qu'il est trop simple ^^"

Wbdzgnr95

28 janvier 2007 à 10:37:24

Ca va mais c'est la bannière et les boutons en feuilles que je n'aime pas.
Je pense que tu ne devrait pas mettre une vrai feuille pour tes boutons...

vodkanux

28 janvier 2007 à 10:56:56

Bonjour, je trouve ce design assez simple comme l'ont dit d'autres zéros avant moi,
mais au moins il est clair, essaye de rendre ton code valide et bonne continuation .

vodkanux

Anonyme

28 janvier 2007 à 11:14:14

Ok merci!

Bon sinon je vais tenter de voir pour les boutons et pour la banniére pour les améliorer, mais gimp et moi sa fait deux

(et j'ai pas photoshop ^^)