28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis en train de développer mon premier site internet pour la boite ou bosse mon père. l'ossature est faite en CSS avec un bandeau une barre de navigation horizontale, une div "conteneur" pour contenir 2 DIV cote a cote "colonne1" et "colonne2", pour finir un footer.

J'ai des soucis de float drop ou autre joyeuse-ries de mise en page liés aux contenu de mes DIV "colonne". J'aimerais trouver des solutions mais j'ai du mal. J'ai essayer le overflow="hidden" ... mais ça donne pas le résultat escompté.

Idéalement j'aimerais que ma div "main" soit de 1024*768 et que le contenu "colonne1" reste à gauche et celui de "colonne2" à droite tout en ayant visibilité de tout le contenu même si cela doit passer par une barre de scroll pour le contenu.

De plus j'ai essayer aussi de centrer verticalement le contenu des colonne avec quelques variables mais le resultat n'a jamais été obtenu.

Merci d'avance si vous pouvez m'aider car après plusieurs jours de docs divers et variées de tests variés je ne trouve pas vraiment Smiley langue

Espace temporaire du site : http://mad86.free.fr/scofab

Et merci encore pour toute l'aide Smiley smile
Bonjour,

mad86 a écrit :
Je suis en train de développer mon premier site internet pour la boite ou bosse mon père.

<En apparté>
Je suppose que vu que tu débutes tout juste, tu n'es pas déclaré comme indépendant. Dans ce cas, deux cas de figure:
1. Tu es payé pour ce travail (quel que soit le montant), c'est donc du travail au noir et c'est illégal.
2. Tu réalises ce travail bénévolement, dans ce cas rien à dire mis à part qu'en offrant une prestation gratuitement tu crées une concurrence déloyale pour les professionnels du secteur. Bon c'est pas méchant hein, mais de manière générale il est mieux vu -- et souvent plus gratifiant pour soi-même -- de réserver ses participations bénévoles à des structures associatives. Surtout si le non-client est une société qui a généré un chiffre d'affaires de près de deux millions d'euros en 2010, et aurait donc les moyens d'investir raisonnablement dans sa communication web.
</En apparté>

mad86 a écrit :
Idéalement j'aimerais que ma div "main" soit de 1024*768

Pas intéressant:
- 1024px c'est trop large pour tenir dans une fenêtre de navigateur sur un écran en 1024*768. En effet, il faut compter les éventuelles bordures de fenêtre, la place prise par une barre de défilement, et le fait que la fenêtre du navigateur n'est pas toujours maximisée. On recommande plutôt une largeur de 960px si on veut que ça tienne confortablement dans ce cas de figure.
- Inutile de définir une hauteur fixe pour les contenus, laisse-les plutôt prendre la hauteur nécessaire. Tu peux éventuellement utiliser min-height si tu souhaites une hauteur minimum sur certains blocs. Par ailleurs, sur un écran en 1024*768 la zone de visualisation du navigateur fera bien moins de 768px de haut (plutôt dans les 500-600px de haut).

mad86 a écrit :
même si cela doit passer par une barre de scroll pour le contenu

Les barres de défilement à l'intérieur d'un bloc de hauteur fixe c'est une erreur. C'est frustrant sur les grands écrans, bloquant sur les petits écrans, inadaptable sur les mobiles... à éviter, sauf si on a des années d'expérience et qu'on sait très précisément ce qu'on fait. Smiley cligne

mad86 a écrit :
De plus j'ai essayer aussi de centrer verticalement le contenu des colonne avec quelques variables mais le resultat n'a jamais été obtenu.

Si tu veux un centrage vertical mieux vaut mettre en page tes colonnes en utilisant display:table-cell (faire une recherche pour trouver un tutoriel sur le sujet). Par contre un menu de navigation centré verticalement ça pourrait être perturbant...