CSS XHTML quel raisonement prendre

CSS XHTML quel raisonement prendre - HTML/CSS - Programmation

Marsh Posté le 05-07-2005 à 16:56:10    

bonjour   [:itm]  
 
 
    comme depuis un momment, j'esaie de mettre au normes dans mon site internet, mais voila,
    j'ai réussi a crée le disign du site complet mais maintenant il faut le remplir,  :sweat:  
     
 
    je voudrais crée en xhtml et CSS cette page suivant mais sais pas comment raisonner pour
    y arriver
 
    voici la page :
 
 
    (capture d'ecran de mon site pas au norme .....)
    http://img117.imageshack.us/img117/6452/a3qp.jpg
 
    quelqu'un pourais m'aider pour réaliser cette page en CSS et XHTML
    (je veus juste le raisonement a avoir, si on met float, ou 2 conteneurs ... je sais pas
    merci d'avence  
 
 
            ciao à tt le monde @+++


---------------
mon site perso aller visiter
Reply

Marsh Posté le 05-07-2005 à 16:56:10   

Reply

Marsh Posté le 05-07-2005 à 16:59:05    

moi je mettrai les images en float:left, mais ca n'engage que moi.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 05-07-2005 à 17:44:32    

Un truc dans le genre :
 
HTML:

Code :
  1. <h1>Presentation</h1>
  2. <dl>
  3. <dt class="list_img">Les images</dt>
  4. <dd class="list_img">
  5.  <ul>
  6.   <li><img src="img1" /></li>
  7.   <li><img src="img2" /></li>
  8.   <li><img src="img3" /></li>
  9.  </ul>
  10. </dd>
  11. <dt>nom</dt>
  12. <dd>freeman</dd>
  13. <dt>prenom</dt>
  14. <dd>gordon</dd>
  15. <dt>résumé</dt>
  16. <dd>blabla ...</dd>
  17. <dt>la suite ...</dt>
  18. <dd>blabla ...</dd>
  19. </dl>


CSS:

Code :
  1. dl dt.list_img {
  2. display: none;
  3. }
  4. dl dd.list_img ul {
  5. list-style: none;
  6. }
  7. dl dd.list_img ul li {
  8. float:  left;
  9. clear:  left;
  10. }

Reply

Marsh Posté le 05-07-2005 à 17:47:05    

plainsofpain a écrit :

moi je mettrai les images en float:left, mais ca n'engage que moi.


 
Moi je mettrais les éléments de donnée dans des listes classiques ou de définition, les images du jeu (enfin une seule grosse en fait) en background no-repeat en top left ou center left, parce qu'objectivement tout le monde s'en branle de ces images vu ce qu'elles apportent elles sont vraiment juste là pour faire joli, et stoo


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 17:50:14    

Wé c'est encore mieux les images regroupées en une seule et en background du <dl>

Reply

Marsh Posté le 05-07-2005 à 17:51:05    

afbilou a écrit :

Wé c'est encore mieux les images regroupées en une seule et en background du <dl>


[:kbchris]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 18:01:40    

dsl afbilou sa a l'air compliqué ton truk  :heink:  et j'ai pas encore completement vu les dl dd dt (tu as
raison, les images servent a rien, elles sont la pour faire joli  [:itm]  [:itm]  
 
 
 

plainsofpain a écrit :

moi je mettrai les images en float:left, mais ca n'engage que moi.


 
 
 
oui c'est ce que j'ai pensé mais le problème c'est que si je met float: left; a mes images, elles
seront à coté, hors je veus qu'elles soient l'une en dessous de l'autre.
 
il me semble qu'il faut mettre clear: both a l'image qui est en dessous mais je suis pas du tt
sur , merci a vous ....... ciao @+++++   [:athome]


Message édité par robinpintrin le 05-07-2005 à 18:05:02

---------------
mon site perso aller visiter
Reply

Marsh Posté le 05-07-2005 à 18:23:09    

On te suggere ca :

Code :
  1. <h1>Presentation</h1>
  2. <dl>
  3.      <dt>nom</dt>
  4.      <dd>freeman</dd>
  5.      <dt>prenom</dt>
  6.      <dd>gordon</dd>
  7.      <dt>résumé</dt>
  8.      <dd>blabla ...</dd>
  9.      <dt>la suite ...</dt>
  10.      <dd>blabla ...</dd>
  11. </dl>


Et comme on ne peut pas (encore ?) mettre plusieurs background-image sur un element (ici dl) et bien tu construis une seule image qui regroupe les 2 et tu la mets en background du dl.
 
PS : ma solution n'etait vraiment pas compliquée http://membres.lycos.fr/angel2k/petrus/petrusnadette.gif


Message édité par afbilou le 05-07-2005 à 18:23:42
Reply

Marsh Posté le 05-07-2005 à 18:53:38    

oui ou encore tu regroupe les 2 images en une et tu met float left sur l'image et tu ecrit ton txt a coté je pense que c'est encore plus simple,
 
mais, comment sa marche les dl dt dd je comprend pas du tt en faite ????


---------------
mon site perso aller visiter
Reply

Marsh Posté le 05-07-2005 à 19:00:13    

robinpintrin a écrit :

oui ou encore tu regroupe les 2 images en une et tu met float left sur l'image et tu ecrit ton txt a coté je pense que c'est encore plus simple,
 
mais, comment sa marche les dl dt dd je comprend pas du tt en faite ????


RTFM [:petrus75]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 19:00:13   

Reply

Marsh Posté le 05-07-2005 à 19:06:36    

masklinn a écrit :

parce qu'objectivement tout le monde s'en branle de ces images vu ce qu'elles apportent elles sont vraiment juste là pour faire joli, et stoo


Non mais c'est vraiment du délire. :pfff:  

Reply

Marsh Posté le 05-07-2005 à 19:12:10    

The-Shadow a écrit :

Non mais c'est vraiment du délire. :pfff:


T'as rien compris à ce que je disais, mais c'est pas grave [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 19:16:09    

C'est toi qui t'exprimes mal. [:spamafote]

Reply

Marsh Posté le 05-07-2005 à 19:18:35    

The-Shadow a écrit :

C'est toi qui t'exprimes mal. [:spamafote]


Tu en demandes beaucoup à un geek  [:pingouino]


---------------
[:whatde]
Reply

Marsh Posté le 05-07-2005 à 19:28:02    

The-Shadow a écrit :

C'est toi qui t'exprimes mal. [:spamafote]


Données apportées par ces images? aucune
Importance sémantique de ces images? 0
Rôle de ces images dans la page? Décoration
 
=> ça fait partie de la couche de style, background pas img [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 19:36:44    

oui je sais qu'elles servent a rien ces images tu as deja vu un site sans images toi !! non a part de la merde, et meme dans alsacrétion, les citron dans la page il servent a quelque chose .... NON alors chut


---------------
mon site perso aller visiter
Reply

Marsh Posté le 05-07-2005 à 19:39:04    

masklinn a écrit :

Données apportées par ces images? aucune
Importance sémantique de ces images? 0
Rôle de ces images dans la page? Décoration


Et les images du web se limite à ses 3 points pour toi ?
Donc, la bonne nouvelle, c'est que j'avais très bien compris, donc tu ne t'exprimes pas mal.
La mauvaise, c'est que tu as beaucoup à apprendre en communication et en culture graphique, dans une entreprise, tu feras surement un excelent exé, mais pour le reste...

Reply

Marsh Posté le 05-07-2005 à 19:41:41    

[Edit : je reponds a robinpintrin]
 
Il voulait te dire que <img> c pour les images qui apportent une information et qui doivent donc figurer dans le code HTML.
 
Si ton image n'a q'un but decoratif c'est dans ton fichier de style que tu dois définir ton image avec un background-image par exemple.


Message édité par afbilou le 05-07-2005 à 19:44:49
Reply

Marsh Posté le 05-07-2005 à 19:44:32    

The-Shadow a écrit :

Et les images du web se limite à ses 3 points pour toi ?
Donc, la bonne nouvelle, c'est que j'avais très bien compris, donc tu ne t'exprimes pas mal.


Bien sûr que non, mais ces 3 points ont pour but de savoir si l'image est censée être dans le markup ou en tant que background [:itm]

Citation :

tu as deja vu un site sans images toi !!


oui

Citation :

non a part de la merde


bien sûr que non

Citation :

aet meme dans alsacrétion, les citron dans la page il servent a quelque chose .... NON


Et bizarrement ils sont en background et non dans des tags <img> [:dawa]
Ooohh, exactement ce dont je parle [:dawa]
 
PS: certaines images ont effectivement dans des tags <img> sur alsa et toutes apportent des informations, d'ailleurs toutes ont un "ALT" correct [:dawa]
(sauf la balise XITI)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 20:14:39    

bon ..... on peut jamais réusir a te cassé maslkinn lol t trop fort !!!!
ok, je comprendrais a partir de maintenant qu'il ne faut pas mettre des images de decos en, <img> mais en background !!
ciao @+++++


Message édité par robinpintrin le 05-07-2005 à 20:15:36

---------------
mon site perso aller visiter
Reply

Marsh Posté le 05-07-2005 à 20:49:45    

robinpintrin a écrit :

bon ..... on peut jamais réusir a te cassé maslkinn lol t trop fort !!!!


[:kbchris]
 
En même temps je triche, je passe mon temps à lire des blogs qui parlent de ce genre de trucs :o

Citation :

ok, je comprendrais a partir de maintenant qu'il ne faut pas mettre des images de decos en, <img> mais en background !!


 :jap:  
 
Mais bon, je vais quand même mettre quelques exemples de sites sans images et pourtant de qualité.
 
Aucune image (les images genre "Valide XHTML" et les mini photos qui ne font pas partie du design ne comptent naturellement pas :o):


Minimaliste (2 images):


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 20:53:10    

C'est ça que tu appelles des sites de qualités ?
La moitié pourrait être concurrencés par leur équivalent Minitel.
Non mais sérieux, trouve moi un professionnel qui arrive à vendre un site sans aucune image. Tes sites ont un contenu surement très intéressant, mais bon, ils sont moches, genre le truc rébarbatif, tu viens une fois, tu lis et tu te casses parce que ça te gave de voir des trucs si moche en 2005.
 

Reply

Marsh Posté le 05-07-2005 à 20:58:10    

The-Shadow a écrit :

C'est ça que tu appelles des sites de qualités ?
La moitié pourrait être concurrencés par leur équivalent Minitel.
Non mais sérieux, trouve moi un professionnel qui arrive à vendre un site sans aucune image. Tes sites ont un contenu surement très intéressant, mais bon, ils sont moches, genre le truc rébarbatif, tu viens une fois, tu lis et tu te casses parce que ça te gave de voir des trucs si moche en 2005.


 [:xp1700]


---------------
[:whatde]
Reply

Marsh Posté le 05-07-2005 à 20:58:13    

The-Shadow a écrit :

C'est ça que tu appelles des sites de qualités ?
La moitié pourrait être concurrencés par leur équivalent Minitel.
Non mais sérieux, trouve moi un professionnel qui arrive à vendre un site sans aucune image. Tes sites ont un contenu surement très intéressant, mais bon, ils sont moches, genre le truc rébarbatif


Attention, t'as oublié de te plaindre qu'ils sont en anglais [:petrus75]
 
Mais c'est pas grave, au moins tu es un très bon exemple des dérives de l'intoxication par le design: tu ne conçois même plus l'information sans joli noeud autour et tu es capable de cracher sur une boite de chocolat parce qu'elle ne brille pas [:petrus75]

Citation :

tu viens une fois, tu lis et tu te casses parce que ça te gave de voir des trucs si moche en 2005


Sois gentil, ne prends pas ton cas pour une généralité [:petrus75]


Message édité par masklinn le 05-07-2005 à 21:01:51

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 21:01:16    

The-Shadow a écrit :

C'est ça que tu appelles des sites de qualités ?
La moitié pourrait être concurrencés par leur équivalent Minitel.
Non mais sérieux, trouve moi un professionnel qui arrive à vendre un site sans aucune image. Tes sites ont un contenu surement très intéressant, mais bon, ils sont moches, genre le truc rébarbatif, tu viens une fois, tu lis et tu te casses parce que ça te gave de voir des trucs si moche en 2005.


 
Tu exagère les images n'apporteraient abosolument rien à ces sites "technique" et je ne les trouves pas moche mais informatif et c'est tout ce que je demande à ce genre de site  [:airforceone]

Reply

Marsh Posté le 05-07-2005 à 21:05:18    

masklinn a écrit :

Attention, t'as oublié de te plaindre qu'ils sont en anglais [:petrus75]
Mais c'est pas grave, au moins tu es un très bon exemple des dérives de l'intoxication par le design: tu ne conçois même plus l'information sans joli noeud autour et tu es capable de cracher sur une boite de chocolat parce qu'elle ne brille pas [:petrus75]


Rien à voir. Alors oui, je suis moins fort que toi en dev, y'a pas de doute, mais en communication, tu sembles ne pas savoir grand chose. lol, j'imagine des sites comme HFR, matbe, tf1, clubic avec le design des sites que tu viens de donner, la poilade devant mon écran. Le W3C recommande : "Faites des sites accessibles aux aveugles" pas "Faites des sites comme si tout le monde était aveugle".
 

masklinn a écrit :


Sois gentil, ne prends pas ton cas pour une généralité [:petrus75]


Scuze, c'est une habitude que j'ai chopé chez toi. [:airforceone]


Message édité par The-Shadow le 05-07-2005 à 21:07:42
Reply

Marsh Posté le 05-07-2005 à 21:07:19    

Flyman30 a écrit :

Tu exagère les images n'apporteraient abosolument rien à ces sites "technique" et je ne les trouves pas moche mais informatif et c'est tout ce que je demande à ce genre de site  [:airforceone]


Si c'est pour avoir des sites avec cette tête là, je préfère encore acheter des livres ou télécharger un PDF et l'imprimer.
Quand au contenu, j'en sais rien, d'une part quand j'arrive sur un site de cette tête là, je zappe, d'autre part, c'est en Anglais et moi j'accroche pas.

Reply

Marsh Posté le 05-07-2005 à 21:09:50    

The-Shadow a écrit :

Si c'est pour avoir des sites avec cette tête là, je préfère encore acheter des livres ou télécharger un PDF et l'imprimer.
Quand au contenu, j'en sais rien, d'une part quand j'arrive sur un site de cette tête là, je zappe, d'autre part, c'est en Anglais et moi j'accroche pas.


 
C'est surtout ça le problème... mais tu le sait déja  :D  

Reply

Marsh Posté le 05-07-2005 à 21:12:52    

Flyman30 a écrit :

C'est surtout ça le problème... mais tu le sait déja  :D


Euh non, ça n'a rien à voir, devant un site qui ressemble à du texte sur du papier cul (quoique non, mon papier cul est plus attractif), Anglais ou Français, je zappe.

Reply

Marsh Posté le 05-07-2005 à 21:14:42    

The-Shadow a écrit :

Le W3C recommande : "Faites des sites accessibles aux aveugles" pas "Faites des sites comme si tout le monde était aveugle".


Mauvaise-foi man en plein travail [:benou_miam]  
 
On m'a dit que les sites webs sans images étaient nécessairement de la merde, je montre que non. Ce sont des sites orientés techies et non généralistes (et encore, whitespace et asterisk* sont des sites de designers) mais ils restent des sites avec un contenu de très très haut niveau et dans lesquels la clarté et la simplicité règne, afin d'orienter le lecteur vers l'important, le contenu.
 
Ceci signifie-t-il que je conseille une pareille rigueur? Pas nécessairement
Ceci signifie-t-il que le W3C demande des sites de ce type? Absolument pas
 
Ca signifie simplement qu'on peut avoir des sites de qualité, faciles à lire et intéressants sans images.
 
Mais que tu ne le comprennes pas ne m'étonne pas [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 21:18:35    

masklinn a écrit :

Mauvaise-foi man en plein travail [:benou_miam]


C'est bien de prévenir, ça permet de déchifrer la suite de ton message.
 
Sujet clos pour moi.
T'es aussi borné que doué.  

Reply

Marsh Posté le 05-07-2005 à 21:20:37    

Whoa, t'as pris des cours chez Drasche pour casser pareillement? [:mlc]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 21:45:54    

C'est pas bientot fini ici ? :D .. De toutes façon tout le monde a raison dans ce genre de combat ... D'un coté moi je consulte des sites pour m'informer, et je veux que ce soit rapide (pas besoin de telecharger 5 mo de flash/gif/... a chaque page), si j veux voir des petites fleurs/une montagne/... j'ouvre ma fenetre ou je sors. De l'autre c'est vrai qu'une petite touche de couleur tue rarement quelqu'un et qu'un site aillant un design bien construit et soigné sera toujours un peu plus "accrochant" que son equivalent .txt ...


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 05-07-2005 à 23:57:56    

Un bo site pratikement sans image : http://openweb.eu.org/ nyark :p

Reply

Marsh Posté le 06-07-2005 à 08:15:07    

www.roane-irkana.net, mon blog avec une image (logo firefox :D)
 
Bon y a surement des trucs faux, mais le but pour moi est de regrouper tout ce que je sais (vrai ou faux), et d'en laisser une trace la.
 
Donc voila, une beau blog avec UNE image.
 
Edit : je précise qu'il n'a que quelques jours, que j'ai pas vérifié les bêtises que j'ai pu laisser dedans. Le but est de faire une progression XHTML->CSS->(JS)->PHP/SQL. En effet, en francais, aucun site ne reprend les bases de l'HTML entièrement adaptée pour écrire un document XHTML correct. J'essaie de rectifier le tir, et peut-etre qu'un jour ca ira sur un site plus connu.


Message édité par plainsofpain le 06-07-2005 à 08:17:34

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 06-07-2005 à 13:54:52    

il y a aussihttp://css.maxdesign.com.au qui est
un site très bien, il n'y a pas d'images mais est très inscructif, j'ai apris beaucoup de chose  
sur se site.
 
Perso, j'avoue que me site n'est très interéssant on vas dire, car il a repris des informations
d'autres sites donc j'esaie de le rendre un peu plus joli pour attiré des surfeurs et donc leur
faire acheter Half-life 2 (mon site)
 
au faite, je l'ai refait en CSS et XHTML, est t-il mieu que mon ancien site ???
mon nouveau site(est t-il au normes ????)


Message édité par robinpintrin le 06-07-2005 à 13:58:08

---------------
mon site perso aller visiter
Reply

Marsh Posté le 06-07-2005 à 14:28:33    

pas du tout :(

Reply

Marsh Posté le 06-07-2005 à 14:42:14    

robinpintrin a écrit :

au faite, je l'ai refait en CSS et XHTML, est t-il mieu que mon ancien site ???
mon nouveau site(est t-il au normes ????)


C'est pas top (beaucoup de bugs d'affichage sous FF et des fautes d'orthographe et de grammaire), le charset n'est pas précisé et ça valide pas, il y a des nestings redondants et des structures à l'intérêt et à la sémantique discutables (<div class="image1"></div> [:pingouino])


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 06-07-2005 à 17:04:16    

comment ça tu préfère mon ancien site ??
 
ps j'ai pas fini les meta, les fautes de gramaires: je les ai pas relu, j'ai pas encore mis le charset


---------------
mon site perso aller visiter
Reply

Marsh Posté le 06-07-2005 à 23:00:05    

svp reponder moi pour savoir di je continue de faire des autres pages de mon nouveau site ou si j'arraite !!

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed