28172 sujets

CSS et mise en forme, CSS3

Design extensible

Bonjour,

Sans vouloir jouer les rabats joie, mais je trouve qu'il manque quelques précisions sur la réalisation de sites extensibles par opposition aux sites à dimensions fixes ... (j'ai le livre CSS 2 design web qui est d'ailleurs pour moi la référence en la matière). Je vous avoue que même en regardant les codes CSS de zengarden, je n'ai pas réussi à créer un design extensible.
A ce sujet, j'aimerai savoir s'il est possible de faire un site extensible avec l'image jointe comme design imposé ?
Il y a un menu à gauche, un bloc au milieu et un menu à droite.
Pour l'instant c'est fixe, le code ressemble à ça :

<body>
<div id="cahier">
     <div id="gauche">
     </div>
     <div id="bloc">
     </div>
     <div id="droite">
     </div>
</div>
</body>


#cahier{
background: url(../templates/cahier.jpg) no-repeat;
width:820px;
height:600px;
margin-left : auto;
margin-right: auto;
}

#gauche { width:5%; text-align:left; color:#000000; margin-left:78px; padding-right:5px; margin-right:1%; float:left; margin-top:97px;}

#block { width:390px; text-indent:0em; color:#000000; margin-left: 80px;padding-right:5%; padding-top:0; height:450px; overflow-y:auto; margin-right:1%;padding-top:20px;}

#droite {width:90px; text-indent:0em; color:#000000; margin-left:45px; padding-right:1%; padding-top:0; margin-right:1%;padding-top:0px; position:relative; left:645px; top:-395px;}


Si vous avez des tutos la dessus je suis preneur (Sur la façon dont on implémente un site web en CSS dont le design s'adapte à la résolution écran)
Je vous remercie par avance pour votre aide précieuse.
upload/15062-cahierTest.jpg
Modifié par popovitch (26 Feb 2008 - 17:37)
J'ai jamais utilisé de gabarit ... mais pourquoi pas si ça peut me simplifier la vie
Y a quand même 2-3 trucs que je comprends pas :

Dans la série de gabarits "positionnement absolus" on dit :
"Inadaptés pour des colonnes de hauteurs égales."

Mais dans l'exemple 
http://css.alsacreations.com/modeles/modele5.htm
les colonnes "menu" et droite sont de hauteurs égales pourtant. Je n'ai pas compris apparemment

Dans le livre CSS2 on parle aussi de cadre élastiques dans les 2 dimensions mais cela ne vaut que pour une forme noire sur fond blanc quasiment car dès qu'on veut un dégradé c'est pas possible ?
Ce serait utilisable dans mon cas ?

Par rapport à mon design de cahier, je pourrait utiliser un gabarit alors ? En fait il faudrait que les bords du cahier soient toujours à 20px des bords de ma fenêtre quelque soit la résolution, il faut que je découpe l'image du cahier en 5 avec un gabarit de ce genre : header, footer, gauche, centre et droit ?
Modifié par popovitch (26 Feb 2008 - 19:06)
popovitch a écrit :
Sans vouloir jouer les rabats joie, mais je trouve qu'il manque quelques précisions sur la réalisation de sites extensibles par opposition aux sites à dimensions fixes ...

Ah? Faire un site pour toutes les résolutions

Pour du trois colonnes fluide:
Un design fluide avec trois «colonnes», grâce au positionnement flottant

Le souci va être d'avoir un cadre graphique extensible, et ça c'est moins évident. J'en parle un peu ici:
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html

Ensuite, il peut être utile de connaitre la technique des colonnes factices (cf. google...), le principe du positionnement absolu d'un élément par rapport à son conteneur positionné en relatif, et enfin de savoir que dans certains cas utiliser un tableau de mise en forme peut être la meilleure solution.

En combinant tout ça, ça me semble très jouable. Mais pour ne rien cacher, pour un débutant ça risque fort d'être un peu ardu.
Modifié par Florent V. (26 Feb 2008 - 19:29)
tout d'abord MERCI pour ces liens.

Si je comprends bien, dans mon cas, le plus simple pour moi serait de passer par un tableau de mise en forme :

- Un tableau dont les cellules ont leurs bordures communes : .tableau { ... border-collapse: collapse; ...}
- avec des cellules sans contenu juste pour les spires du cahier ?

J'aurais bien aimé le faire sans tableau mais je saurais pas quelle technique utiliser et par quoi commencer



Smiley confused
Modifié par popovitch (27 Feb 2008 - 11:00)
popovitch a écrit :
Si je comprends bien, dans mon cas, le plus simple pour moi serait de passer par un tableau de mise en forme

Heu... pas forcément. C'est à étudier. L'image que tu présentes n'est pas assez précise pour que je puisse être catégorique.
je reviendrai dessus une autre fois, quand je serai un peu plus expérimenté.

En tous cas merci pour votre aide
Sujet clos
Aller à