Question sur la hauteur des pages d'un site css

[Anaon]

Bonjour tout le monde,

Voilà j'ai lu différents sujets sur les sites CSS. J'aimerais réussir à rendre mon site plus... "graphique", car pour l'instant, il est en css mais son architecture est très formelle, et comme c'est un site de loisir on va dire, j'aimerais apporter un univers graphique plus important. Voici le site : http://www.magmor.org

Alors voilà, au fil de ma promenade sur le Hub j'ai trouvé des liens vers des modèles qui m'ont beaucoup impressionné, et j'aimerais beaucoup faire quelque chose dans le genre:

> http://www.csszengarden.com/?cssfile=/153/153.css&page=0

> http://www.csszengarden.com/?cssfile=/154/154.css&page=0

Dans la deux cas, je m'intérroge sur la hauteur des pages, sur le second design, il s'agirait d'une seule image de fond, mais alors comment le site s'adapte à un contenu différent?

Dans le premier cas, il semble que l'image de fond soi découpée est là je comprends mieux, dans ce cas, c'est l'image du milieu qui se multiplie suivant le contenu, n'est-ce pas?

Si quelqu'un avait la gentillesse de m'éclaire simplement sur ce sujet avant que je commence à chercher des idées, ce serait génial car ça me bloque...

Merci,

AnaoN.

[artxtra]

Si tu cliques sur View This Design's CSS, tu as accès à la feuille de style (sachant que le html est toujours le même sur csszengarden)...

Tu verras que les body et autres div ne possèdent pas de height, mais une img en background... notamment

body { background: url(bgFull.gif) repeat-x #000000; font: normal 11px/16px Tahoma, Verdana, Arial, sans-serif; color: #333; margin: 0px;	}

L'image (bgFull.gif) se repète en x : il s'agit d'une grande barre verticale (2x2199px) : voilà comment on règle de la hauteur !

N'hésite pas à consulter cette page avec Firefox et l'extension WebDevelopper et dans le bouton Information, à faire afficher les ID et les Class, ainsi que les dimensions des Blocks... puis à faire le lien avec le CSS... tu comprendras à quoi une déclaration CSS correspond dans la page que tu voies...

[Anaon]

Salut artxtra,

Merci pour ta réponse... J'avais regardé la feuille de style, mais mal visiblement, d'accord... C'est une image qui se répète mais... J'avoue ne pas comprendre pourquoi elle se répète verticalement... 2199 c'est la largeur n'est-ce pas? Et elle se répète horizontalement suivant la hauteur de la page non?

Ca m'intrigue, je vais voir si j'ai extension Webdevelopper, merci beaucoup

Modifié 22 Mars 2005 par Anaon

[artxtra]

Salut,

l'img se repète HORIZONTALEMENT !! repeat-x, c-a-d que, comme elle fait 2px, elle se repète tout les 2px en largeur...

j'avoue que j'ai du mal avec ça, c'est un peu comme ma gauche et ma droite...bref...

Je te conseille vivement WebDevelopper en extension : y a tout dedans...

Tant que tu y es, prends colorzilla (pipette à couleur insérée dans firefox), HTMLTidy comme validateur (i'm semble qu'il y en a un dans WebDev....) et Scrapbook pour faire des captures de page... Avec ça t'es paré pour décrypter les pages qui t'intéressent !!

[Anaon]

Merci beaucoup, je vais voir pour les autres extensions

Alors effectivement j'ai vu l'image dont tu parlais mais je ne comprends toujours pas, car c'est image sert d'image de fond à tout le site.

Mais ce qui m'intrigue plus, c'est le cadre blanc/jaune, c'est ça que je ne comprends pas, si le contenu dans cette partie est plus important, c'est tout le design du site qui s'en trouve perturber non? Ou alors il y a tout simplement une div avec ascenseur?

[artxtra]

De quel design tu parles : le 153 ou le 154 ??

Tu verras que chaque ID a une img(url) en background...

Faut regarder quelle taille elles font, dans quel div et tu auras tes réponses...

Je regarderasi ça plus tard pasque là c'est la pause...

...

trop rapide cette pause...

Bref, j'ai jeté un oeil sur les fichiers du design 154.

On a une belle image de 730x2200 qui fait l'ensemble du div#container

#container { position: relative; width: 570px; background: url(bg_home.jpg) no-repeat; margin: 0; padding: 170px 0 0 170px;}

Si ça déborde, on passe à bgFull (2*2199) - en pied-de-page bgBottom1, etc...

Chaque bloc est rempli et défini dans ses dimensions par celles de l'image qu'il contient en background...

Télécharge l'ensemble et joue avec dans Dreamweaver, c'est très instructif !

Modifié 23 Mars 2005 par artxtra

[Anaon]

Si ça déborde, on passe à bgFull (2*2199) - en pied-de-page bgBottom1, etc...

Chaque bloc est rempli et défini dans ses dimensions par celles de l'image qu'il contient en background...

Télécharge l'ensemble et joue avec dans Dreamweaver, c'est très instructif !

Salut,

Déjà merci de m'aider

Donc je te suis, je parlais bien du 154. Ok donc on est d'accord chaque bloc est défini par la taille de l'image, donc ça veut bien dire qu'on doit adapter le contenu suivant la taille de l'image?

[davidm]

Anaon, je ne vois pas où est ton problème. Un calque (div) s'adapte au contenu si celui-ci n'a pas de hauteur définie. Quand tu défini un background-image avec une propriété de répétition (repeat-x ou repeat-y) celle-ci est répliquée autant que nécessaire pour remplir ton div.

Heureusement, sinon on ne pourrait pas bosser avec des solutions dynamiques qui génèrent les pages à la volée...

[artxtra]

On a bien effectivement une forme de soumission du contenu par rapport au contenant dans le cas qui nous intéresse : les templates de css-zen-garden.

Même avec une img très haute, il est possible de générer un contenu encore plus long... Qu'en sera-t-il alors de l'apparence ?

Des tests à faire là-dessus : prends les exemples en downloads (il en existe des versions françaises, pour le fun...), génère un texte très long et tu verras comment le template se comportera. Le résultat m'intéresse.

A+