Possible avec du CSS ?

Bonsoir,

Je poste ce message pour avoir confirmation (ou infirmation ) à savoir s'il est bien possible de faire avec du CSS une page internet qui aurait un bloc central fixe avec ses deux côtés qui s'adapte à la largeur du navigateur. Sur ce bloc central, une entête de hauteur fixe, un corps à hauteur variable, et un pied de page à hauteur fixe qui reste toujours en bas de page (et qui s'adapte aussi au navigateur).

Dans un deuxième temps, serait-il possible de faire une mise en forme (image avec des lignes de plusieurs couleurs) qui passerait par l'entête du bloc central, puis par tout le côté gauche (de haut en bas de la page, et qui s'adapterait donc à la hauteur que prend le corps du bloc central) et enfin par le bas de page du bloc central ?

J'ai fait deux schémas pour une meilleure compréhension encore :



Donc, les colonnes jaunes des extrémités devraient être de même taille et s'adapter à la largeur du navigateur avec en plus une largeur minimum pour ne pas faire disparaitre les deux lignes (et là je coince dans le code , dès que je mets une largeur minimum la colonne ne s'adapte plus en largeur au navigateur...) , la colonne du milieu à une largeur fixe, une entête et pied de page fixe en hauteur, mais un corps qui s'adapte au contenu avec une hauteur minimum.

Pour vous montrer comment j'ai commencé à coder, j'ai rajouté les blocs sur le même schéma (3 blocs par colonne) :



Arrivé ici, j'ai deux problèmes :
- Quand mon bloc 2 de la 2ème colonne (donc du corps central) s'adapte au contenu et prend une certaine hauteur, les hauteurs des blocs 2 des colonnes 1 et 3 (colonnes jaunes) ne prennent pas la même hauteur, normal me direz vous car il n'y a pas de contenu mais très embêtant pour moi
Les lignes traversant les différents blocs ne sont pas vraiment un problème du moment que les blocs sont de même niveau, de plus il n'y a que le bloc 2 de la première colonne qui grandit verticalement, et un repeat-y fera bien l'affaire sur le background, d'où l'importance de ce point
- Mon deuxième problème est que je n'arrive pas à faire en sorte que les colonnes jaunes (1 et 3) s'adaptent à la largeur du navigateur, en ayant une largeur minimum pour ne pas effacer les lignes. J'ai bien vu des exemples avec du code "display : table", mais est-ce qu'il permet de faire tout cela ?

Merci d'avance pour m'avoir lu et pour vos réponses.
Modifié par gssoul (30 Dec 2009 - 17:47)

Bonsoir,

As-tu jeté un oeil du côté des gabarits de mise en page CSS d'alsacreations ?

gssoul a écrit :
Je poste ce message pour avoir confirmation (ou infirmation ) à savoir s'il est bien possible [...]

Oui, c'est possible.

gssoul a écrit :
et là je coince dans le code , dès que je mets une largeur minimum la colonne ne s'adapte plus en largeur au navigateur

ALors pour centrer ton bloc principal, il faut utiliser margin:0 auto; (0 étant les marges pour le haut et le bas) sur le bloc à centrer. Pour libérer l'espace nécessaire, il faut donner une taille à ce même bloc central et non aux colonnes que tu dois considérer comme le fond de la page. Pour bien afficher les lignes, tu dois donc calculer la taille du bloc central en fonction de place disponible.

gssoul a écrit :
- Quand mon bloc 2 de la 2ème colonne (donc du corps central) s'adapte au contenu et prend une certaine hauteur, les hauteurs des blocs 2 des colonnes 1 et 3 (colonnes jaunes) ne prennent pas la même hauteur, normal me direz vous car il n'y a pas de contenu mais très embêtant pour moi
Les lignes traversant les différents blocs ne sont pas vraiment un problème du moment que les blocs sont de même niveau, de plus il n'y a que le bloc 2 de la première colonne qui grandit verticalement, et un repeat-y fera bien l'affaire sur le background, d'où l'importance de ce point

Les colonnes factices sont la solution.

Merci tout d'abord pour vos réposnes
Je suis reparti de zéro et je me suis dit que j'allais partir du gabarit 10 de votre site, que j'allais un peu modifier... j'ai juste fait un copier coller des fichier css et Html (dans une page php mais cela ne devrait rien changer je pense), et je n'obtiens pas la même page que vous
Alors si dès le départ, je ne suis pas bon... pour voir de vous mêmes : http://b2entreprise.free-h.net/Test.php

Savez-vous pourquoi ma page est différente de la votre ?

Merci par avance.
Modifié par gssoul (31 Dec 2009 - 10:56)

Apparemmentil y a un problème d'encodage. As-tu bien sauvegarder le fichier en utf8 (c'est indépend de la meta qui précise cet encodage) ?

Si tu utilise dreamweaver, il faut faire Ctrl+J (il me semble) et c'est dans la section encodate il faut choisir l'unicode.

Pour le problème de rendu des colonnes, si tu n'as pas télécharger l'image : http://www.alsacreations.com/static/gabarits/styles/img/10-colonnes.png c'est normal que cela ne fonctionne pas (tu devras modifier le fichier CSS pour donner le bon chemin pour l'image).

Un peu de lecture pour bien comprendre le principe des colonnes factices.

J'utilise Phpedit pour coder, et j'ai fait un copier coller directement dans le logiciel à partir du code source de votre page. Pour ce qui est des photos dont 10-colonnes.png, je l'ai bien récupéré et ai bien mis à jour le lien dans le css

Pourtant le serveur ne trouve pas l'image : http://b2entreprise.free-h.net/10-colonnes.png

Oui, c'est ce que je viens de voir aussi
Problème de download quand j'ai pris l'image
Donc là à priori ça marche (sauf les accents mais ce n'est pas important, il faut que je change chaque caractère ayant un accent par son code html...).

Bon, je vais continuer à essayer de coder, est-ce qu'il est mieux de partir du gabarit 10 ou d'un autre pour arriver à mes fins selon vous ?

Merci

Tu devrais quand même résoudre le problème d'encodage. Il doit bien y avoir dans phpedit une option spécifiant quel doit être l'encodage des fichiers sauvegardés. Ta page est sauvegardée en ISO-8859-1 (ou 15), et demande a être affichée en UTF-8 (dans le doctype), ce n'est pas correct.

Une fois ceci reglé, inutile de changer les caractères en entité html

C'est bon pour les accents, il fallait effectivement passer l'encodage des fichiers en UTF-8 dans les options de phpedit

Reste plus qu'à faire tout le reste !

Un avis sur le gabarit à choisir pour le départ ?

Si j'ai bien compris, tu cherche à faire ce rendu non ?

Oui c'est exactement ça mlbcreation, en sachant que les côtés gauche droite de la colonne centrale (header, nav...) devraient être de même largeur et s'adapter à celle du navigateur sans oublier les 2 lignes verticales de la 1ère colonne (il faut donc un min-width mais le float n'aime pas ça ). La colonne centrale aurait quant-à elle une largeur fixe. Enfin, il n'y aurait que la 3ème ligne (Backgd3, Main...) qui devrait s'adapter en hauteur en avoir une minimum.
Mais après avoir pas mal lu sur le CSS, je commence à douter que cela soit réalisable seulement en CSS.

Ton schéma impliquerait que je code en ligne et non en colonne, penses-tu que ce soit la meilleure solution ?

Je pourrais te préparer un canvas pour demain,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
*{padding:0;margin:0;background:none;}
html, body{width:100%;}
body{background:white;}
.width{width:800px;/* largeur des blocs*/margin:0 auto;}
.padding{padding:20px;}
#header{background:blue;}
.header{background:aqua;height:200px;}
#nav{background:GreenYellow;}
.nav{background:green;height:50px;}
#content{background:LightBlue;}
.content{background:LightSkyBlue;}
#footer{background:HotPink;}
.footer{background:DarkOrchid;height:40px;}
</style>
<title></title>
</head>
<body>
<div id="header">
<div class="width header">
Header
</div>
</div>
<div id="nav">
<div class="width nav">
Menu
</div>
</div>
<div id="content">
<div class="width content">
<div class="padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat, turpis in blandit rhoncus, libero lorem porta elit, nec porta nulla neque in massa. Quisque eget enim erat, nec vestibulum dui. Integer et euismod ligula. Mauris eu sapien eu ipsum posuere molestie. Curabitur erat dui, semper molestie elementum eget, vulputate ac turpis. Morbi imperdiet fermentum tellus, et varius ipsum imperdiet ac. Cras est quam, blandit non elementum volutpat, eleifend ut odio. Pellentesque porttitor sodales velit eget consectetur. Morbi in lorem massa. Aliquam elementum, nibh sit amet dignissim fermentum, felis tortor viverra massa, et ornare sem lacus ultricies velit. Curabitur nunc mi, rutrum et bibendum a, aliquet in nisl. Sed sodales fringilla libero at dictum. Proin volutpat lacus eget orci egestas varius. Curabitur velit sem, vehicula eu rutrum a, luctus eu tortor.

Phasellus massa leo, pretium vel vestibulum dapibus, posuere id nunc. Quisque mattis arcu et turpis luctus viverra. Praesent sed arcu in risus auctor tristique in a mi. Nunc pharetra lacus ut urna commodo posuere. Vivamus ac lorem aliquam dolor ornare fermentum vel sit amet nulla. Ut in eros eu dolor iaculis tincidunt eget nec turpis. Duis sed mollis lectus. Nulla ultrices quam a velit gravida sed consectetur massa hendrerit. Morbi imperdiet lorem eu leo sagittis ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis felis sit amet dui dignissim id sagittis tortor tincidunt. In id nisl diam. 
</div>
</div>
</div>
<div id="footer">
<div class="width footer">
Footer
</div>
</div>
</body>
</html>

Voila maintenant en fait
Modifié par mlbcreation (01 Feb 2010 - 16:07)