A voir également:
- Background, hauteur s'adapte au contenu
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
- Word a trouvé du contenu illisible - Guide
- [<B>contenu masqué</b>] ✓ - Forum Téléphones & tablettes Android
- Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ? ✓ - Forum Word
- Contenu mms ✓ - Forum Vos droits sur internet
2 réponses
En css il est impossible de le faire.
Il s'agit d'une autre technique.
En gros tu fais un div qui englobe les 2 colonnes en même temps.
<div id="monCentre">
<div id="contenuGauche"></div>
<div id="contenuDroite"></div>
</div>
L'astuce consiste à mettre un background sur le div monCentre. Ce background aura l'apparence d'un fond et un trait qui sépare ta colonne de droite qui se répétera jusqu'en bas de la div la plus haute.
Sinon il existe une technique avec le framework Jquery qui aligne 2 ou 3 blocs à la même hauteur.
Il s'agit d'une autre technique.
En gros tu fais un div qui englobe les 2 colonnes en même temps.
<div id="monCentre">
<div id="contenuGauche"></div>
<div id="contenuDroite"></div>
</div>
L'astuce consiste à mettre un background sur le div monCentre. Ce background aura l'apparence d'un fond et un trait qui sépare ta colonne de droite qui se répétera jusqu'en bas de la div la plus haute.
Sinon il existe une technique avec le framework Jquery qui aligne 2 ou 3 blocs à la même hauteur.
Alors en faite, en tableau c'est possible sur ie6, ie7 et FF mais c'est ingérable. C'est plutôt conseillé pour des design de 100% de largeur. Et les tableaux ne doivent plus être utilisé pour la mise en page.
Pour les contenus bas gauche et bas droite, il n'est pas nécessaire de le faire ici. Sauf si tu as un design bien précis.
L'idée est de faire ceci en xhtml + css2 :
<div id="monCentre">
<div id="contenuGauche"></div>
<div id="contenuDroite"></div>
</div>
la css :
#monCentre {
height:100%;
background:url('../images/tonimagedefond.gif');
background-repeat:repeat-y;
}
En gros ton centre n'a pas de hauteur et tes div de droite et gauche non plus.
Ainsi la div contenant le plus de contenu agrandira la div "monCentre", qui elle est chargé d'affichés une image de fond pour simulé les colonnes de même hauteur. C'est difficile à expliquer par écrit.
Le fond ressemblera à ceci : http://www.alsacreations.com/gabarits/styles/img/10-colonnes.png
Je t'envoie quelques liens ou tu pourra mieux comprendre :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
http://www.alsacreations.com/gabarits/modele10.html
Pour les contenus bas gauche et bas droite, il n'est pas nécessaire de le faire ici. Sauf si tu as un design bien précis.
L'idée est de faire ceci en xhtml + css2 :
<div id="monCentre">
<div id="contenuGauche"></div>
<div id="contenuDroite"></div>
</div>
la css :
#monCentre {
height:100%;
background:url('../images/tonimagedefond.gif');
background-repeat:repeat-y;
}
En gros ton centre n'a pas de hauteur et tes div de droite et gauche non plus.
Ainsi la div contenant le plus de contenu agrandira la div "monCentre", qui elle est chargé d'affichés une image de fond pour simulé les colonnes de même hauteur. C'est difficile à expliquer par écrit.
Le fond ressemblera à ceci : http://www.alsacreations.com/gabarits/styles/img/10-colonnes.png
Je t'envoie quelques liens ou tu pourra mieux comprendre :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
http://www.alsacreations.com/gabarits/modele10.html
Bonjour,
J'ai bien pris le temps de comprendre et réaliser la mise en page du site avec la structure que vous m'avez donnée. Cependant, j'ai eu quelques pb :
1) Pour #moncentre: j'ai mis height=100%, mais si je dépasse, le contenu déborde sur le coté gauche, donc lorsque je mets 200%, ca rentre bien dans le cadre...
2) En raison du graphique dégradé et non unie, la répétition ne rend pas bien, c'est pourquoi j'ai tenté de mettre des petites images de 15px pour la répétition...
Voici le lien test: http://parisrsc.fr/test/supp.php
Merci beaucoup
J'ai bien pris le temps de comprendre et réaliser la mise en page du site avec la structure que vous m'avez donnée. Cependant, j'ai eu quelques pb :
1) Pour #moncentre: j'ai mis height=100%, mais si je dépasse, le contenu déborde sur le coté gauche, donc lorsque je mets 200%, ca rentre bien dans le cadre...
2) En raison du graphique dégradé et non unie, la répétition ne rend pas bien, c'est pourquoi j'ai tenté de mettre des petites images de 15px pour la répétition...
Voici le lien test: http://parisrsc.fr/test/supp.php
Merci beaucoup
Je vais essayé de vous expliquer comment on découpe un design.
Alors pour votre design, il faudrait plutôt faire ceci :
Pour votre centre, enlever le height:100%, et mettez a la place #rubrique { min-height:400px; } dans la CSS.
Quand le centre n'est pas beaucoup rempli, le centre aura une hauteur de 400px par defaut.
Ensuite ce qui ne va pas c'est le header (la banniere).
Il faudrait qu'elle soit découpée, en longueur mais elle doit s'arrêter à 1 carreau rouge apres le rond RSC (au pixel près).
Ensuite vous découpez toute la longueur du site mais d'une hauteur de 1px seulement.
donc un fond de 992px de large sur 1px de haut qu'on mettra en repeat-y. Il faut bien s'arrêter avant le dégradé.
Ensuite pour faire le dégradé, vous créer une autre div au dessus du footer, et vous découpez le dégradé de la meme hauteur et largeur que sur votre image. (prenez un caré rouge au dessus du dégradé pour bien faire la jointure avec les carreaux du haut).
Ensuite dans votre div centrale, il faut bien fixé sa largeur, pour que aucun élément à l'interieur dépasse de cette div.
Pour résumé voici l'architecture que vous devriez avoir :
<div id="page"><!-- ici une div pour centrer tout le site d'un seul coup -->
<div id="header"><!-- ici votre banniere découper et s'arretant en hauteur a la fin du rond du logo-->
<div id="menu"></div><!-- a linterieur de la div banniere on y met le menu, jouer avec les padding Top, pour le caller en bas -->
</div>
<div id="contenu"><!-- ici l'equivalent de votre div Rubrique-->
<div id="colonneGauche"></div><!-- float left, pr coller la colonne a gauche avec un width fixe -->
<div id="centre">Ici votre texte</div><!-- float left, pr coller le centre a la colonne a gauche avec un width fixe egalement-->
<div id="colonneDroite"></div><!-- float left aussi, pr coller lla colonne droite au centre du milieu avec un width fixe egalement-->
</div>
<div id="footerDegrader"></div><!!-- en une seule image, comme pr la banniere, si besoin de mettre du texte, refaire 3 div dedans, gauche, centre et droite-->
<div id="footer"></div> <!-- enfin la derniere div pour cloturer le bas, un clear:both sera sans doute necessaire c'est cette image la qu'il faut mettre en background : http://parisrsc.fr/test/images/copyright.jpg -->
</div>
Voila a peu prêt ce que vous devriez faire. Si j'avais du temps je vous l'auriez fais avec plaisir. Si vous avez encore un soucis, hésitez pas.
ps : pardon pour les fautes de grammaire et d'orthographe...
Alors pour votre design, il faudrait plutôt faire ceci :
Pour votre centre, enlever le height:100%, et mettez a la place #rubrique { min-height:400px; } dans la CSS.
Quand le centre n'est pas beaucoup rempli, le centre aura une hauteur de 400px par defaut.
Ensuite ce qui ne va pas c'est le header (la banniere).
Il faudrait qu'elle soit découpée, en longueur mais elle doit s'arrêter à 1 carreau rouge apres le rond RSC (au pixel près).
Ensuite vous découpez toute la longueur du site mais d'une hauteur de 1px seulement.
donc un fond de 992px de large sur 1px de haut qu'on mettra en repeat-y. Il faut bien s'arrêter avant le dégradé.
Ensuite pour faire le dégradé, vous créer une autre div au dessus du footer, et vous découpez le dégradé de la meme hauteur et largeur que sur votre image. (prenez un caré rouge au dessus du dégradé pour bien faire la jointure avec les carreaux du haut).
Ensuite dans votre div centrale, il faut bien fixé sa largeur, pour que aucun élément à l'interieur dépasse de cette div.
Pour résumé voici l'architecture que vous devriez avoir :
<div id="page"><!-- ici une div pour centrer tout le site d'un seul coup -->
<div id="header"><!-- ici votre banniere découper et s'arretant en hauteur a la fin du rond du logo-->
<div id="menu"></div><!-- a linterieur de la div banniere on y met le menu, jouer avec les padding Top, pour le caller en bas -->
</div>
<div id="contenu"><!-- ici l'equivalent de votre div Rubrique-->
<div id="colonneGauche"></div><!-- float left, pr coller la colonne a gauche avec un width fixe -->
<div id="centre">Ici votre texte</div><!-- float left, pr coller le centre a la colonne a gauche avec un width fixe egalement-->
<div id="colonneDroite"></div><!-- float left aussi, pr coller lla colonne droite au centre du milieu avec un width fixe egalement-->
</div>
<div id="footerDegrader"></div><!!-- en une seule image, comme pr la banniere, si besoin de mettre du texte, refaire 3 div dedans, gauche, centre et droite-->
<div id="footer"></div> <!-- enfin la derniere div pour cloturer le bas, un clear:both sera sans doute necessaire c'est cette image la qu'il faut mettre en background : http://parisrsc.fr/test/images/copyright.jpg -->
</div>
Voila a peu prêt ce que vous devriez faire. Si j'avais du temps je vous l'auriez fais avec plaisir. Si vous avez encore un soucis, hésitez pas.
ps : pardon pour les fautes de grammaire et d'orthographe...
Bonsoir,
J'apprécie énormément votre aide donc un grand grand merci!!!
j'ai lu votre message mais j'ai mal compris certaines choses, alors pour mieux visualiser et mieux me dire mes erreurs, voici une découpe_test : http://parisrsc.fr/test/images/test_decoupe.gif
"la découpe de toute la longueur du site mais d'une hauteur de 1px seulement donc un fond de 992px de large sur 1px de haut qu'on mettra en repeat-y. cette découpe, j'insère bien dans la div "contenu" ?
"Il faut bien s'arrêter avant le dégradé ": donc si je découpe de 1px et m'arrêter avant le dégradé, j'aurai plusieurs petites découpes qui seront insérées dans la div "contenu"?
Merci encore
J'apprécie énormément votre aide donc un grand grand merci!!!
j'ai lu votre message mais j'ai mal compris certaines choses, alors pour mieux visualiser et mieux me dire mes erreurs, voici une découpe_test : http://parisrsc.fr/test/images/test_decoupe.gif
"la découpe de toute la longueur du site mais d'une hauteur de 1px seulement donc un fond de 992px de large sur 1px de haut qu'on mettra en repeat-y. cette découpe, j'insère bien dans la div "contenu" ?
"Il faut bien s'arrêter avant le dégradé ": donc si je découpe de 1px et m'arrêter avant le dégradé, j'aurai plusieurs petites découpes qui seront insérées dans la div "contenu"?
Merci encore
C'est pratiquement ça.
La div contenu contient l'image de 1px de haut sur 992px de large et vous mettez un repeat-y dessus (ce qui répétera l'image jusqu'à la fin de la div).
La prochaine div c'est le premier footer (l'image du dégradé). Ainsi la div contenu s'ajustera pile poil sur la div du footer (comme si elle formait une seule image).
C'est pourquoi il faut découper précisément sur une ligne d'un carreau rouge sur votre design pour obtenir une jointure de deux div comme si elle formait une seule image.
A propos de votre remarque sur la capture d'écran, il est vrai que j'ai pas vue le coin de la photo de droite.
Pour y remédier vous pouvez découper le header en 2 images.
Une qui s'arrete en dessous de vos boutons. Une autre qui reprends la fin de vos boutons jusqu'au coin de la photo de droite, en dépassant un petit peu afin d'aller sur une ligne d'un carreau rouge.
ou alors faire comme j'ai dis précédemment (tout en faisant attention au poids de l'image), un header une seule image qui s'arrête a la fin du coin de la photo tout simplement.
La div contenu contient l'image de 1px de haut sur 992px de large et vous mettez un repeat-y dessus (ce qui répétera l'image jusqu'à la fin de la div).
La prochaine div c'est le premier footer (l'image du dégradé). Ainsi la div contenu s'ajustera pile poil sur la div du footer (comme si elle formait une seule image).
C'est pourquoi il faut découper précisément sur une ligne d'un carreau rouge sur votre design pour obtenir une jointure de deux div comme si elle formait une seule image.
A propos de votre remarque sur la capture d'écran, il est vrai que j'ai pas vue le coin de la photo de droite.
Pour y remédier vous pouvez découper le header en 2 images.
Une qui s'arrete en dessous de vos boutons. Une autre qui reprends la fin de vos boutons jusqu'au coin de la photo de droite, en dépassant un petit peu afin d'aller sur une ligne d'un carreau rouge.
ou alors faire comme j'ai dis précédemment (tout en faisant attention au poids de l'image), un header une seule image qui s'arrête a la fin du coin de la photo tout simplement.
19 janv. 2009 à 13:13
Merci beaucoup de m'avoir répondu. Je vais essayer de réaliser.
Je voulais savoir si j'ai en plus des "contenugauche_bas" et contenudroit_bas" qui sont des images de 15px dans le but de répéter pour ne pas voir l'effet dégradé, comment pourrais je les intégrer? (voici l'adresse du site en construction pour mieux visualiser: http://parisrsc.fr/test/liens.php).
(Le site était fait avec les tableaux insérés dans le div "moncentre" car entre temps, comme ma technique avec les div ne marchaient pas, j'ai essayé avec les tableaux qui me donnent de bon résultat sous FF mais sous ie ca ne marche pas).
Merci d'avance