[CSS] Discussion

Discussion [CSS] - HTML/CSS - Programmation

Marsh Posté le 02-09-2005 à 17:35:48    

Coucou...
 
Donc pour ceux qui savent et les autres qui ne savent pas, je bosse dans une entreprise de création de site internet...
Stage de 3 mois...
 
Bientôt la fin..ouf...
 
mais voila aprés avoir postés plusieurs fois du code sur ce forum, on m'a dis que <table> and Co pas bon...
(enfin il y a des cas ou cela à de l'utilité bien sur).
 
Donc je me suis dis c'est fou ça...comment c'est possible de faire autrement... :heink:  
Bien entendu j'utilise les classes pour les tableaux etc...(je suis pas barbare à ce point)
 
Donc au fil du temps j'ai regardé les autres possibilitées, je reste bouche bais devant les possibilitées de la programmation dite sémantique....
 
Je me suis donc mis comme objectif personnel de programmer propre...
Dur dur, sur les sites trouvé par google on ne trouve que des exemples et pas vraiment des vrais régles...
sa marche jamais.. :lol: enfin jamais du premier coup,  je met cela sur le compte du peu d'expérience.
 
Et puis ce matin jai demandé au patron, ce qu il pensait de ce genre de programmation, il met dis...
Mais c'est forcement limiter, comment voudrais tu faire les menus dynamiques que l'on fait actuellement avec ta méthode...
 
etc etc....
 
Alors je me pose des questions,
quel voie choisir...oh boulot il est certain que je ne peux pas m'amuser à programmer sémantiquement, mais pour mon compte personnel oui...
 
Mais là je suis plus trés sur si c'est la bonne solution...
je galére à faire un pauvre menu,
personne que je connaise programme différement qu'avec des tableaux...etc etc...
 
Je pense que vous me comprenez...
Comme avez pu le voir, niveau PHP et reste je gére comme quelqu'un de mon niveau...
je n'ai pas de difficultée lors de ce type de programmation...
mais là dés que j'essais de donné un côté sémantique à mon code sa bloque...mon cerveau, ne veut pas comprendre...pour lui seul des tableaux font l'affaire...
 
Alors voila je pourrai continuer longtemps, mais je vais vous laissez parler. donnez votre avis..
 
Et SVP aidez moi à faire le bon choix... :pt1cable:  :pt1cable:  
 
Merci...

Reply

Marsh Posté le 02-09-2005 à 17:35:48   

Reply

Marsh Posté le 02-09-2005 à 17:54:39    

http://masklinnscans.free.fr/webdev.html
 
+ les sites de ma signature.
 
Sinon, pour ton compte personnel, coder esémantiquement est la pratique la plus évidente. Niveau professionnel, cela dépend mais je te conseillerais de coder sémantiquement la aussi, sauf si le patron ne veut pas en entendre parler.
 
Quand tu auras une maitrise assez grande, tu pourras expliquer à ton patron les avantages de cette méthode.


---------------
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 02-09-2005 à 17:56:43    

Oui c'est sur...
 
Mais comment ce débarassé de cette idée de foutre tout le temps des tableaux...
 
Vous avez fait comment...

Reply

Marsh Posté le 02-09-2005 à 17:58:40    

Tu peux réfléchir de la même facon qu'avec des tableaux et programmer avec des div, etc.
 
C'est juste la façon dont tu vas transcrire tes idées en code qui diffère après.
 
Bon, j'ai pas eu à me poser le pb de la transition puisque j'ai directement commencé sans tableau. Pourtant, quand je concois une page, je la pense comme une série de cases. Et ca forme plus ou moins un tableau

Reply

Marsh Posté le 02-09-2005 à 17:58:58    

Comme pour arrêter la cigarette : de la volonté :)


---------------
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 02-09-2005 à 18:01:26    

donc en fait, tu comprends comment bien coder a la fin de ton stage? [:joce]


---------------
IVG en france
Reply

Marsh Posté le 02-09-2005 à 18:02:05    

Mieux vaut tard que jamais uriel hein [:pingouino]


---------------
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 02-09-2005 à 18:02:42    

j'ai jamais arrêter les cigarettes car j'ai jamais commencé.. :lol:
 
Oui je me dis que si javais direct apris bien, sa serait mieux...
 
Le probléme des sites que j'ai trouvé pour l'instant, ils sont pas mal...
 
Mais je sais pas ...j'arrive pas à apprendre quelques choses de ces sites...
juste à faire du copier coller...et cela je déteste..
 
Hier encore j'ai passé 4 heures sur un code...
une liste horizontal..facile...
Mais je voulais un peu la customisé...
 
4 heures de tests pour rien...

Reply

Marsh Posté le 02-09-2005 à 18:02:51    

ah bah je dis pas le contraire, j'ai aussi fait des tableaux pendant longtemps :/
 la demarche est bonne, je trouve dommage que dans ta boite personne te l'ai dit c'est tout :/


---------------
IVG en france
Reply

Marsh Posté le 02-09-2005 à 18:42:09    

xtof_83 a écrit :

Et puis ce matin jai demandé au patron, ce qu il pensait de ce genre de programmation, il met dis...
Mais c'est forcement limiter, comment voudrais tu faire les menus dynamiques que l'on fait actuellement avec ta méthode...


Limite? il n'y a pas de limite, et surtout pas pour de simples menus dynamiques, c'est tout con à faire ce genre de trucs [:spamafote]  
 
Les limites, ce sont les tiennes, celles que tu te poses, et que tu poses à ta recherche d'informations [:spamafote]  
 

xtof_83 a écrit :

Oui c'est sur...
 
Mais comment ce débarassé de cette idée de foutre tout le temps des tableaux...
 
Vous avez fait comment...


Simple: j'ai lu mes sources.
 
Tu lis ton code HTML, en considérant que les balises sont là pour informer sur ce qu'elles contiennent, ou sur l'intonation à prendre. Tu vas parler un peu plus fort pour un <strong>, tu vas séparer un <h2> du reste, tu vas faire des pauses entre les <p>, ...
 
Lire le code d'un site en tables ça n'a aucun sens, lire le source d'une page utilisant des balises signifiant quelque chose ça en a, c'est compréhensible, c'est clair, c'est logique.
 
Et si c'est pas logique, c'est que le code est mauvais [:spamafote]


Message édité par masklinn le 02-09-2005 à 18:42:56

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

Marsh Posté le 02-09-2005 à 18:42:09   

Reply

Marsh Posté le 02-09-2005 à 20:31:54    

Oui je trouve aussi malheureux que dans ma boite personne programme "propre" mais qui peut leur en vouloir...
 
on est tellement conditionner parfois....
 
Ben oui , je vais continuer dans la voie de la perseverance...
 
C'est comme cela qu'on apprend...c'est sur que c'est plus facile quand quelqu un te dis dans quelle direction allé...
 
Mais bon...
ben tous les autres conseils sont les bienvenues..moi je retourne galérer... :lol:

Reply

Marsh Posté le 02-09-2005 à 21:12:52    

et merde, j'ai l'impression que je programme pas propre maintenant,  
vous pouvez m'expliquer pourquoi table pas bien. ( vous utiliser un layout liquide pour que ca s'adapte à la page?)
perso, on m'a appris avec table et un script de redir en fonction de la résolution. apres c vrai que si on réduit volontairement la taille de la fenetre ca marche pas trop.
 
C ca? ou je suis vraiment à coté de mes pompes? (nota : ce qui est possible...)

Reply

Marsh Posté le 02-09-2005 à 22:34:32    

Oui...tout à fait :lol:
 
Mais c'est pas grave, maintenant tu le sait...
Donc plus de tableau now...

Reply

Marsh Posté le 02-09-2005 à 22:38:20    

Remi1036 a écrit :

C ca? ou je suis vraiment à coté de mes pompes? (nota : ce qui est possible...)


T'est à côté de tes pompes :o
 
Pourquoi les tables c'est mal, en français et en drôle: http://www.cybercodeur.net/weblog/ [...] index.html
 
Sinon, il y a pas mal de liens dans ma sig.

Reply

Marsh Posté le 03-09-2005 à 10:07:25    

Cette discussion est tres intéréssante.
Je trouve abérant de voir des webmasters qui ne suive pas les nouvelles normes, c'est un métier qui évolue en permanence alors pourquoi se braque t il a un tel niveau.
Peut etre s'agit il de probleme financier, de temps, car le fait d'apprendre de nouvelles choses coutent tout de meme a l'entreprise avec les formations diverses.
Du moins à ce que je sache, l'apprentissage d'un code propre sémantique n'a rien d'exeptionnel, et ne comporte que des avantages à mon niveau (Je ne suis pas professionnel).
 
Enfin bon, ne te bloque pas a leur fonctionnement sauf dans le cadre du travail comme il le demande.

Reply

Marsh Posté le 03-09-2005 à 11:09:05    

(Masklinn, t'as pas réactivé ta sign. T'as changé d'OS ?)
 
Cf le lien vers les bookmarks de masklinn que j'ai donné en tout cas :)


---------------
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 03-09-2005 à 11:15:42    

C'est vrai que les bookmarks de masklinn sont intéressant et nombreux...
 
Faut juste réussir à s'y retrouver... ;)

Reply

Marsh Posté le 03-09-2005 à 11:16:21    

plainsofpain a écrit :

(Masklinn, t'as pas réactivé ta sign. T'as changé d'OS ?)
 
Cf le lien vers les bookmarks de masklinn que j'ai donné en tout cas :)


Hum, oui, j'ai posté depuis mon serveur fraichement installé en ubuntu [:ciler]


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

Marsh Posté le 03-09-2005 à 11:53:07    

je profite pour demander un petit truc...
(je suis content sa commence à rentrer :lol:)
 
Donc voila j'ai ceci:
CODE GENERE

Code :
  1. <div id="byitem">
  2. <h3 class="Titre_Page">Dossier</h3>
  3. <ul class="vert">
  4.  <li class="tableheader">
  5.   <ul class="horz">
  6.    <li>ID #</li>
  7.    <li class="nom">Nom</li>
  8.    <li class="widget">&nbsp;</li>
  9.    <li class="widget">&nbsp;</li>
  10.   </ul>
  11.  </li>
  12.  <li>
  13.   <ul class="horz">
  14.    <li class="id">1</li>
  15.    <li class="nom">Freeride</li>
  16.    <li class="widget"><input type="checkbox" name='suppListe[]' value='1'></li>
  17.    <li class="widget"><a href="dossier_galerie.php?type=Valider&ID=1">
  18.     <img src="/admin/img/mod.gif" alt="Modifier le dossier" height="20" border=0></a>
  19.    </li>
  20.   </ul>
  21.  </li>
  22.    <li>
  23.   <ul class="horz">
  24.    <li class="id">2</li>
  25.    <li class="nom">Descente</li>
  26.    <li class="widget"><input type="checkbox" name='suppListe[]' value='2'></li>
  27.    <li class="widget"><a href="dossier_galerie.php?type=Valider&ID=2">
  28.     <img src="/admin/img/mod.gif" alt="Modifier le dossier" height="20" border=0></a>
  29.    </li>
  30.   </ul>
  31.  </li>
  32.    <li>
  33.   <ul class="horz">
  34.    <li class="id">3</li>
  35.    <li class="nom">Dirt</li>
  36.    <li class="widget"><input type="checkbox" name='suppListe[]' value='3'></li>
  37.    <li class="widget"><a href="dossier_galerie.php?type=Valider&ID=3">
  38.     <img src="/admin/img/mod.gif" alt="Modifier le dossier" height="20" border=0></a>
  39.    </li>
  40.   </ul>
  41.  </li>
  42.    <li>
  43.   <ul class="horz">
  44.    <li class="id">4</li>
  45.    <li class="nom">Street</li>
  46.    <li class="widget"><input type="checkbox" name='suppListe[]' value='4'></li>
  47.    <li class="widget"><a href="dossier_galerie.php?type=Valider&ID=4">
  48.     <img src="/admin/img/mod.gif" alt="Modifier le dossier" height="20" border=0></a>
  49.    </li>
  50.   </ul>
  51.  </li>
  52.    </ul>
  53. </div>


 
CSS:

Code :
  1. div#byitem ul.vert {
  2. list-style-type: none;
  3. padding: 0;
  4. width:80%;
  5. margin-right: 10%;
  6. margin-left: 10%;
  7. }
  8. div#byitem ul.vert li {
  9. padding: 4px 0;
  10. margin: 0;
  11. height: 14px;
  12. }
  13. div#byitem ul.vert li.odd {
  14. background-color: #CCCCCC;
  15. }
  16. div#byitem ul.horz {
  17. clear: left;
  18. list-style-type: none;
  19. padding: 0;
  20. margin: 0;
  21. }
  22. div#byitem ul.horz li {
  23. float: left;
  24. width: 80px;
  25. padding: 0 20px 0 0;
  26. margin: 0;
  27. }
  28. div#byitem ul.horz li.nom {
  29. width: 500px;
  30. }
  31. div#byitem ul.horz li.widget {
  32. text-align: right;
  33. padding-right: 0;
  34. }
  35. li.tableheader {
  36. font-weight: bold;
  37. background-color:#005D00;
  38. color:#FFFFFF;
  39. }


 
Je n'arrive pas à dire au champs Nom de s'etendre en fonction de l'ouverture de la fenetre...
De plus sous IE l'espacement entre les cellules est énorme, par rapport à FF et c'est chiant...
 
Merci d'avance....

Reply

Marsh Posté le 03-09-2005 à 12:54:54    

Euh j'ai essayer de jouer avec le line-height pour la hauteur des cellules...sa marche sur IE mais plus sur FF

Reply

Marsh Posté le 03-09-2005 à 23:12:35    

j'ai une question concernant les css avec dreamweaver mx 2004.
je voudrais régler l'espace entre 2 lignes quand on fait entrée. j'ai cherché dans l'aide de dreamweaver mais je n'ai pas trouvé.  
de plus, comment fait on pour appliquer un style particulier à chaque sous titre d'une feuille de style
merci

Reply

Marsh Posté le 04-09-2005 à 09:44:37    

Tu modifies la CSS. Dreamwaver, en mode code, doit te permettre de le faire.
 
Et le mode wysiwyg, pour coder proprement, faut oublier, sauf a savoir très exactement ce que l'on fait.


---------------
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 04-09-2005 à 13:01:56    

d'accord je vois, merci ;). faut donc forcément avoir des connaissances en prog à un moment donné. bon je vais voir ça, car j'apprends le javascript et html sur le tas en faisant le site.

Reply

Marsh Posté le 04-09-2005 à 13:18:34    

oui, is tu veux faire le programmation, faut des connaissances en prog :o


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 04-09-2005 à 15:18:34    

KangOl a écrit :

oui, is tu veux faire le programmation, faut des connaissances en prog :o


pas d'calais, pas d'calais....ils l'auraient dit plus tot on n'y s'rait pas allé  :lol:  

Reply

Marsh Posté le 04-09-2005 à 19:47:44    

Mais c'est joli le pas de calais [:pingouino]


---------------
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 04-09-2005 à 23:20:32    

plainsofpain a écrit :

Mais c'est joli le pas de calais [:pingouino]


lol, je sais bien que c'est joli le pas de calais, c'était juste une p'tite boutade destinée au belge (cf gag du grand coluche sur les belges), packe son commentaire n'était pas très constructif et de ce fait ne faisait pas avancer bcp le ..schimilimili...le schimili.... ( :lol: )

Reply

Marsh Posté le 04-09-2005 à 23:36:22    

[HS]
- "Est ce qu'on peut pousser le smilblick?"
- " Non, a quoi pensiez vous?"
- " A rien, c'était pour le faire avancer."
[/HS]
Poussez pas, Je conais la sortie. :lol:

Reply

Marsh Posté le 05-09-2005 à 09:15:30    

xtof_83 : Tu connais deja peut-etre ce lien, mais je te le donne au cas ou.
http://www.csszengarden.com
Il y a aussi celui-la :
http://antenna.readalittle.net/thumblink/zenGarden/
 
Ce dernier ce contente d'afficher un appercu des css de zengarden.

Reply

Marsh Posté le 05-09-2005 à 09:48:15    

Oui je connais...merci.
 
C'est vraiment une référence dans le milieu je pense.
 
C'est fou...
Merci pour le second...sa permet de voir l'ensemble...
Car j'ai du faire 10-15 pages, j'étais dégouté tellement sa tue....

Reply

Marsh Posté le 05-09-2005 à 09:52:08    

xtof_83 a écrit :

j'étais dégouté tellement sa tue....


Et t'es allé voir les "Special Designs"? [:marc]


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

Marsh Posté le 05-09-2005 à 10:10:50    

C'est ou ça?

Reply

Marsh Posté le 05-09-2005 à 10:38:38    

http://www.mezzoblue.com/zengarden [...] fects/001/


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

Marsh Posté le 05-09-2005 à 10:47:45    

Oki merci...
 
Sublime, même si je suis plus pour qu'un site soit visible par tous , sur tous les navigateurs...
 
Définitivement j'adore, les sites ou il y a un jeu avec loption fixed... sa donne un effet d'optique, fantastique...

Reply

Marsh Posté le 15-09-2005 à 13:37:36    

Oh oh j'ai presque réussi à faire saisir à mes patrons la puissance des CSS...
 
Le seul point les titiles, c'est comment faire, lorsque eux on des tableaux imbriquer, comment sa rendrait sémantiquement correct...
 
Quelqu'un aurait un site ou l'affichage est bien compliqué et ou un programmeur basique aurait surement utilisé des tables imbriqué....
 
pour leurs montrer....
 
thanks

Reply

Marsh Posté le 15-09-2005 à 13:40:35    

www.openweb.eu.org ?
 
Hmmm. Le webmail de wanadoo est aux normes depuis peu (enfin à peu près, il me semble qu'il valide pas :o)


---------------
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 15-09-2005 à 13:42:58    

Oui enfin là c'est comme même basique comme affichage...;)
 
J'ai chercher sur cssgarden, mais rien trouvé de méga compliquer...

Reply

Marsh Posté le 15-09-2005 à 13:58:58    

Onesque a écrit :

Bon, j'ai pas eu à me poser le pb de la transition puisque j'ai directement commencé sans tableau. Pourtant, quand je concois une page, je la pense comme une série de cases. Et ca forme plus ou moins un tableau


C'est exactement ce qu'il faut pas faire, malheureusement :(
 
Faut se dire ça : une page web, c'est de l'HTML, c'est tout. Rien d'autre, ni CSS, ni JavaScript. Uniquement de l'HTML... Donc tu fais ta page, tu la structure, tu utilises les éléments comme on te le dit dans la recommandation HTML 4.01. Hésite pas à être un peu prolixe sur la structure, à grouper des éléments, etc...
 
Ensuite tu mets en page tous ces éléments, avec du CSS.
 
Ensuite tu peux rajouter un peu de JS si ça permet de rendre 2-3 trucs plus confortables (genre validation de formulaires...)

Reply

Marsh Posté le 15-09-2005 à 14:38:22    

Je ne suis pas tout a fait d'accord avec FlorentG.
Je pense un peu comme xtof_83,  
le CSS permet de crée des blocs invisible que que l'on imbrique les un par dessus les autres. Je ne concois pas de faire d'abord un page HTML entiere et ensuite rajouter son CSS, du moins je ne fonctionne pas sur ce principe la.
 
Je marche bloc par bloc sachant que ma structure est déja crée sur papier et je voie deja ce que je veux dés le début.
 
Enfin bon, chacun sa technique il faut dire, mais je ne me voie pas du tout fonctionner comme toi.
 
Par contre il est clair que le JS ne doit pas prendre une place importante sur ta page, et elle doit fonctionner sans ce code.

Reply

Marsh Posté le 15-09-2005 à 14:56:27    

Le xhtml/css permet de séparer totalement la sémantique de l'affichage.
Si tu codes en te disant "ha oui, mais ça ca sera caché par la feuille de style" alors tu bousilleras toute l'accéssibilité du site aux malvoyants et à tous ceux qui utilisent un navigateur qui ne gére pas les feuilles de styles et tous ceux qui ont désactivé la prise en charge des feuilles de styles.
 
Essaye donc d'imaginer ce que ca donne ton fameux site pleins de "blocs invisible que que l'on imbrique les un par dessus les autres" quand ils sont tous affiché les uns derriére les autres.
 
D'ailleurs, les images servant uniquement à faire un effet visuel ne devraient jamais se retrouver dans la page xhtml mais uniquement dans le css.
 
 
Ceci dit, je ne dit pas qu'il ne faut pas oublier ce que donera le site avec le css, mais je pense qu'il ne faut surtout pas coder la partei xhtml pour coller avec le css, sans quoi on perd le role normal de l'xhtml.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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