comment organiser son design avec CSS? div / margin / padding -> hein?

comment organiser son design avec CSS? div / margin / padding -> hein? - Web design - Graphisme

Marsh Posté le 20-01-2005 à 11:13:22    

bonjour all.  :hello:  
 
j'ai pris la facheuse habitude consistant à organiser son design avec un gros méchant tableau.  :non: en général je faisait du width 100% et height 100% aussi.  :D et puis je casait mes tableaux et cellules dedans.  :kaola:
or je viens de lire un cour complet et je me sens bien l'envie de le mettre à l'oeuvre. on me parle de balises DIV des attributs MARGIN et PADDING et tout.  
ok mais pour les utiliser ces tags je dois forcément refaire un tableau!  :??:  :??:  
 
expliquez moi...  :heink:

Reply

Marsh Posté le 20-01-2005 à 11:13:22   

Reply

Marsh Posté le 20-01-2005 à 14:55:53    

en fait ce que je veux c'est juste bien structurer ma mise en page, avec un header, un body, et un footer centré et qui parte pas en sucette... en respectant bien les standards W3C.
 
 
( /!\ un up est susceptible de se cacher derrière ce présent message )

Reply

Marsh Posté le 20-01-2005 à 15:03:06    

Salut,  
 
 
Tu trouveras toutes les explications de bases sur le css sur ce dossier : http://www.siteduzero.com/xhtml-css/
 
Pour aller un petit peu plus loin, jette également un coup d'oeil aux articles de ce site et surtout aux positionnements. http://openweb.eu.org/css/
 
Bonne journée ;)  

Reply

Marsh Posté le 20-01-2005 à 15:15:55    

tu vas rire mais c'est de ces sites que je viens.  :D
celui de open web je l'ai imprimé y'a 1 semaine de celà et sur le site du zero le chapitre et semble t'il en construction ("realiser son design" ).
je connais la syntaxe de ces attributs CSS par coeur maintenant mais je ne sais pas COMMENT et QUAND les utiliser.  [:aloy]  
 
merci quand même.  :jap:  
 
une autre suggestion svp les gens?

Reply

Marsh Posté le 20-01-2005 à 15:26:54    

je m'y essaye également, je reviens juste aussi du site du zero...
 
j'ai vu dans dreamweaver y a une fonction convertir les tableaux en calques. ça marche correctement, mais après pour la mise en page et le faire bien centré faut modifier le code et faire appel à quelques astuces.
 
dès que je retrouve le lien je te le mets  ;)

Reply

Marsh Posté le 20-01-2005 à 15:32:07    

ok pour le lien.
 
 
par contre en ce qui me concerne j'ai décidé de proscrire DW, le mode WYSIWIG en general.
je bosse avec notepad++, je l'ai découvert sur ce site même. il colore les syntaxes, c'est tout ce que je cherchai.

Reply

Marsh Posté le 20-01-2005 à 15:39:14    

retrouvé !
 
le tuto que j'ai utilisé c'est celui la
 
sinon y'en a plein ici
 
c'est vrai, faut que laisse tomber DW. j'ai pris notepad++ mais j'ai pas encore pu essayer. mais la fonction de DW m'a bien servi quand même  [:bigbabe] même si apparemment image ready peut le sortir en css et div pour mon design...
 
enjoy !

Reply

Marsh Posté le 20-01-2005 à 15:45:20    

hoho :) j'ai le même probleme de migration de tableaux vers CSS,
 super sites! surtout le deuxième! :)  
 
:hello:


---------------
nouveau pseudo: Nicky66 , merci ;)  
Reply

Marsh Posté le 20-01-2005 à 16:05:45    

bien. les links sont sympa.
tu voudrai pas m'en dire + à propos de image ready?  :heink: j'ai déjà vu ça en analysant le code source de certains sites et je vois souvent des commentaires genre:
 
<!-- image ready slyces -->
qqchose comme ça. c'est quoi? un programme qui te fait ta découpe, te génère la feuille de style et les tableaux?  :??:  :??:
 
 
 
edit:  
 
bon je viens de lire tout ça et je suis déçu:
faut apparemment faire un tableau à la base, comme je le supposais plus haut.
et puis ça semblait bien logique, un tableau pour le côté technique avec XHTML et le côté déco/mise en page/caractéristiques avec du CSS.
je suis déçu, je m'attendais à decouvrir de nouvelles notions.  :D  
 
bon ben je crois que je suis rôdé pour commencer mes pages...  [:airforceone]


Message édité par pmusa le 20-01-2005 à 16:09:51
Reply

Marsh Posté le 20-01-2005 à 16:09:14    

oui, image ready permet de générer le code html (et css avec cette option) en positionnant correctement tes calques en fonction des découpes que tu lui a faite dans le logiciel.
vachement pratique !
 
par contre après au niveau du code, je sais pas ce que ça vaut pour la génération de css, je l'ai pas encore testé, j'avais fait jusqu'à présent des découpages en tableaux.
à voir
 
edit : au fait image ready c'est un programme plus ou moins rattaché à photoshop.


Message édité par farf_13 le 20-01-2005 à 16:10:04
Reply

Marsh Posté le 20-01-2005 à 16:09:14   

Reply

Marsh Posté le 20-01-2005 à 16:15:08    

je suis trop niai.  :heink: j'avais ce programme avec mon pack adobe photoshop 7 et je me suis jamais demandé à quoi pouvait servir ce soft supplémentaire, donc j'ai jamais cliqué dessus.  :??:
 
enfin bon, je fais jamais confiance à ces programmes. j'ai l'impression d'être assisté, je préfère concevoir de A à Z. ça me coûtera peut-être...
 
 
edit:
 
voilà, ceci repond plus ou moins à notre problème:
 
http://openweb.eu.org/articles/tableaux_css/
 
en fait j'ai toujours tendance à critiquer les tableaux et les codes lourds qu'ils generent donc j'osai pas organiser mon design avec. mais quand on y pense c'est utopique, comment tu veux te debrouiller sans.  [:bambookillah]  
 
enjoy.
 
 
SI QQN VEUX EN DIRE DAVANTAGE A CE SUJET J'OUVRE BIEN GRAND MES OREILLES. merki.


Message édité par pmusa le 20-01-2005 à 16:24:43
Reply

Marsh Posté le 20-01-2005 à 16:24:02    

pareil :D ... je l'ai découvert tout recemment.
faire le découpage d'une image a mano, c'est bon quand t'as deux ou trois images résultantes... mais quand y en a plus, accroches-toi :( ...

Reply

Marsh Posté le 20-01-2005 à 16:28:09    

ouais t'as pas tord. mais de toute façon pour moi c'est trop tard c'est fait.  :lol:
j'y penserai la prochaine fois.  [:antp]
 
ça me changera des pratiques laborieuses sous PSP et TOSHOP.  :sweat:  
 
 
quel con chuis. :D

Reply

Sujets relatifs:

Leave a Replay

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