[HTML/CSS/Jevascript] Validation d'un site agréée Hache&Fer

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/CSS/Jevascript] Validation d'un site agréée Hache&Fer

godbout

Génial.

Hello !

J'ai pas besoin d'une aide sur un point précis, mais plutôt d'une espèce de "validation" globale de ce que j'ai fait jusqu'à présent.
J'ai donc fait un site en html/css, il y a sûrement du code qui peut être faux, à éviter, à remplacer, à améliorer, vu que c'est la première fois que je touche à ça

Donc si vous pouviez en gros me dire où ça chie, ou j'pourrais faire mieux (foutre une classe à la place d'un identifiant unique, regrouper des classes, changer une propriété, etc...) ce serait cool [:super chinois]

Pour le site c'est là : http://godbout.free.fr

Pour le code html :

Code :

<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>L'Exode HachKaïen :-)</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="page">
<a href="http://godbout.free.fr/index.html" class="headband"></a>
<div id="column1">
<div class="menu">
<h2>Catégories</h2>
<ul>
<li><a href="#">Site</a></li>
<li><a href="#">Musique</a></li>
<li><a href="#">Cuisine</a></li>
<li><a href="#">Voyage</a></li>
</ul>
</div>
</div>
<div id="share">
<h2>09 Mars 2006</h2>
<h3>Ma lettre préférée</h3>
<p>J'aime le zed.</p>
<div class="signature">00:35 - Ecrit par Guillaume dans <a href="#">Site</a></div>
<div class="comment"><a href="#">2 commentaire(s)</a></div>
<h2>08 Mars 2006</h2>
<h3>Toujours le problème de colonne</h3>
<p>C'est pas très esthétique ce problème de colonne. Va falloir trouver un bon moyen de régler ça.</p>
<div class="signature">18:47 - Ecrit par Guillaume dans <a href="#">Site</a></div>
<div class="comment"><a href="#">0 commentaire(s)</a></div>
<h2>07 Mars 2006</h2>
<h3>Ca commence à prendre forme</h3>
<p>C'est quand même pas trop tôt. Ca faitsait un bout de temps que j'étais sur ce truc, alors faudrait quand meme qu'au final ça donne un truc potable</p>
<p>Brec c'est cool</p>
<div class="signature">18:47 - Ecrit par Guillaume dans <a href="#">Site</a></div>
<div class="comment"><a href="#">3 commentaire(s)</a></div>
<h2>06 Mars 2006</h2>
<h3>Comment faire une bonne soupe</h3>
<p>Salut les enfants comment-allez vous?<br \>Aujourd'hui on va apprendre à faire une bonne soupe aux patates!</p>
<div class="signature">18:43 - Ecrit par Guillaume dans <a href="#">Cuisine</a></div>
<div class="comment"><a href="#">1 commentaire(s)</a></div>
</div>
<div id="column2">
<div class="menu">
<h2>Partages récents</h2>
<ul>
<li>
<a href="#">Comment faire une bonne soupe</a>
</li>
<li>
<a href="#">Ca commence à prendre forme</a>
</li>
</ul>
</div>
<div class="menu">
<h2>Commentaires récents</h2>
<ul>
<li>
<a href="#">C'est ou la recette ? par Guillaume</a>
</li>
<li>
<a href="#">Pas bon par Papa</a>
</li>
<li>
<a href="#">J'ai faim par Moi</a>
</li>
</ul>
</div>
<div class="menu">
<h2>Archives</h2>
<ul>
<li>
<a href="#">Mars 2006</a>
</li>
<li>
<a href="#">Février 2006</a>
</li>
<li>
<a href="#">Janvier 2006</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Pour le css :

Code :

/*
Balises par défaut
*/
body
{
color:#1F1824;
background-color:#EEE5F9;
text-align:center;
margin:0;
margin-bottom:20px;
padding:0;
width:100%;
height:100%;
}
/*
Eléments de mise en page
*/
#page
{
position:relative;
width:780px;
height:100%;
margin-left:auto;
margin-right:auto;
border:1px solid #DCD5E4;
/*border:thin solid orange;*/
}
a.headband
{
background-color:#725693;
width:100%;
height:150px;
background:url(images/headband.jpg) no-repeat fixed;
display:block;
}
#column1
{
float:left;
width:140px;
height:100%;
text-align:left;
background-color:#725693;
/*border:thin solid red;*/
}
#column2
{
float:right;
width:140px;
/*height:100%;*/
text-align:left;
background-color:#C7B4DD;
/*border:thin solid yellow;*/
}
#share
{
float:left;
text-align:left;
width:430px;
padding:0px 30px 35px 20px;
height:100%;
background-color:#EEE5F9;
font-family:Verdana;
font-size:12px;
font-weight:normal;
/*border:thin solid green;*/
}
#share h2
{
font-size:16px;
font-weight:bolder;
padding-top:15px;
padding-bottom:6px;
border-bottom-style:solid;
border-bottom-width:1px;
}
#share h3
{
font-size:14px;
font-weight:bolder;
}
div.signature, div.comment
{
font-size:x-small;
}
div.comment
{
text-align:right;
padding-bottom:15px;
border-bottom-style:dashed;
border-bottom-width:1px;
}
div.menu
{
float:left;
width:100%;
padding:20px 5px 0 5px;
margin-bottom:5px;
/*border:thin solid black;*/
}
div.menu h2
{
font-family:Verdana;
font-size:12px;
padding-bottom:5px;
border-bottom-style:solid;
border-bottom-width:1px;
}
div.menu ul
{
list-style-type:none;
font-family:Verdana;
font-size:x-small;
margin-left:5px;
margin-top:-5px;
}
div.menu ul li
{
margin-top:5px;
}
a
{
color:#1F1824;
text-decoration:none;
}
#column1 a:hover, #column2 a:hover, #share a:hover
{
text-decoration:underline;
}

EDIT: J'ai pas géré les caractères spéciaux en html pour l'instant, ce sera fait en php. Pour ce qui est du css, j'me suis aidé des exemples de Gatsu35 (merci bcp [:super chinois] ).

Message édité par godbout le 09-03-2006 à 20:51:46

Publicité

xtof_83

Freeride Spirit

tu as un <br \>

qui devrait être <br/>

Message cité 3 fois

kadreg

profil: Utilisateur

c'est quoi l'interet de ton #page ? il est équivalent à body.

---------------
brisez les rêves des gens, il en restera toujours quelque chose... -- laissez moi troller sur discu !

xtof_83

Freeride Spirit

ça permet de pouvoir réduire ou agrandir l'affichage de son site...

dire si il veux en 100%, 800px etc....

EDIT: mais c'est vrai qu'on peux sans doute styler le body...mais bon si tu met le body en 800px, va y avoir quoi autour...le vide sidéral :pt1cable:

Message édité par xtof_83 le 10-03-2006 à 00:24:16

kadreg

profil: Utilisateur

Ah, ok

---------------
brisez les rêves des gens, il en restera toujours quelque chose... -- laissez moi troller sur discu !

gatsu35

Blablaté par Harko

nan en fait le body agit comme un élément (un DIV pour simplifier)
le bestion tu peux lui donner les dimensions que tu veux.
Si tu lui fous 800px de large, ben derrière c'est pas le vide sidéral que tu as mais HTML auquel tu peux coller une image de fond ou bien une couleur de fond.

Mais moi aussi j'englobe mon site d'un div #page car sous IE5.5 ca foire tout l'affichage (ce con ne reconnait pas le body en tant qu'élément stylable)

godbout

Génial.

xtof_83 a écrit :

tu as un <br \>

qui devrait être <br/>

Merci [:super chinois]

C'est pas catastrophique alors s'il n'y a que ça comme remarques pour le moment

gatsu35

Blablaté par Harko

Ca caca

Code :

<div id="column2">
<div class="menu">
<h2>Partages récents</h2>
<ul>
<li>
<a href="#">Comment faire une bonne soupe</a>
</li>
<li>
<a href="#">Ca commence à prendre forme</a>
</li>
</ul>
</div>
<div class="menu">
<h2>Commentaires récents</h2>
<ul>
<li>
<a href="#">C'est ou la recette ? par Guillaume</a>
</li>
<li>
<a href="#">Pas bon par Papa</a>
</li>
<li>
<a href="#">J'ai faim par Moi</a>
</li>
</ul>
</div>
<div class="menu">
<h2>Archives</h2>
<ul>
<li>  
<a href="#">Mars 2006</a>
</li>
<li>
<a href="#">Février 2006</a>
</li>
<li>
<a href="#">Janvier 2006</a>
</li>
</ul>
</div>
</div>

Ca mieux, beaucoup mieux

Code :

<dl id="menu2">
    <dt>Partages récents</dt>
        <dd><a href="#">Comment faire une bonne soupe</a></dd>
        <dd><a href="#">Ca commence à prendre forme</a></dd>
    <dt>Commentaires récents</dt>
        <dd><a href="#">C'est ou la recette ? par Guillaume</a></dd>
        <dd><a href="#">Pas bon par Papa</a></dd>
        <dd><a href="#">J'ai faim par Moi</a></dd>
    <dt>Archives</dt>
        <dd><a href="#">Mars 2006</a></dd>
        <dd><a href="#">Février 2006</a></dd>
        <dd><a href="#">Janvier 2006</a></dd>
</dl>

Message cité 3 fois
Message édité par gatsu35 le 10-03-2006 à 10:09:27

godbout

Génial.

Ah ben zut alors, j'avais choppé ça sur un système de blog justement
Ok merci, je changerai :jap:

FlorentG

Unité de Masse

xtof_83 a écrit :

tu as un <br \>

qui devrait être <br/>

Même pas, ça doit être <br> parce qu'il a un doctype HTML 4

Message cité 2 fois

Publicité

xtof_83

Freeride Spirit

FlorentG a écrit :

Même pas, ça doit être <br> parce qu'il a un doctype HTML 4

:ange: Même pas regardé....

godbout

Génial.

xtof_83 a écrit :

tu as un <br \>

qui devrait être <br/>

FlorentG a écrit :

Même pas, ça doit être <br> parce qu'il a un doctype HTML 4

Plusieurs fois j'ai lu qu'il valait mieux utiliser le <br /> plutôt que <br> afin d'être plus proche des normes XHTML. Vous en pensez quoi ?

Message cité 1 fois

godbout

Génial.

gatsu35 a écrit :

Ca mieux, beaucoup mieux

Code :

<dl id="menu2">
    <dt>Partages récents</dt>
        <dd><a href="#">Comment faire une bonne soupe</a></dd>
        <dd><a href="#">Ca commence à prendre forme</a></dd>
    <dt>Commentaires récents</dt>
        <dd><a href="#">C'est ou la recette ? par Guillaume</a></dd>
        <dd><a href="#">Pas bon par Papa</a></dd>
        <dd><a href="#">J'ai faim par Moi</a></dd>
    <dt>Archives</dt>
        <dd><a href="#">Mars 2006</a></dd>
        <dd><a href="#">Février 2006</a></dd>
        <dd><a href="#">Janvier 2006</a></dd>
</dl>

J'ai besoin de pouvoir bouger les menus comme je veux, est-ce que c'est toujours aussi propre de faire :

Code :

<dl id="menu2">
    <dt>Partages récents</dt>
        <dd><a href="#">Comment faire une bonne soupe</a></dd>
        <dd><a href="#">Ca commence à prendre forme</a></dd>
</dl>
<dl id="menu2">
    <dt>Commentaires récents</dt>
        <dd><a href="#">C'est ou la recette ? par Guillaume</a></dd>
        <dd><a href="#">Pas bon par Papa</a></dd>
        <dd><a href="#">J'ai faim par Moi</a></dd>
</dl>
<dl id="menu2">
    <dt>Archives</dt>
        <dd><a href="#">Mars 2006</a></dd>
        <dd><a href="#">Février 2006</a></dd>
        <dd><a href="#">Janvier 2006</a></dd>
</dl>

xtof_83

Freeride Spirit

godbout a écrit :

Plusieurs fois j'ai lu qu'il valait mieux utiliser le <br /> plutôt que <br> afin d'être plus proche des normes XHTML. Vous en pensez quoi ?

On en pense

que <br> c'est pour HTML

et <br /> pour le XHTML

Voilà, il n'y a pas a penser, c'est les normes

godbout

Génial.

Bon, du coup j'ai gardé <br />, vous m'en voulez pas hein ?

Sinon j'ai changé les menu avec les dl/dt/dd. J'ai pas réussi à avoir exactement le même layout mais j'en suis pas loin, bon on va dire que ça va.

Y a d'autres gros problèmes ou c'est potable ? Genre dans la partie du milieu avec les titres, les div, etc... ?

xtof_83

Freeride Spirit

Met un vrai Doctype

et dans ton code tu as oublié un </a>

godbout

Génial.

Bon, ok, mais j'suis étonné qu'il n'y ait pas des trucs plus graves quoi

gatsu35

Blablaté par Harko

gobout dans ton cas pour les menu j'aurai alors utilisé <ul><li> imbriqués
ensuite pour les bouger avec un peu de Javascript et basta
sache qu'un id c'est unique dans une page

godbout

Génial.

Tu rigoles ?
J'ai changé tous les <ul><li> en <dt><dd> comme tu le m'as dit

Oui, j'avais compris le principe [:ocube]
class pour le réutilisable, id pour les trucs uniques. T'as vu des problèmes de ce point de vue là ?

gatsu35

Blablaté par Harko

uhmmm l'id ca sert à pleins pleins de choses

identifiant pour les CSS
ancre pour les adresse type pagE.html#ancre
identifiant pour le javascript (document.getElementById)
identifiant sur un input pour l'associé à un label

après je sèche

godbout

Génial.

Bon, cool [:ocube]
J'ai fait une autre page d'admin, que vous ne verrez pas
J'espère que mon html/css est toujours assez propre
Maintenant faut que j'attaque le php pour faire tout ça dynamiquement [:xfred4]

godbout

Génial.

J'ai installé Firefox pour voir un peu ce que ça donnait, y a tout qui est de travers :??:
J'capte vraiment pas, je change un truc y a tout qui fout le camp dans ie ou dans Firefoxe, et ça se ressemble pas du tout. Un truc par super à droite dans Firefox et tout à gauche dans ie, etc... [:mlc]

Message édité par godbout le 12-05-2006 à 22:44:58

kadreg

profil: Utilisateur

valide un peu ta CSS, une ligne en erreur de syntaxe est ignorée sous firefox, pas forcément sous IE

Message cité 1 fois

---------------
brisez les rêves des gens, il en restera toujours quelque chose... -- laissez moi troller sur discu !

Shinuza

This is unexecpected

gatsu35 a écrit :

Ca caca
[code=html]

+1 :jap:

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

godbout

Génial.

kadreg a écrit :

valide un peu ta CSS, une ligne en erreur de syntaxe est ignorée sous firefox, pas forcément sous IE

Ca a l'air assez ok. Juste quelques "encouragements"
Apparemment ça vient des box qui sont pas gérées pareil sous ie et firefox, mais ça me fout un sacré bordel
Par exemple j'ai une colonne dans laquelle je tire un trait de 100% de la taille de la colonne, puis je fais un paddind à gauche et à droite. Sous ie nickel, sous firefox, le padding est seulement à gauche, alors qu'à droite ça sort même de la colonne

newneo2001

Code :

body
{
color:#1F1824;
background-color:#EEE5F9;
text-align:center;
margin:0;
margin-bottom:20px;
padding:0;
width:100%;
height:100%;
}

pas bon ton 2x margin car là tu définis 2x ton margin-bottom. Fais plutot

Code :

margin: 0 0 20px;

et tu supprimes ta ligne margin-bottom comme ca

++

---------------
N'oubliez pas de mettre [RESOLU] dans le titre quand c'est fini - Pour poster vos sources : http://paste.clicksources.com/

godbout

Génial.

Ah, ouais, merci, cool.

mIRROR

Chevreuillobolchévik

gatsu35 a écrit :

Ca caca

Code :

blabla

Ca mieux, beaucoup mieux

Code :

encoreplusdeblabla

ah ?

gatsu35

Blablaté par Harko

Ben oui tu reduis le chteumeuleu et les classes en te basant juste sur l'élément
de plus moi j'aime bien dl dt dd
même si sémantiquement parlant le bestiau est détourné au profit d'un menu

Message cité 1 fois

Shinuza

This is unexecpected

gatsu35 a écrit :

Ben oui tu reduis le chteumeuleu et les classes en te basant juste sur l'élément
de plus moi j'aime bien dl dt dd
même si sémantiquement parlant le bestiau est détourné au profit d'un menu

+1
C'est quand même beaucoup plus simple pour la maintenance, et ça permet de créer des sections même si le <dt> n'est pas visible.

C'est plus léger que les listes en cascade.

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

mIRROR

Chevreuillobolchévik

je suis d accord dans le fond mais je fais plus allusion a l accessibilite qu a la semantique
c est peut etre parce que je connais quelqu un qui navigue sous lynx

Shinuza

This is unexecpected

Niveau accessibilité c'est surement mieux que niveau sémantique, je teste mes sites avec un lecteur d'écran alors j'ai eu l'occasion de tester ^^

Message cité 1 fois

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

godbout

Génial.

Arrêtez, vous me faites peur [:god]

Message édité par godbout le 16-05-2006 à 09:27:17

mIRROR

Chevreuillobolchévik

Shinuza a écrit :

Niveau accessibilité c'est surement mieux que niveau sémantique, je teste mes sites avec un lecteur d'écran alors j'ai eu l'occasion de tester ^^

toutes mes confuses :sweat:

godbout

Génial.

Dites moi que c'est pas vrai :ouch:
Je règle mes pbs avec Firefox, je fais un test de commentaire, et tout à coup mes apostrophes sont précédées d'un antislash, alors que ça fait 4 mois que bosse sur free et que j'ai jamais eu de pb. Ils auraient pu changer l'option du magic quote eux mêmes comme ça ? :??:

Bon, ça marchait "normalement" jusqu'au 11 mai, j'ai rien changé en ce qui concerne les escape_string, mais ça marche plus, super
Alors qu'apparemment le magic_quote_gpc a toujours été activé sur free :lol: :cry:

J'demande pas une solution, j'vais trouver quelque chose, mais juste une explication, j'comprends rien :cry:

Message cité 1 fois
Message édité par godbout le 16-05-2006 à 23:31:34

Shinuza

This is unexecpected

godbout a écrit :

Il faut que tu traites la chaine de texte à la main avec stripslashes();

Il me semble qu'il est recommandé de le faire avant l'appel des données dans la page dynamique.

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

godbout

Génial.

Merci ouais, j'avais trouvé [:super chinois]
Ce qui m'inquiète c'est que je comprends pas pourquoi ça déconne depuis apparemment 5 jours alors que j'ai rien changé de ce côté là

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML/CSS/Jevascript] Validation d'un site agréée Hache&Fer

Sujets relatifs
[HTML] Gif animé qui ne bouge pas	Faciliter les mise à jours de mon site
Chat + Video par webcam sur un site, c'est possible ?	Un site qui vaut le détour ?
Pb Php site perso	Site/album de photo familial
mail en html	Pb: telechargement plugin java en html lors du lancement d'une applet
Fermer une balise en HTML	Mettre une question sur mon site
Plus de sujets relatifs à : [HTML/CSS/Jevascript] Validation d'un site agréée Hache&Fer

Page générée en 0.099 secondes