Conseil pour une mise en page (en CSS).

Invité
Invité n'ayant pas de compte PHPfrance

19 juin 2006, 23:28

Voilà, je débute en CSS, je viens d'apprendre un peu le fonctionnement de tout ceci, et je me lance donc dans la refonte de mon site, ce dernier mis en page grâce à l'utilisation des tableaux.

Mais maintenant que je connais un peu le CSS, je ne sais pas trop vers quelle méthode me tournait.
Mon site se compose d'un en-tête, d'un menu horizontal, d'un menu à gauche, d'une place centrale pour le contenu, d'un menu à droite, et d'un pied de page.

J'ai donc trouvé deux méthodes, l'une consiste apparement à créer un calque général, et ensuite de placer les différents calques avec la méthodes de positionement et d'indiquer la taille des différents blocs.
Et apparement une autre méthode en utilisant le flotement (fload), qui m'a l'air un peu plus compliqué à mettre en oeuvre mais qui (il semblerait) permette une "adaptabilité" précieuse.
j'aimerai ne pas avoir à utiliser de taille fixe (exepté pour les menus sur les cotés, et les hauteurs de l'en tête et du pieds de page) pour que le reste du contenu s'adapte à la résolution du visiteur.

j'espère avoir été clair :/

merci d'avance.

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

19 juin 2006, 23:49

Salut,

Tu as bien détaillé le problème mais il n'y a pas de question hormis "Faites moi ça" :?

Pour info regarde ceci

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Invité
Invité n'ayant pas de compte PHPfrance

20 juin 2006, 00:08

Je n'ai pas pas été assez clair sur ma question alors :D

Enfin je ne sais pas trop vers quelle méthode me tournait, si je dois plutot chercher à utiliser les positions top/bottom/right/left, ou si au contraire je dois plutot chercher à utiliser float, j'arrive à faire mon interface avec cette méthode, mais je n'arrive pas à afficher correctement le menu de droite.

Petit nouveau ! | 8 Messages

28 juin 2006, 14:58

salut !

en fait, pour choisir la méthode à utilisé il faut un bien savoir comment marche les css et deux a quoi tu veux arriver.

deux exemples en xhtml strict et css2 valides comprennant trois colonnes:

http://concepteurweb.nimpor.fr/softcomputing/
http://puc4.nimpor.fr/

je te conseil d'utilisé des float sachant que tu dois vérifier la compatibilité IE/firefox (IE parfoit peut jouer des tours)

pense à la structure de ta page (le moins de div possible) :
5 div pour positionner les élément peuvent suffirent du genre :
<div id="header"></div>
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
<div id="footer"></div>

avec la css:
#header{width:100%; hight:100px}
#left{width:20%;float:left}
#content{width:60%;;float:left}
#right{width:20%;}
#footer{width:100%; clear:left}

ce genre de chose peuvent et doivent etre etre adapté selon les cas.

bon courage.
hervé.

Mammouth du PHP | 601 Messages

28 juin 2006, 21:28

Prend un gabarit plutôt en position relative qui garde le flux.
Ensuite évite de donner des tailles à tes boites, à cause d'un bug d'ie, qui facture 25% en moins que les autres navigateurs.
Je part du postulat que si tu ne donnes pas de largeur, il n'y a pas de bug.
Et donc tu peux déplacer tes blocs avec des margin-top...
évite les padding. Se serai assez long de tout te décrire...
Tu dois faire ton expérience utilisateur, bonne chance.
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Petit nouveau ! | 8 Messages

30 juin 2006, 12:02

--> "à cause d'un bug d'ie, qui facture 25% en moins que les autres navigateurs"

le seul probleme que tu peut avoir avec IE, est si tu défini un width ET un margin ET un padding dans le meme div...
http://hkmovies.nimpor.fr/
-----
La victoire est éphémère et l'échec n'est jamais définitif.
Maître Tran Huu Ha (Maitre de Viet Vo Dao - Art martial traditionnel Vietnamien)

Mammouth du PHP | 601 Messages

13 juil. 2006, 20:45

erreur, parceque seul les div non pas de bordure par défault toutes les autres boites en ont,, en fonction de cette informations et d'autre tu peux tout à fait mettre des marges internes et externes. Grace à l'héritage tu obtiens un affichage identique sur ff et ie.
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"