1er site CSS

[Guest kaporal-7]

Bon et ben finalement je m'en sors pas si mal que ça je recherche sur le web et à force ça rentre.

J'ai 2 questions à vous posés car je ne trouve pas de solutions.

- Dans ma colonne centrale, j'ai pratiquement que du texte aligné en "justify" mais je veux qu'une seule phrase soit aligné à droite ? (J'ai rajouté <p align= ...) mais mon code n'est plus valable apres cela ????

- Comment mettre 4 images cote a cote ?

Merci de votre aide:fou:

Modifié 23 Février 2006 par kaporal-7

[captain_torche]

l'attribut "align" n'est pas valide en XHTML.

Il faut que tu utilises l'atribut class, ou style

<p style="text-align: right;">..</p>

Sinon, pour mettre 4 images côté à côte ... ben tu les mets côte à côte dans ton code.

Si elles s'affichent les unes en-dessous des autres, c'est que :

1. Tu as un CSS qui interfère dans leur comportement normal

2. la taille de deux images côte à côte dépasse la taille du bloc dans lequel eslles sont placées, d'où retour à la ligne.

[Guest kaporal-7]

l'attribut "align" n'est pas valide en XHTML.

Il faut que tu utilises l'atribut class, ou style

<p style="text-align: right;">..</p>

Sinon, pour mettre 4 images côté à côte ... ben tu les mets côte à côte dans ton code.

Si elles s'affichent les unes en-dessous des autres, c'est que :

1. Tu as un CSS qui interfère dans leur comportement normal

2. la taille de deux images côte à côte dépasse la taille du bloc dans lequel eslles sont placées, d'où retour à la ligne.

<{POST_SNAPBACK}>

Ok merci tous est niquel, je fais mes liens tranquil tous à l'air de fonctionner correctement, en revanche j'ai des liens d'une certaine taille et couleur et j'aimerais que d'autres liens soient différents ? J'ai essayé les fonctions <h2>..</2> et autres et pourtant ça ne change pas ? A quel niveau faut il faire des modifs ?

[Dudu]

Salut

Ok merci tous est niquel, je fais mes liens tranquil tous à l'air de fonctionner correctement, en revanche j'ai des liens d'une certaine taille et couleur et j'aimerais que d'autres liens soient différents ? J'ai essayé les fonctions <h2>..</2> et autres et pourtant ça ne change pas ? A quel niveau faut il faire des modifs ?

Tu leur attribues une class

Je ne comprends pas pour quelle raison tu voudrais mettre des liens dans des balises <h2> s'ils n'ont rien à y faire

Un conseil avant de te lancer à corps perdus dans le CSS: apprendre le CSS (hé oui)

[Guest kaporal-7]

Bon ben après quelques jours de boulot j'arrive enfin à quelque chose.

9a donne parfaitement sur IE mais par contre sur Mozilla ou Opéra il y a des petits Bugs. Si quelqu'un les connait et peut me dire la cause ?????

Merci

Le site : www.mediakap.net

[Sarc]

Bonjour,

Je comprends pas bien, tu dois être partagé entre ton envie de bien faire et ta méconnaissance des techniques que tu utilises, ce qui donne parfois des choses assez.. difficiles à avaler, disons !

Un peu comme quand tu fais une conférence dans une langue que tu ne connais pas... Tu as sûrement des choses intéressantes à raconter, mais personne ne te comprendra !

Ca je pense que c'est le meilleur... en CSS, tu peux mettre des marges à certaines de tes balises, tu t'en es d'ailleurs servi non ? Bah là c'est la même chose, tu mets une marge là ou tu veux des espaces, mais ne va pas mettre un paragraphe vide, yen a partout, non seulement ta page prend du poids (mine de rien, vu le nombre de paragraphes vides qu'il y a, elle doit bien prendre un ko !)

D'ailleurs, à gauche, ce sont clairement des listes de liens, il y a des balises pour utiliser les listes, tu sais ? Il faudrait les utiliser plutôt que d'utiliser des paragraphes à tort et à travers.

Dans l'actualité des webmasters, pareil, utiliser une liste <ul><li>...</li><li>...</li></ul>

<title>Page HTML et CSS</title>

J'ai du mal à voir pourquoi tu mets ce titre à ta page, dans google les gens pourront voir ce titre, je te rappelle, alors il faudrait mettre quelque chose qui parle de ta page, pas un titre comme ça...

font-family:verdana, sans-serif;

Tu peux pas mettre ça une bonne fois pour toute dans body et ne plus l'utiliser après dans ton CSS ? Tu en mets trois tonnes pour rien, une fois dans body et ça suffit..

margin:0;padding:0; /* couleur de la colonne */

Couleur ? Dudu ne t'a pas conseillé d'apprendre le CSS avant de l'utiliser ? Là, tu es en train d'essayer de faire un site internet en copiant collant ce que tu trouves sur les autres, c'est dommage, tu ferais mieux d'apprendre à quoi servent les attributs CSS, comment les utiliser, et faire quelque chose de propre... Sinon, forcément, ça bugue, c'est lourd, etc..

Donc garde la présentation de ton site, c'est pas désagréable du tout comme site, mais fais des efforts sur ton code !

Voili voilà, petit tour d'horizon

Il y a un bug effectivement avec la bordure de ton conteneur, ça provient du fait que ta div centre est en float, et donc qu'elle sort du flux, que le reste du contenu ne se trouve plus "dedans", mais "en plus" de cette div... Tu comprendras en lisant des tutoriaux sur le CSS !

[Guest kaporal-7]

Je vais faire attention OK !

<title>Page HTML et CSS</title>

Pour le moment mes pages ne sont pas terminés, c'est normal j'ai pas mis les titres et metas encore.

Voili voilà, petit tour d'horizon

Il y a un bug effectivement avec la bordure de ton conteneur, ça provient du fait que ta div centre est en float, et donc qu'elle sort du flux, que le reste du contenu ne se trouve plus "dedans", mais "en plus" de cette div...

Que faire pour cela ?

[captain_torche]

Pour cela, il te suffit de mettre un div en bas de page (après les news, etc), avec comme attribut :

clear: both;

Tu peux, pour éviter d'avoir un iv vide, mettre cette propriété dans ton div .bas

Sinon, je ne saurais que te conseiller de garder cette url dans tes favoris : Référence CSS2.

[Guest kaporal-7]

Je comprend pas pourquoi dans firefox ma barre ".bas" ne s'affiche pas orange ??? et surtout sous le conteneur ?

[Dudu]

Salut,

À t'entendre, çà passe parfaitement avec Internet Explorer Win mais pas avec des navigateurs normaux: à vrai dire vu le code çà ne m'étonne pas.

On passe çà en revue ?

On commence avec le <div align="left"> de la 11ème ligne. Question: à quoi sert-il ?

Par défaut, tout est aligné à gauche en HTML. De plus, tu as déjà une balise <div> à la ligne précédente à laquelle tu peux attribuer une règle CSS puisque cette balise est identifiée avec un id. De plus, l'attribut align est déprécié, et tu le sais certainement maintenant que tu as compris l'utilité de séparer le contenu et la présentation.

On continue avec la ligne suivante dans laquelle on trouve 2 images imbriquées dans une balise <p> c'est à dire un paragraphe.

D'une: pourquoi un paragraphe ? De deux, ce sont des images décoratives, non des images à vertu illustrative. Donc une fois encore, elles ont leur place dans le fichier CSS et non dans l'HTML. En mettant un petit <h1> avec le nom de ton site dans l'HTML, qui "transforme" côté CSS le texte en image, tu gagnes en poids, en lisibilité, en sémantique etc etc... d'ailleurs est-ce normal si nulle part dans ton code source n'apparaisse le nom de ton site ? (hormis les liens bien sûr) Moi çà ne me semble pas logique..

On continue avec la balise <div id="head2"> (encore une balise div ??) Les liens ne sont pas correctement séparés les uns des autres, ils sont entassés et leur espacement est géré dans la CSS. Fort bien, mais encore une fois c'est tout sauf sémantique. S'il ne s'agissait que de sémantique encore.. mais ce genre de manière de coder te fait courir de gros problèmes d'accessibilité. Il faut que des liens soient séparés correctement les uns des autres, c'est une règle d'or. Sinon c'est encore une fois les visiteurs handicapés qui prennent tout de plein fouet (mais il n'avaient qu'à pas être handicapés, n'est-ce pas ? ). Vu qu'il s'agit d'une liste de liens, pourquoi ne pas utiliser une balise HTML de .. liste (par exemple) ?

Je passe sur les paragraphes vides qu'on commence à voir apparaître en ligne 17 (<p> </p>) car sarc a parfaitement expliqué les tenants et les aboutissants de ce type de pratique.

Autour des lignes 20-21 on trouve 2 petits détails pas bien méchants mais qui méritent qu'on s'y attarde.

Le premier concerne l'attribut style utilisé au sein d'une balise. Autant ne pas faire de CSS, tu ne gagnes ni en poids, ni en lisibilité avec des styles en-ligne. Et tu y perds en déboguage le jour il faut déboguer.

Le deuxième concerne le lien "Favoris" qui utilise une méthode propriétaire Microsoft, donc lisible uniquement par nos amis malchanceux qui utilisent encore Internet Explorer. Pour les autres, le lien est tout bonnement inactif. De plus il s'agit d'une "intrusion": il n'y a pas à forcer l'internaute pour qu'il mette un site en favoris; il peut très bien le faire lui-même.

Ensuite on tombe sur çà

<a href="java script:window.external.AddFavorite('http://www.mediakap.net','Mediakap.net - L'info du Web')"><img src="logo_favoris.jpg" alt="Favoris" border="0"/></a>  
    <a href="mailto:info_AT_mediakap.net"><img src="logo_mail.jpg" alt="Email" border="0"/></a>

Aïe Un lien javascript + un lien mailto avec des images sans mention de tailles, le tout séparé par des espaces insécables.. bref un florilège de choses à ne pas faire. Sachant qu'en plus tu as une page contact.htm qui a un formulaire..

Honnêtement je ne comprends pas l'utilité de cette ligne

Vient ensuite la colonne de gauche.. Il s'agit d'une liste, nous sommes bien d'accord ? Alors pourquoi insérer un paragraphe par ligne avec répétition de l'image puce_violet.jpg à chaque ligne ????

C'est une ineptie !! Tu pourrais faire la même chose avec 3 fois moins de code, ce serait plus lisible, plus sémantique, plus .. (heu je me répète, pardon)

Petit aparté: tu peux sans complexe supprimer le lien vers le site qui parle de redirection automatique. Les redirections par meta refresh sont une plaie à tous les points de vue. Autant pour l'utilisateur que pour le référencement pour ne citer qu'eux..

La partie centrale a un code très correct, si ce n'est les fameux paragraphes vides dont parlait sarc, et une certaine abondance de paragraphes même pleins. Mais ce n'est pas réellement gênant. Le temps de l'optimisation viendra ultérieurement.

J'en profite pour faire part de mon incompréhension quant aux choix des class plutôt que des id. Par exemple, pour "head2", pour "gauche", pour "droite", pour "centre", pour "bas".

Tu as plusieurs en-tête, plusieurs parties gauches, plusieurs parties centrales, plusieurs parties droites, et plusieurs pieds de page ?

Non. Alors pourquoi utiliser des class ?

Pour ton pied de page qui ne se colore pas, vérifies l'ordre de tes règles CSS. Comme l'indique leur nom, elles agissent en cascade (CSS = cascading style sheets). Leur ordre est donc primordial.

Dernière chose: on te renseigne, on t'aide, on en vient presque à faire le travail à ta place. C'est un petit peu étonnant pour quelqu'un qui vend ses services en s'auto-proclamant "spécialiste de la conception de sites Internet Design"

Moi, çà me poserait un problème de conscience

Quoiqu'il en soit bon courage. Mais au risque de me répéter: apprends d'abord l'HTML et le CSS. Et ensuite seulement commences à faire des essais et des tests.

Car là, en tout état de cause, ta page n'est ni valide ni conforme ni lisible ni rien.. tu me vois navré de te le dire

PS: garde effectivement sous le coude le lien proposé par captain_torche, tu peux rajouter celui-ci qui apprend les bases d'HTML et de CSS http://fr.selfhtml.org/

[Guest kaporal-7]

Salut,

À t'entendre, çà passe parfaitement avec Internet Explorer Win mais pas avec des navigateurs normaux: à vrai dire vu le code çà ne m'étonne pas.

On passe çà en revue ?

On commence avec le <div align="left"> de la 11ème ligne. Question: à quoi sert-il ?

Par défaut, tout est aligné à gauche en HTML. De plus, tu as déjà une balise <div> à la ligne précédente à laquelle tu peux attribuer une règle CSS puisque cette balise est identifiée avec un id. De plus, l'attribut align est déprécié, et tu le sais certainement maintenant que tu as compris l'utilité de séparer le contenu et la présentation.

On continue avec la ligne suivante dans laquelle on trouve 2 images imbriquées dans une balise <p> c'est à dire un paragraphe.

D'une: pourquoi un paragraphe ? De deux, ce sont des images décoratives, non des images à vertu illustrative. Donc une fois encore, elles ont leur place dans le fichier CSS et non dans l'HTML. En mettant un petit <h1> avec le nom de ton site dans l'HTML, qui "transforme" côté CSS le texte en image, tu gagnes en poids, en lisibilité, en sémantique etc etc... d'ailleurs est-ce normal si nulle part dans ton code source n'apparaisse le nom de ton site ? (hormis les liens bien sûr) Moi çà ne me semble pas logique..

On continue avec la balise <div id="head2"> (encore une balise div ??) Les liens ne sont pas correctement séparés les uns des autres, ils sont entassés et leur espacement est géré dans la CSS. Fort bien, mais encore une fois c'est tout sauf sémantique. S'il ne s'agissait que de sémantique encore.. mais ce genre de manière de coder te fait courir de gros problèmes d'accessibilité. Il faut que des liens soient séparés correctement les uns des autres, c'est une règle d'or. Sinon c'est encore une fois les visiteurs handicapés qui prennent tout de plein fouet (mais il n'avaient qu'à pas être handicapés, n'est-ce pas ? ). Vu qu'il s'agit d'une liste de liens, pourquoi ne pas utiliser une balise HTML de  .. liste (par exemple) ?

Je passe sur les paragraphes vides qu'on commence à voir apparaître en ligne 17 (<p> </p>) car sarc a parfaitement expliqué les tenants et les aboutissants de ce type de pratique.

Autour des lignes 20-21 on trouve 2 petits détails pas bien méchants mais qui méritent qu'on s'y attarde.

Le premier concerne l'attribut style utilisé au sein d'une balise. Autant ne pas faire de CSS, tu ne gagnes ni en poids, ni en lisibilité avec des styles en-ligne. Et tu y perds en déboguage le jour il faut déboguer.

Le deuxième concerne le lien "Favoris" qui utilise une méthode propriétaire Microsoft, donc lisible uniquement par nos amis malchanceux qui utilisent encore Internet Explorer. Pour les autres, le lien est tout bonnement inactif. De plus il s'agit d'une "intrusion": il n'y a pas à forcer l'internaute pour qu'il mette un site en favoris; il peut très bien le faire lui-même.

Ensuite on tombe sur çà

<a href="java script:window.external.AddFavorite('http://www.mediakap.net','Mediakap.net - L'info du Web')"><img src="logo_favoris.jpg" alt="Favoris" border="0"/></a>  
    <a href="mailto:info_AT_mediakap.net"><img src="logo_mail.jpg" alt="Email" border="0"/></a>

Aïe Un lien javascript + un lien mailto avec des images sans mention de tailles, le tout séparé par des espaces insécables.. bref un florilège de choses à ne pas faire. Sachant qu'en plus tu as une page contact.htm qui a un formulaire..

Honnêtement je ne comprends pas l'utilité de cette ligne

Vient ensuite la colonne de gauche.. Il s'agit d'une liste, nous sommes bien d'accord ? Alors pourquoi insérer un paragraphe par ligne avec répétition de l'image puce_violet.jpg à chaque ligne ????

C'est une ineptie !! Tu pourrais faire la même chose avec 3 fois moins de code, ce serait plus lisible, plus sémantique, plus .. (heu je me répète, pardon)

Petit aparté: tu peux sans complexe supprimer le lien vers le site qui parle de redirection automatique. Les redirections par meta refresh sont une plaie à tous les points de vue. Autant pour l'utilisateur que pour le référencement pour ne citer qu'eux..

La partie centrale a un code très correct, si ce n'est les fameux paragraphes vides dont parlait sarc, et une certaine abondance de paragraphes même pleins. Mais ce n'est pas réellement gênant. Le temps de l'optimisation viendra ultérieurement.

J'en profite pour faire part de mon incompréhension quant aux choix des class plutôt que des id. Par exemple, pour "head2", pour "gauche", pour "droite", pour "centre", pour "bas".

Tu as plusieurs en-tête, plusieurs parties gauches, plusieurs parties centrales, plusieurs parties droites, et plusieurs pieds de page ?

Non. Alors pourquoi utiliser des class ?

Pour ton pied de page qui ne se colore pas, vérifies l'ordre de tes règles CSS. Comme l'indique leur nom, elles agissent en cascade (CSS = cascading style sheets). Leur ordre est donc primordial.

Dernière chose: on te renseigne, on t'aide, on en vient presque à faire le travail à ta place. C'est un petit peu étonnant pour quelqu'un qui vend ses services en s'auto-proclamant "spécialiste de la conception de sites Internet Design"

Moi, çà me poserait un problème de conscience

Quoiqu'il en soit bon courage. Mais au risque de me répéter: apprends d'abord l'HTML et le CSS. Et ensuite seulement commences à faire des essais et des tests.

Car là, en tout état de cause, ta page n'est ni valide ni conforme ni lisible ni rien.. tu me vois navré de te le dire

PS: garde effectivement sous le coude le lien proposé par captain_torche, tu peux rajouter celui-ci qui apprend les bases d'HTML et de CSS http://fr.selfhtml.org/

<{POST_SNAPBACK}>

J'accepte bien entendu toutes critiques mais j'aurais aussi aimé avoir des conseils pour me permettre d'avancer, bref c'est vrai que c'est plus facile de critiquer plutôt que d'aider finalement.

Au passage j'en profite pour remercier captain_torche qui au dela d'avoir donné une critique à mon site m'a aussi donné d'énorme conseils, de temps et patience.

Dudu mon travail est bien validé par le W3C tu peux le constater par toi même. Je précise tout de même que j'ai travaillé au total même pas 20h pour arriverà ce travail, j'ai bien conscience que ce n'est qu'un début, mais je suis tout de même fier de mon travail ...

[Sarc]

Hum.. Déjà, s'il te plaît, ne pas de citation aussi longue, surtout pour ne pas rebondir sur ce que tu cites...

Ensuite, je pense que Dudu et moi même avons aussi passé beaucoup de temps à fouiller dans ton code, et à t'expliquer tout ce qui n'allait pas, ce qu'il fallait mettre à la place, ce qu'il fallait changer... Donc je trouve un peu osé de dire qu'on fait de la critique facile, alors que finalement on t'aide pour ton site.

Ton code est certes presque valide, mais ça ne veut pas dire pour autant qu'il est correct sémantiquement : la syntaxe est bonne, mais l'utilisation des balises ne l'est pas forcément. Les balises vides (les paragraphes que tu utilises), l'utilisation de paragraphes au lieu de divs, et tout ce qu'a dit Dudu veut dire que ton code n'est pas très bon sémantiquement : tu ferais mieux d'utiliser d'autres balises qui auraient plus de sens dans cette situation.

Maintenant si tu n'acceptes pas ce qu'on dit, on ne perdra plus de temps à te donner des conseils, et tant pis..

[captain_torche]

Je ne peux que confirmer ce que viennent de dire sarc et dudu.

Tu te lances dans le CSS, mais être validé par le W3C n'est pas tout.

La validation en elle-même, ne t'assure UNIQUEMENT qu'une garantie que ton site sera affiché correctement dans les navigateurs respectant les normes.

Et cela, ce n'est que la partie émergée de l'iceberg.

Je ne saurais que te conseiller de suivre leurs conseils, ils ont beaucoup plus d'expérience que moi en ce qui concerne l'accessibilité.

[Ifmy]

Mon dieu jamais vu quelqu'un d'aussi impoli pas de bonjour, pas de merci, on ce casse en deux pour faire le site à sa place, on lui fait remarqué gentiment son comportement tout en continuant à lui donner des indications et voilas comment il le prend...

Par pitié fermez ce post, il ne mérite vraiment aucune aide...

[sorry] désolé pour le post de trop [/sorry]

Modifié 27 Février 2006 par Ifmy

[Dudu]

J'accepte bien entendu toutes critiques mais j'aurais aussi aimé avoir des conseils pour me permettre d'avancer, bref c'est vrai que c'est plus facile de critiquer plutôt que d'aider finalement.

Je ne te fais pas avancer ? À quoi cela sert de t'avoir dit par quoi remplacer quelles balises ? Quels codes étaient à supprimer ? Et comment obtenir ta couleur orange sur ton pied de page ?

À rien ?

Je prouve ma bonne volonté: dis-moi quelle phrase, citation à l'appui, est de la critique facile. Je me ferais un plaisir de t'expliquer plus avant de quoi il en retourne

Dudu mon travail est bien validé par le W3C tu peux le constater par toi même.

À lire, à relire et à re-relire: valide ne signifie pas conforme

Dans ce post, Monique réussit le pari de TOUT résumer en à peine 8 lignes.

Ta page pseudo-valide est un exemple typique de ce genre de cas.

Je précise tout de même que j'ai travaillé au total même pas 20h pour arriverà ce travail, j'ai bien conscience que ce n'est qu'un début, mais je suis tout de même fier de mon travail ...

Tu m'as aussi envoyé un MP dans lequel tu me dis avoir totalisé 14h de travail.

14h ou 20h ? Qui croire ?

Bref, nous cherchons à t'aider et je remercie moi aussi captain_torche de son extrême patience.

Mais si tu ne supporte pas l'aide que nous t'apportons, pourquoi continuer à poser des questions ?

Si tu es "tout de même fier de [t]on travail", alors mon conseil: restes-en là et ne nous demandes plus notre avis: il restera certainement immuable.

Quant au MP que j'ai reçu, merci de bien vouloir ne pas mélanger ma fonction bénévole de modérateur avec l'aide que j'apporte sur le forum. Pour la bonne et simple raison que les deux n'ont rien à voir; merci également de respecter un minimum de politesse à l'égard des membres, fût-ce en privé

Cordialement.

PS: Mais non, Ifmy

[Guest kaporal-7]

J'ai juste dis que j'aurais aimé avoir aussi des solutions ainsi que des critiques pas seulement des critiques, bref ...

Je reprend point par point les remarques de "Dudu", j'ai fait des modifs :

- div align="left"> de la 11ème ligne = SUPPRIMER

- 2 images imbriquées dans une balise <p> ? = SUPPRIMER

- elles ont leur place dans le fichier CSS = Pour le moment je prefere les avoirs dans le HTML

- mon incompréhension quant aux choix des class plutôt que des id = j'ai mis des id et changer mon . par # dans le CSS. Mais quelle est la différence entre id et class, si ce n'est qu'un est réutilisable et l'autre non ?

- <p> </p> = Que mettre alors à la place pour sauter des lignes ? <br> ?

- l'attribut style utilisé au sein d'une balise = je n'ai pas compris par quoi remplacer ???

- le lien "Favoris" = Je l'enlève j'ai bien compris que ce n'était pas très bon

- la colonne de gauche.. Il s'agit d'une liste, nous sommes bien d'accord ? = J'ai supprimé tout les paragraphes et remplacé par <li></li>

- ton pied de page qui ne se colore pas, vérifies l'ordre de tes règles CSS = J'ai vérifié tout semble ok mais dans firefox ça ne s'affiche toujours pas

Je continue mes recherches, si vous pouvez éclairer les points que je n'ai pas compris ce serait sympa.

Modifié 28 Février 2006 par kaporal-7

[captain_torche]

Dudu a critiqué ton code, certes, mais à mon sens, c'est une critique constructive, vu qu'il t'explique ses arguments, et te donne matière à corriger.

Sinon, petites explications :

- Une image n'apportant pas de contenu au site (non informative), dans une optique de séparation de la mise en forme et du contenu (une des raisons d'être du CSS), n'a pas sa place au sein du HTML, décrivant le contenu de la page.

- Pour ce qui est des .class ou des #id, c'est juste que certains éléments (notamment le header, le footer et le menu principal), n'ont pas pour vocation d'être répétés dans la page. D'où l'utilisation d'un #id (Si quelqu'un a de meilleurs arguments, je suis preneur).

- Pour séparer tes différents paragraphes, pas besoin de sauter de lignes !

Il te suffit juste de définir une marge basse à tes paragraphes, et le tour est joué.

Pour mémoire, le <br /> est destiné à revenir à la ligne au sein d'un paragraphe.

- Pour l'attribut style au sein de la balise, même chose que précédemment : séparation contenu/présentation.

Sa place est donc dans le fichier CSS.

Modifié 28 Février 2006 par captain_torche

[Guest kaporal-7]

- Concernant les images elle reste là pour le moment, par la suite j'irais les mettre dans le CSS.

- Merci pour l'explications des .class et #id.

- J'ai fait comme tu m'a dis pour séparer les paragraphe, j'ai rajouter dans mon CSS un margin-bottom:10px et c'est parfait

- l'attribut style est présent mais c'est uniquement pour aligner au centre 1 ou 2 images, aussi non dans mon CSS j'ai "justify" pour mon texte.

J'ai fait pas mal de modif, voici mon html, j'espère plus propre !!! ??????

<!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>
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="index.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mediakap.net</title></head>

<body>
<div id="conteneur">
<img src="logoM.jpg" class="logoM" alt="logoM" /><img src="logoM2.jpg" class="logoM2" alt="logoM" />

<div class="head2"> <a href="services.html">Nos Services</a> <a href="mailto:info_AT_mediakap.net">Contactez-nous</a> <a href="rss.html">Fil info RSS</a> <a href="v1.0/index.htm">Version 1.0</a></div>

<p> </p>
<div id="gauche">
    <p style="text-align: center;">
    <a href="rss.html"><img src="logo_rss.jpg" alt="RSS"/></a>  
    <a href="http://www.mediakap.net"><img src="logo_favoris.jpg" alt="Favoris" border="0"/></a>  
    <a href="mailto:info_AT_mediakap.net"><img src="logo_mail.jpg" alt="Email" border="0"/></a></p>
  <p><img src="logo_astuce.jpg" alt="L'Astuce de la Semaine"/></p>
  <h1><b>Redirection visiteurs...</b></h1>
  <p>Votre site a changé d'adresse URL et vous souhaitez rediriger vos visiteurs directement vers votre nouvelle adresse.</p>
  <p style="text-align: right;"><a href="http://www.2001webmaster.com/astuces/redirection_automatique.htm">Voir le tag à utiliser >>></a></p>
  <p> </p>
  <p><img src="logo_logiciels.jpg" alt="Logiciels"/></p>
  <ul><li><img src="puce_violet.jpg" alt="Logiciel"/> Avast Familiale v4.6 </li>
  <li><a href="http://www.clubic.com/telecharger-fiche11113-avast-.html"> Télécharger Antivirus</a></li>
  <li></li>
  <li><img src="puce_orange.jpg" alt="Logiciel"/> Ad-Aware SEP v1.06 </li>
  <li><a href="http://www.clubic.com/telecharger-fiche12797-ad-aware-se-personal.html"> Télécharger Anti-Spyware</a></li>
  <li></li>
  <li><img src="puce_violet.jpg" alt="Logiciel"/> NotePad ++ v3.4 </li>
  <li><a href="http://www.clubic.com/telecharger-fiche9567-notepad.html"> Télécharger Editeur de Source</a></li>
  <li></li>
  <li><img src="puce_orange.jpg" alt="Logiciel"/> Photoshop v9.0 CS2 </li>
  <li><a href="http://www.clubic.com/telecharger-fiche9635-photoshop.html"> Télécharger Images/Photos</a></li>
  <li></li>
  <li><img src="puce_violet.jpg" alt="Logiciel"/> MSN Messenger 7.5</li>
  <li><a href="http://www.clubic.com/telecharger-fiche13499-msn-messenger-7-5.html"> Télécharger Outil Chat</a></li>
  <li></li>
  <li><img src="puce_orange.jpg" alt="Logiciel"/> Opera v8.51 </li>
  <li><a href="http://www.clubic.com/telecharger-fiche9491-opera.html"> Télécharger Navigateur Web</a></li>
  <li></li>
  <li><img src="puce_violet.jpg" alt="Logiciel"/> Mozilla Sunbird v0.2</li>
  <li><a href="http://www.clubic.com/telecharger-fiche11130-mozilla-sunbird.html"> Télécharger Agenda</a></li>
  <li></li>
  <li><img src="puce_orange.jpg" alt="Logiciel"/> DVD Player </li>
  <li><a href="http://www.clubic.com/telecharger-fiche10319-dvd-player.html"> Télécharger Lecteur DVD</a></li>
  <li></li>
  <li><img src="puce_violet.jpg" alt="Logiciel"/>WinRar v3.51 </li>
  <li><a href="http://www.clubic.com/telecharger-fiche9632-winrar.html"> Télécharger Décompression</a></li>
  <li></li>
  <li><img src="puce_orange.jpg" alt="Logiciel"/> WinZip v9.0 SR1</li>
  <li><a href="http://www.clubic.com/telecharger-fiche9488-winzip.html"> Télécharger Décompression</a></li>
  <li></li>
  <li></li></ul>
  <img src="logo_nospartenaires.jpg" alt="Nos Partenaires"/>
  <ul><li><img src="puce_orange.jpg" alt="Logiciel"/> People Organisation</li>
  <li><a href="http://www.peopleorg.com"> Voir le Site</a></li>
  <li></li>
  <li><img src="puce_violet.jpg" alt="Logiciel"/> Resto La Petite Maison</li>
  <li><a href="http://www.lapetitemaison-nice.com"> Voir le Site</a></li>
  <li></li>
  <li></li></ul>
  <p><img src="logo_lesitewebdelasemaine.jpg" alt="Le Site Web de la Semaine"/></p>
  <a href="http://www.peopleorg.com"><img src="sitesemaine_peopleorg.jpg" alt="People Organisation" border="0"/></a>
  <p>People Organisation est une agence événementiel Sportif et Culturel.</p>
  <p style="text-align: right;"><a href="liens.html">Votre site ici >>></a></p>
  </div>

<div id="centre">
    <img src="logo_linfo.jpg" alt="L'info du moment"/>
	<h2>Quand le ministère de la Culture lance son site !</h2>
	<img src="info_lestelechargements.jpg" class="imgcentre" alt="Info" />
	<p>Mercredi soir, le ministère de la Culture a lancé officiellement le site lestelechargements.com, créé pour ouvrir le débat sur internet et les droits d'auteur.
Lestelechargements.com, financé par les ministères de la Culture et de l'Economie est un site à double propos : dégager un espace de débat sur internet autour du délicat sujet du téléchargement, et exposer le projet de loi que R.Donnedieu de Vabres va présenter à l'Assemblée le 7 mars prochain.
Il y avait en tout cas besoin de dialogue : moins d'une heure après le lancement du site, il y avait déjà 79 commentaires sous le témoignage du chanteur Marc Lavoine. Le lendemain, A la soirée, on était plus perplexe. Les artistes présents se montraient prudents. Si Eddy Mitchell considérait que le site allait surtout être un moyen d'expliquer que "le téléchargement tue la musique", d'autres chanteurs comme Alain Chamfort ou Tété soulignaient que toute initiative poussant au dialogue ne pouvait être que félicitée. Mais surtout, restait une question : ce site de dialogue allait-il durer au-delà de la présentation du projet de loi sur le droit d'auteur à l'Assemblée nationale ? Renaud Donnedieu de Vabres a eu une réponse hésitante : "sans doute. Mais peut-être pas sous cette forme".</p>
	<p style="text-align: right;"><a href="http://www.lestelechargements.com">Visitez le site lestelechargements.com</a></p>
	<p> </p>
	<img src="logo_actuweb.jpg" alt="L'actualité des Webmaster"/>
	<ul><li><a href="http://www.01net.com/editorial/306055/echange-de-fichiers/coup-de-filet-sur-un-serveur-peer-to-peer-a-l-ancienne.html">- Razorback 2.0 et 2.1 déconnectés d'Emule !</a></li>
	<li><a href="http://www.01net.com/editorial/306075/publicite/-libe-bannit-de-son-site-les-publicites-pour-le-cpe/">- Libération bannit de son site les pubs pour le CPE ...</a></li>
	<li><a href="http://www.clubic.com/actualite-32268-insolite-un-boitier-pc-en-forme-d-ipod.html">- Insolite : Un boîtier de PC en forme d'iPod !!</a></li>
	<li><a href="http://www.clubic.com/actualite-32266-le-milliard-pour-itunes.html">- 1 Milliard de chansons vendues pour itunes d'apple</a></li>
	<li><a href="http://www.journaldunet.com/witbe/fai/adsl/classement_adsl0601.shtml">- AOL toujours au sommet des fournisseurs d'accès devant...</a></li>
	<li><a href="http://solutions.journaldunet.com/0602/060224-usage-metatags.shtml">- Les meta-tags sont-ils encore utiles au référencement ?</a></li>
	<li><a href="http://www.journaldunet.com/0602/060224-grippeaviaire.shtml">-  La grippe aviaire touche les liens sponsorisés</a></li>
	<li><a href="http://www.clubic.com/actualite-32255-quoi-de-neuf-en-jeux-video-ce-jeudi.html">- Toute l'actu des Jeux vidéos de la semaine</a></li>
	<li><a href="http://www.zdnet.fr/actualites/internet/0,39020774,39312561,00.htm?xtor=1">- Amazon se prépare à entrer dans le marche de la "Music"</a></li>
	<li><a href="http://www.clubic.com/actualite-32253-hdmi-la-premiere-carte-ati-compatible-en-photo.html">- HDMI : la première carte ATI compatible en photo !</a></li>
	<li></li>
	<li></li></ul>
	<img src="logo_quisommesnous.jpg" alt="Qui sommes nous ?"/>
	<p>Bienvenue chez MEDIAKAP.NET le spécialiste de la conception de sites Internet Design. Nous mettons toutes vos envies à votre portée : création du site Internet, relookage, réservation du nom de domaine, hébergement, référencement avec des outils très professionnels, Statistiques, Formation à Internet et ses logiciels, prospectus commercial ...
    Charte graphique personnalisée, avec vous aurez un site Internet tendance et design, unique ! Intéressez ? Contactez nous immédiatement.</p>
	<p>Notre site ne ce résume pas qu'à la création de page Web, il a pour but de devenir un "Rendez-vous" incontournable des Webmasters et autres "amoureux du net". Vous pourrez y retrouver les infos les plus importantes du Web, qui seront disponibles en page principale du Site ou bien en passant par notre Flux RSS.</p>
	<p>A côté de ceci vous pourrez également télécharger toutes sortes de logiciels, de l'antivirus, à la création PAO.</p>
  </div>

<div id="droite">
<p style="text-align: center;"><a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px"
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
  <p style="text-align: center;"><a href="http://jigsaw.w3.org/css-validator/">
  <img style="border:0;width:88px;height:31px"
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!"/></a></p>
  <p style="text-align: center;"><a href="http://feedvalidator.org/check.cgi?url=http://www.mediakap.com/rss.xml"><img style="border:0;width:88px;height:31px" src="logo_validerss.jpg" alt="[Valid RSS]" title="Validate my RSS feed" /></a></p>
</div>

<div id="bas"><a href="mailto:info_AT_mediakap.net">Contactez-nous</a> - <a href="rss.html">Le Fil info RSS</a> - <a href="liens.html">Faire un Partenariat / Lien</a> - <a href="v1.0/index.html">Version 1.0</a> - <a href="http://www.mediakap.net">Version 2.0</a></div>
</div>

</body>
</html>

Modifié 28 Février 2006 par kaporal-7

[Sarc]

Salut,

Je peux pas commenter énormément ton code source, je le vois mieux quand il s'agit d'une page en ligne, mais la liste à gauche n'est pas encore exactement ce qu'il faut :

 
<li><img src="puce_orange.jpg" alt="Logiciel"/> Ad-Aware SEP v1.06 </li>
<li><a href="http://www.clubic.com/telecharger-fiche12797-ad-aware-se-personal.html"> Télécharger Anti-Spyware</a></li>
<li></li>
<li><img src="puce_violet.jpg" alt="Logiciel"/> NotePad ++ v3.4 </li>
<li><a href="http://www.clubic.com/telecharger-fiche9567-notepad.html"> Télécharger Editeur de Source</a></li>
<li></li>

Déjà, les <li> vides, c'est comme les paragraphes, il faut les remplacer par des marges... Ensuite, il faudrait créer deux class de li, une avec comme image de background la puce orange, et l'autre class avec comme image de fond la puce violette, comme ça tu gagneras de la place, tu n'auras plus qu'à mettre une classe sur tes li pour que ça s'affiche

Ensuite, il ne faut pas mettre deux <li> pour parler de la même chose, c'est à dire du lien de téléchargement et du nom du fichier, il faut mettre ça dans le même li à mes yeux, avec un <br> dedans pour passer à la ligne, enfin ça c'est de la discussion sémantique, faudrait que Dudu confirme...

Pour le reste, il me semble à vue d'yeux comme ça que c'est beaucoup plus propre, beaucoup mieux... Tu as bien bossé

[Guest kaporal-7]

Salut,

Je peux pas commenter énormément ton code source, je le vois mieux quand il s'agit d'une page en ligne, mais la liste à gauche n'est pas encore exactement ce qu'il faut :

 
<li><img src="puce_orange.jpg" alt="Logiciel"/> Ad-Aware SEP v1.06 </li>
<li><a href="http://www.clubic.com/telecharger-fiche12797-ad-aware-se-personal.html"> Télécharger Anti-Spyware</a></li>
<li></li>
<li><img src="puce_violet.jpg" alt="Logiciel"/> NotePad ++ v3.4 </li>
<li><a href="http://www.clubic.com/telecharger-fiche9567-notepad.html"> Télécharger Editeur de Source</a></li>
<li></li>

Déjà, les <li> vides, c'est comme les paragraphes, il faut les remplacer par des marges... Ensuite, il faudrait créer deux class de li, une avec comme image de background la puce orange, et l'autre class avec comme image de fond la puce violette, comme ça tu gagneras de la place, tu n'auras plus qu'à mettre une classe sur tes li pour que ça s'affiche

Ensuite, il ne faut pas mettre deux <li> pour parler de la même chose, c'est à dire du lien de téléchargement et du nom du fichier, il faut mettre ça dans le même li à mes yeux, avec un <br> dedans pour passer à la ligne, enfin ça c'est de la discussion sémantique, faudrait que Dudu confirme...

Pour le reste, il me semble à vue d'yeux comme ça que c'est beaucoup plus propre, beaucoup mieux... Tu as bien bossé

<{POST_SNAPBACK}>

Merci Sarc c'est très sympa de ta part.

J'attend une nouvelle confirmation comme quoi il vaut mieux mettre <br> au lieu de <li> pour un même lien, si c'est mieux pour la sémantique et je le fait.

Modifié 28 Février 2006 par kaporal-7

[captain_torche]

Et sinon, il n'est pas du tout nécessaire, à chaque fois que tu réponds, de quoter toute la réponse (et la plupart du temps, il n'est pas nécessaire de quoter du tout).

[Guest kaporal-7]

Quel est ton avis captain-torche sur la sémantique entre <li> et <br> ?

[captain_torche]

Ben, vu comme tu présentes tes liens, je te conseillerai juste de faire : une élément de liste=un lien.

Ca donnerait quelque chose du genre :

<li>
<a href="http://www.clubic.com/telecharger-fiche9567-notepad.html" title="Télécharger NotePad ++ v3.4">NotePad ++ v3.4</a>
</li>

Pourquoi faire deux éléments de liste, pour un seul lien effectif ?

Sinon, si tu tiens absolument à mettre tes deux textes, mets-les tous les deux dans le même élément de liste, et dans le même lien :

<li>
<a href="http://www.clubic.com/telecharger-fiche9567-notepad.html" title="Télécharger NotePad ++ v3.4">NotePad ++ v3.4<br>Télécharger Editeur de Source</a>
</li>

Mais, tu mettrais beaucoup trop d'éléments textuels, dans un élément de menu, qui se doit d'être le plus simple possible.

Et, pour finir, je suis loin d'être un expert en la matière !

Donc, écoute aussi les avis et conseils des autres, ils sont pour la plupart, beaucoup plus expérimentés que moi.

Modifié 28 Février 2006 par captain_torche

[Guest kaporal-7]

Merci pour tous votre aide, merci pour les bons retours que j'ai eu comme sarc ci dessus.

J'ai encore énormement de choses à apprendre et je compte bien continuer sur ma lancée, mais je voudrais avoir à vous tous votre avis sur ma page actuelle.

A bientôt

www.mediakap.net