28234 sujets

CSS et mise en forme, CSS3

[Résolu] Diviser une page en 2 horizontalement

Bonjour Smiley smile

Je souhaite divisé graphiquement mes pages webs en deux.(voir trois dans certains cas particuliers). La différence entre le haut et le bas est une histoire de couleurs.

J'ai essayé de faire quelque chose : http://thomas.bassetto.free.fr/plop/ mais mes divs ne se collent pas, pourquoi ? Smiley decu

Merci.

PS : ne faites pas attention à la non-cohérence du contenu des divs Smiley langue
Modifié par ThomasB (31 Jul 2006 - 15:04)
Administrateur
Hello,

Cela provient d'un problème très classique de marges/paddings par défaut sur les éléments blocs (ici les <h4> par exemple).

Bonne chance Smiley cligne

EDIT : au fait, chose étrange, il n'y a pas de titre de niveau 2 dans ta page. On passe directement du <h1> au <h3> Smiley confus
Modifié par Raphael (31 Jul 2006 - 13:34)
Salut.

Je pense que ça va t'amener beaucoup de difficultés, ce genre de mise en page Smiley ohwell

Pour commencer, tu devrais donner des hauteurs à tes <div> haut et bas :
height: 50%;


Il faut que ça s'affiche sur toute la hauteur de l'écran ou pas ?

Rem : l'emploi du doctype XHTML 1.1 a des applications particulières, et n'est pas recommandé dans la grande majorité des sites. Tu as besoin de ce doctype pour une raison précise ? Sinon, repasser en XHTML 1.0 et "text/html" ...
Raphael a écrit :
Hello,

Cela provient d'un problème très classique de marges/paddings par défaut sur les éléments blocs (ici les <h4> par exemple).
Ok je m'en doutais un peu, je vais voir ça de plus près.

Raphael a écrit :
EDIT : au fait, chose étrange, il n'y a pas de titre de niveau 2 dans ta page. On passe directement du <h1> au <h3> Smiley confus
Normal je n'ai pas vraiment commencé, ça fait que 2 minutes que je suis dessus et je n'ai pas fait attention à la sémantique Smiley cligne

Merci
Sopo a écrit :
Salut.

Je pense que ça va t'amener beaucoup de difficultés, ce genre de mise en page Smiley ohwell

Pour commencer, tu devrais donner des hauteurs à tes <div> haut et bas :
height: 50%;


Il faut que ça s'affiche sur toute la hauteur de l'écran ou pas ?
Non, non pas besoin de prendre toute la page. Quand ça aura avancé je reposterai pour pour que vous compreniez ce que je veux faire exactement Smiley cligne

Sopo a écrit :
Rem : l'emploi du doctype XHTML 1.1 a des applications particulières, et n'est pas recommandé dans la grande majorité des sites. Tu as besoin de ce doctype pour une raison précise ? Sinon, repasser en XHTML 1.0 et "text/html" ...
Je reviendrais peut-être en XHTML 1.0 c'est vrai mais j'enverrai mon site en "application/xhtml+xml". C'est pas destiné à être un site grand public donc tant pis pour ceux sous IE (sauf si je deviens raisonnable d'ici la mise en ligne Smiley lol ).
Administrateur
Je vois que ton sujet est résolu, par contre nous ne savons pas quelle est finalement la solution... or elle intéresse certainement d'autres membres (c'est l'utilité même d'un forum de discussion).

Peux-tu donner des explications ?

En passant, peux-tu aussi remplacer ton [réglé] par un [Résolu] comme t'y invitent les règles ? Cela permettra de faciliter les recherches de sujets à l'avenir.

Merci d'avance Smiley cligne
Bonjour,

ThomasB a écrit :
Je reviendrais peut-être en XHTML 1.0 c'est vrai mais j'enverrai mon site en "application/xhtml+xml". C'est pas destiné à être un site grand public donc tant pis pour ceux sous IE (sauf si je deviens raisonnable d'ici la mise en ligne Smiley lol ).


Es-tu sûr de maîtriser les conditions nécessaires pour produire un site en XHTML1.1 ?

Pour l'instant, ton code indique clairement que ce n'est pas le cas.

Contrairement à ce que tu sembles penser, le passage d'un type de contenu à l'autre n'est pas une formalité qu'on remplit après avoir conçu sa structure, ses scripts et ses styles. C'est une donnée à intégrer dès le départ, compte-tenu de ses répercussions sur l'ensemble du développement.

Si mon intervention te semble un peu trop franche, en voici la raison: il n'y a aucun intérêt à laisser les gens faire du mauvais application/xhtml+xml quand ce serait déjà formidable qu'ils puissent faire du bon text/html. Ne serai-ce que pour la satisfaction qu'ils en tireront au bout du compte Smiley cligne
Modifié par Laurent Denis (31 Jul 2006 - 13:55)
Vous êtes tous incroyable, vous répondez plus vite que l'éclair !!!

@Raphael : j'ai enlevé mon [réglé] car je l'avais mis sans tester encore. On ne m'y reprendra pas, je reviendrais avec la solution Smiley cligne

@Laurent Denis : Effectivement on code ne ressemble à rien car voici ma démarche quand je commence un nouveau design : je copie/colle du code de différents sites sans le nettoyer.
Ton intervention ne me semble pas un peu trop franche ! Je sais qu'il me reste beaucoup à apprendre Smiley lol . Je vais relire ton blog d'ailleurs, je le suis depuis longtemps et je vais sûrement trouver mon bonheur.

Je reviens avec des solutions et plus d'explications Smiley murf
Dans ce cas, traite dès maintenant ton code en tant qu'application/xhtml+xml: cela t'évitera de perdre du temps en développements inutiles car ils devront être corrigés ou refaits par la suite. Et ce sera également beaucoup plus formateur, quoiqu'à la dur Smiley cligne

Par ailleurs, si tu souhaites le faire afin d'avoir un site "standard", il est impératif de délivrer également un contenu XHTML1.0 text/html à tous les utilisateurs dont le navigateur ne prendra pas en charge XHTML1.1.
Modifié par Laurent Denis (31 Jul 2006 - 14:16)
Mise à jour : http://thomas.bassetto.free.fr/plop/

N'oubliez pas Ctrl+F5

J'ai cherché un peu sans trouver alors comme je ne suis pas patient j'ai utilisé :
* {
	margin: 0;
	padding:0;
}
Smiley confused

J'ai encore des problèmes de mise en page mais c'est car je ne sais pas exactement ce que je veux Smiley lol
Sujet clos
Aller à