Comment positionner les éléments d'un design avec les <div> ??

Salut à tous, alors voila, j'ai décidé de créer un nouveau design pour mon site sur Halo
http://halo.goldzoneweb.info/

Seulement voila, faire le design, c'est relativement facile.
Par contre, je n'arrive pas à positionner correctement les différents éléments de l'interface via la feuille de style et encore moins à le rendre extensible vers le bas !
http://photomaniak.com/upload/out.php/t118270_apperu.png

Voici un aperçu (dans un tableau ) de l'interface auquel j'aimerai arriver avec les div : http://halo.goldzoneweb.info/v3/
Et ici, un aperçu pour le positionnement du texte mais il s'agit du premier test d'une interface qui n'était pas assez large: http://halo.goldzoneweb.info/v2/


Si quelqu'un pouvait me donner un p'tit coup de main en me disant ce qui ne va pas et comment le corriger (je n'ai peut-être pas découpé l'interface comme il le fallait), ca serait vraiment super sympa car je galère grave pour l'instant !

Pour mieux vous faire une opinion du problème, voici mon dossier avec les différents éléments de mon template:
http://halo.goldzoneweb.info/design.zip

D'avance un grand merci à vous
Modifié par LuciferX (22 Oct 2007 - 04:12)

Salut,

Un peu de lecture

Et encore un peu de lecture:
http://blog.alsacreations.com/2007/04/07/344-demarche-integration-html-css

Je ne fais que ca, lire et encore lire !

Personne ne sait me dire où je me suis planté ?

EDIT: ou me montrer un exemple de design avec des images et non pas avec de la couleur que je puisse un peu comprendre !
Modifié par LuciferX (22 Oct 2007 - 18:02)

Bonjour,
T sur un site d'entraide essentiellement axé sur les différentes versions de CSS
Alors tes problèmes de tableaux...c'est un peut du passer pour tout le monde ici
Pour résumer les références données dans les posts précédents t'indiquent des voies pour construire des designs à partir d'une base saine.
Si tu veux des démos de ce qui peut être fait à partir des styles css, même avec des images, tu peux chercher du côté du css zen garden
Bon courage

gaelgerard a écrit :
Alors tes problèmes de tableaux...c'est un peut du passer pour tout le monde ici

Je n'ai aucun problème de tableaux !!!
Le design avec les tableaux est juste la pour montrer à quoi j'aimerai que le template ressemble, je n'ai aucune intention de coder un design basé sur des tableaux puisque c'est justement la raison de ma visite !

D'ailleurs, je suppose que tu n'as pas téléchargé mon archive sinon, tu y aurais vu qu'il n'y avait aucun tableau !

Au fait, as-tu bien lu mon message ???
Modifié par LuciferX (23 Oct 2007 - 00:29)

a écrit :
Alors tes problèmes de tableaux...c'est un peut du passer pour tout le monde ici

C t juste pour dire qu'un design en CSS ne se construit pas comme un design en tableau
Surtout si tu débutes (et je ne veux pas dire que je serais meilleurs que toi en design css ) tu risques de bien galérer avant de réussir à faire une belle page en imbriquant des images découpées, comme on pouvait le faire avec les tableaux...
Même si tu as déjà beaucoup lu, je te conseilles quand même de te pencher sur les liens de Yorick et Florent V. Tu verras que les approches entre design CSS et en tables sont bien différentes
Pour exemple, tes cadres gris du menu gauche devrait être chacun un bloc css avec un fond gris par dessus le fond du bloc de menu gauche général
Bon courage
ps je télécharge pas les archives Zipppées au premier rencart
Modifié par gaelgerard (24 Oct 2007 - 22:03)

LuciferX a écrit :
D'ailleurs, je suppose que tu n'as pas téléchargé mon archive sinon, tu y aurais vu qu'il n'y avait aucun tableau !

Je n'avais pas téléchargé cette archive Zip non plus.
En général, donner une URL directement consultable est un bon moyen de fournir facilement à tous ceux qui voudraient t'aider tous les éléments dont ils ont besoin pour t'assister: une visualisation rapide du résultat obtenu jusqu'ici, l'intégralité du code, la possibilité de faire des tests à la volée sur la page, etc.

J'ai jeté un coup d'oeil à ton soucis.
Personellement, je crée une grande div (sous GoLive elle porte le nom de grille de mise en page) qui fait toute ma page (position relative ou pas, comme on veut). Et après je positionne les div de mes éléments dedans (en absolute).

Tu peux mettre tes images en fond des div. Mais à mon avis ce serait plus simple (mais pas plus rapide, je te l'accorde, vu que tu as déjà fait ton design en image) et plus "standard" d'habiller tes div avec du css qui leur donne l'apparence que tu souhaites.
Ton site serat ainsi beaucoup plus flexible.


Mais bon, je ne suis pas un expert. Peut être que cette solution n'est elle-même pas très orthodoxe. Ou que je suis à côté de la plaque.

JulesLechat a écrit :
Personellement, je crée une grande div (sous GoLive elle porte le nom de grille de mise en page) qui fait toute ma page (position relative ou pas, comme on veut). Et après je positionne les div de mes éléments dedans (en absolute).

C'est un peu la méthode «quick 'n dirty»: ça marche, ça se fait rapidement, mais... ça ne tient pas compte de l'extensibilité en hauteur qui est la règle pour le rendu à l'écran des pages web.

Dans un design où tout est positionné en absolu, il suffit d'avoir un contenu un peu trop long ou d'augmenter la taille du texte pour que les textes dépassent, se chevauchent, etc. Le positionnement absolu est donc à utiliser avec des pincettes, et parcimonieusement. En particulier si on souhaite travailler l'accessibilité du site web réalisé.