Mise en forme d'une page !! Appel aux génies du CSS !!!

Voila j'ai une mise en page a faire pour un site mais avant de m'emballer et de m'apercevoir au bout de 2 jours que mon site n'est pas compatible IE ou Firefox j'aimerai avoir votre avis. Selon vous que donnerai la mise en page suivante en CSS ???


Merci,

PS : Je suis désolé pour les couleurs horibles de mon images qui jure avec le trés beau design de alsacreations.
Modifié par Vianney78 (07 Jun 2007 - 16:06)

Rassure-moi, tu ne demandes pas qu'on te ponde un code tout fait, n'est-ce pas?

qu'est ce que tu veux qu'on te reponde ?

si ton site n'est pas compatible IE ou Firefox comme tu dit c'est qu'il y a un probleme avec ta structure html ou ton code css ...

mi wi si possibleu avac Hassan séhef !

A première vue, il faut créer un conteneur global de largeur 980.

Ensuite, en premier élément, tu mets la colonne de droite, en float right.

Puis autre contenant pour le left, le head et le content.
Tu le laisse le head en position normale, puis tu mets le left en float à gauche. Je te conseille de lire le tutoriel sur la mise en page avec les flotant et en particulier, la dernière partie sur le contexte de formatage, ça te sera très util. tu découvrivras, entre autre, que ton content peut rester "dans le flux" c'est à dire, pas de position float.
Enfin, tu rajoutes ton footer en clear: both.

Si tu n'as rien compris à ce que j'ai écrit, c'est qu'il te manque des concepts fondamentaux sur le positionnement en css, il y a un article sur openweb qui est très bien pour expliquer ces principes...

bonne chance !

yahrou a écrit :
Ensuite, en premier élément, tu mets la colonne de droite, en float right.

Ça, ça va dépendre du type de contenu qu'accueille chaque zone...
Du moins si on se préoccupe d'accessibilité, de rendu sans CSS et de compréhension du contenu une fois linéarisé, etc.

Rien à redire sur les autres conseils, qui sont très bons.

Vianney78 a écrit :
Selon vous que donnerai la mise en page suivante en CSS ???

On ne peut pas répondre à ta question parce que qu'on ne sait pas dans quel ordre ton code html est déclaré dans le document.

La question c'est : est ce que toi tu le connais cet ordre ? Est ce que tu t'es posé des questions là dessus ?

C'est très important vois tu parce que l'ordre de déclaration du code se fait a priori, sur des considérations de cohérence et de pertinence de l'organisation du document html, et pas du tout sur des considérations de rendu à l'écran via une quelconque CSS.

A cet égard le fait que tu appelles un des block "right" et un autre "left" est déjà problématique.
Modifié par Christian Le Bouler (07 Jun 2007 - 19:01)

bon a moins que tu n'es fixé les hauteurs de la même maniere que les largeurs tu auras surement besoin des colonnes factices

J'ai essayé ça. Avec les float. Ca marche pas.

http://www.directlogo.net/test-css2

J'ai essayé d'adapter les modeles qu'on trouve sur ce site ca marche qand quand j'integre un truc qui s'appel Myspeach.

Vianney78 a écrit :
J'ai essayé ça. Avec les float. Ca marche pas.

http://www.directlogo.net/test-css2

Ben si, ça marche pas mal. Il manque juste un peu de colonnes factices et des marges sur le bloc de contenu, et ça roule.

Par contre, comme le soulève Christian, il faudrait tenir compte de l'ordre des contenus dans le code HTML. Bouleverser totalement l'ordre des contenus juste pour faire une mise en page un peu plus facilement, c'est dommage.

Sur ta page de test, l'ordre des contenus est le suivant (je copie-colle depuis la page) :

a écrit :
Ici mon "right"
Ici mon "header"
Ici mon "left"
Ici mon "content"
Ici mon "footer"

C'est un peu erratique...

.. alors que l'on pourrait obtenir le même résultat graphique avec :
- sept div ;
- dont deux flottantes ;
- et deux autres avec une marge chacune.
Pour obtenir l'ordre suivant : header, left, content, right, footer.

Mais pas sûr que l'ordre en question soit le plus pertinent. Ça dépendra de ton contenu.
Modifié par Florent V. (07 Jun 2007 - 21:31)