[Délestage] Mise en forme : je suis au bord de la dépression

Salut à tous,

Malgré toute l'aide que vous m'avez apportée ces dernières semaines, la mise en forme de mon site est catastrophique et je suis au bord de la dépression nerveuse. Alors je me résouds à vous demander encore une fois de l'aide car je ne peux plus perdre encore des jours entiers à chercher dans le vide

Toujours la même adresse : http://www.fcsion4ever.com/v3.1/presse.php
(J'ai mis une bordure au tableau de fond et des lignes noires autour des <div> pour les faire ressortir)

J'ai un grand tableau en fond, et sur la cellule centrale des <div>. Je suis conscient qu'avoir ce grand tableau en fond c'est contraire à tout ce que je lis sur ce forum, alors je veux repartir de 0 et faire qqch de correct !

Je ne vous demande bien sûr pas de faire ma mise en page, mais svp dites-moi comment séparer correctement le site, où mettre les <div>, s'ils doivent être absolus ou relatifs, parce que je commence vraiment à tout mélanger et à faire n'importe quoi

Un grand merci d'avance, et j'annonce déjà que les âmes charitables qui m'aideront auront une statue à leur effigie devant ma maison
Modifié par mijack (22 Feb 2005 - 22:42)

Tu peux jeter un oeil ici :
http://www.inknoise.com/experimental/layoutomatic.php

J'ai jeté un oeil à ton lien, c'est quoi les width \width et w\idth ? C'est un hack ?

Wé c'est un hack, c'est pas très class comme hack je trouve, on sait pas à quoi s'attendre dans le futur avec tout ça, parmi les hacks, c'est loin d'être le plus "sûr"

mijack a écrit :
Salut à tous,

Je ne vous demande bien sûr pas de faire ma mise en page, mais svp dites-moi comment séparer correctement le site, où mettre les <div>, s'ils doivent être absolus ou relatifs, parce que je commence vraiment à tout mélanger et à faire n'importe quoi

salut

En reprenant la structure une en-tête, 3 colonnes, un pied de page, tu peux utiliser un template de ce type qui fonctionne sous IE et firefox sans ce hack qui est effectivement assez affreux !
Modifié le 20 Jan 2005 - 18:10

Comment gérer alors une zone étirable sur le titre ? Et pour les éléments de bordure à gauche et à droite ? :

Zone étirable dans le titre :


Image sur la bordure :

mijack a écrit :

Un grand merci d'avance, et j'annonce déjà que les âmes charitables qui m'aideront auront une statue à leur effigie devant ma maison

En effet, c'est affreux comme hack.
Je vais avoir ma statue quand même ?

Stephan a écrit :

En effet, c'est affreux comme hack.
Je vais avoir ma statue quand même ?

Mon problème n'est pas encore complètement résolu (c.f. mon post précédent)

Et si tu nous présentais une version en ligne de ce que tu as accompli jusqu'à maintenant ?

Justement je ne peux pas commencer avant de savoir ce qu'il faut faire pour gérer les 2 problèmes que je cite ci-dessus (c.f. les 2 images). Par exemple pour la 2e image, faut-il faire un <div> dans un <div>, en faire 2 l'un sous l'autre ?

Ou devrais-je faire qqch avec 5 colonnes (voir image) ?

mijack a écrit :
Justement je ne peux pas commencer avant de savoir ce qu'il faut faire pour gérer les 2 problèmes que je cite ci-dessus (c.f. les 2 images). Par exemple pour la 2e image, faut-il faire un <div> dans un <div>, en faire 2 l'un sous l'autre ?

Ou devrais-je faire qqch avec 5 colonnes (voir image) ?

La div dans la div me parrait une meilleure solution... disons que l'image qui se trouve dans la colonne 1 de ton image pourrait être le background du body, avec un no-repeat, placé à gauche, et l'image de la colonne 5 le background d'une div "container" qu'on pourrait ajouter comme div contenant toutes les autres,no-repeat,placé à droite...

suis-je assez clair ?
Modifié le 21 Jan 2005 - 11:26

Je vois ce que tu veux dire, mais ça sent le bricolage ton histoire Les autres vous cautionnez ça ?

C'est toujours un peu du bricolage les css, mais là au moins c'est un bricolage propre, sans hack, qui passe partout etc. Alors pour moi c'est tout bon

mijack a écrit :
Je vois ce que tu veux dire, mais ça sent le bricolage ton histoire Les autres vous cautionnez ça ?

Si tu ne veux pas de bricolage, du tout (même du "clean") Retire tes "colonnes" 1 et 5... Moi, c'est ce que j'envisagerais, personellement !!! Mais là, je ne réponds plus à ta question
Modifié le 21 Jan 2005 - 11:55

salut mijack, alors je vais tenter de bien répondre à ton problème, bien que je me sois mis aux CSS que récemment, mais j'ai compris le système.
Tu définis dans ta css toutes les parties dont tu as besoin pour ton design.
une fois cela fait, il faut mettre correctement les <div> dans la partie html.
Ce serait un peu longuet à expliquer ici...Tiens, explique moi ton problème par mail, je verrais ce que je peux faire (de préférence sur l'adresse msn)

Sahen a écrit :


Si tu ne veux pas de bricolage, du tout (même du "clean") Retire tes "colonnes" 1 et 5... Moi, c'est ce que j'envisagerais, personellement !!! Mais là, je ne réponds plus à ta question

Le fait de faire 5 colonnes n'était qu'une proposition. Comment tu gères le background et les bordures si tu ne fais pas les colonnes 1 et 5 (en sachant que la largeur est flexible) ?

J'ai essayé plusieurs méthodes, et je n'arrive à rien. Alors je suis vraiment ouvert à vos propositions.

Majbryce a écrit :

Ce serait un peu longuet à expliquer ici...Tiens, explique moi ton problème par mail, je verrais ce que je peux faire (de préférence sur l'adresse msn)

C'est pas le but d'un forum d'expliquer les choses en ligne pour que tout le monde puisse voir la solution et y apporter sa contribution ?

mijack a écrit :

Justement je ne peux pas commencer avant de savoir ce qu'il faut faire pour gérer les 2 problèmes que je cite ci-dessus (c.f. les 2 images). Par exemple pour la 2e image, faut-il faire un <div> dans un <div>, en faire 2 l'un sous l'autre ?

Oh là là !

Si j'ai bien compris, tu n'arrives pas à démarrer ton design en CSS parce que tu ne sais pas comment tu vas gérer la 'tite image à gauche et à droite ?

Encore ici, le problème est que tu as une vision tabulaire de la mise en page par CSS. L'avantage de CSS est justement que l'on peut séparer le contenu de la présentation.

Par expérience, lorsque je transforme une mise en page tableau en "full CSS", je commence par extraire le contenu et à le dénuder de toute présentation. Ensuite, je récupère les images et je refais le tout via CSS. Dans l'impasse, j'ajoute quelques <div> si nécessaire.

On ne fait pas d'omelette sans casser des oeufs...
...alors casses ton design

J'ai fait un essai : j'ai laissé une bordure grise aux <div> pour la lisibilité. Votre avis ?

http://www.fcsion4ever.com/v3.1/test.htm

J'ai privilégié l'affichage en 3 <div> au milieu. Mais je ne sais toujours pas comment gérer les 2 images qui doivent se mettre sur les bords (c.f. mon post plus haut).
Modifié le 23 Jan 2005 - 21:05

Et bien il y a du progrès !

Maintenant, pour mieux voir comment se comportent les différentes sections, tu peux utiliser du "dummy text"

<!-- Un titre -->
<h1>Titre</h1>

<!-- Une liste de liens -->
<ul>
 <li><a href="#">Lien bidon</a></li>
 <li><a href="#">Lien bidon</a></li>
 <li><a href="#">Lien bidon</a></li>
 <li><a href="#">Lien bidon</a></li>
</ul>

<!-- Un texte de remplissage -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum</p>

Ensuite on verra peut-être pour tes images