| 3 ESHiN, le 19 jan 2009 à 17:01:04Alors 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/...
http://www.alsacreations.com/gabarits/modele10.html | 4 cecile, le 19 jan 2009 à 18:46:21Bonjour,
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 | 5 ESHiN, le 19 jan 2009 à 20:38:25Je 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... | 6 cecile, le 19 jan 2009 à 22:36:20Bonsoir,
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 | 7 ESHiN, le 20 jan 2009 à 00:19:48C'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. | 8 cecile, le 20 jan 2009 à 00:40:38Bonsoir,
C'est super!!! Je vais le réaliser.
Encore merci de m'avoir bien aidée, vous avez fait presque le boulot à ma place!!
Cécile |
| 9 cecile, le 20 jan 2009 à 01:03:12Il y a juste un petit problème : à cause de l'image en haut à droite (faisant partie du header), le contenu commence un peu bas...Mais je vais faire le header en deux images et essayer de combler l'espace blanc!
Bonne soirée!
Cécile | 10 ESHiN, le 20 jan 2009 à 08:01:46Exactement, découpez le header en 2 images. C'est pour ça qu'il faut en découpé une qui s'arrête a la fin de vos boutons pour que la deuxième commence juste en dessous. Comme ça vous pouvez mettre déjà un titre pour combler, dans la div de la deuxième image =)
De rien pour l'aide c'est normal ;)
A bientôt |
|
|
|
|
|
|
Adaptateur hdmi vga
