Problème pour centrer verticalement en 800x600

[Kreestal]

Bonjour à tous!

Je suis en train de travailler sur un site. Ce site se composera de deux pages, la page d'accueil, et la page où s'affichera le contenu. Je travaille actuellement sur la page d'accueil.

Vous pouvez voir où j'en suis ici: Avancement des travaux

Comme vous le constaterez immédiatement, la div #conteneur est centrée horizontalement et verticalement.

C'est précisément le centrage vertical qui me pose problème: si vous avez Web Developper, cliquez sur "Resize" >> "800x600", et qu'obtenez-vous? La partie supérieure de la div #conteneur qui "disparaît". J'imagine que c'est dû à un problème de marges... Mais débutant dans le domaine, je ne comprends pas quel est le problème.

Que changer pour que la div #conteneur s'affiche complètement, et non pas tronquée, même en 800x600, tout en conservant les alignements horizontal et vertical?

D'avance merci!

Modifié 24 Novembre 2005 par Kreestal

[thierryf]

Bonjour,

Je pense que ton problème provient de la méthode que tu utilises pour centrer horizontalement et verticalement ton div #conteneur.

Il faut en général éviter d'utiliser la propriété des CSS "height" car elle est mal gérée par les navigateurs.

Voici ce que je te propose d'essayer.

body{

font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;

font-size: 0.8em;

margin: 0;

padding: 0;

background-color:#320033;

text-align:center; /* permet de centrer le contenu dans I.E */

}

#conteneur {

text-align:left; /* pour que la regle dans body ne s'applique plus aux éléments de ton contenu */

margin: 10px auto; /* permet de centrer le contenu dans les autres navigateurs */

width: 750px;

border: 0;

}

Etant donné que ton conteneur fait 580 pixels en hauteur, sur un affichage de 600*800 il te reste 20 pixels de dispo. C'est pourquoi une marge de 10px pour le haut de ton conteneur devrait permettre ton centrage vertical.

[Kreestal]

Bonjour,

Je pense que ton problème provient de la méthode que tu utilises pour centrer horizontalement et verticalement ton div #conteneur.

Il faut en général éviter d'utiliser la propriété des CSS "height" car elle est mal gérée par les navigateurs.

Voici ce que je te propose d'essayer.

body{

font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;

font-size: 0.8em;

margin: 0;

padding: 0;

background-color:#320033;

text-align:center; /* permet de centrer le contenu dans I.E */

}

#conteneur {

text-align:left; /* pour que la regle dans body ne s'applique plus aux éléments de ton contenu */

margin: 10px auto; /* permet de centrer le contenu dans les autres navigateurs */

width: 750px;

border: 0;

}

Etant donné que ton conteneur fait 580 pixels en hauteur, sur un affichage de 600*800 il te reste 20 pixels de dispo. C'est pourquoi une marge de 10px pour le haut de ton conteneur devrait permettre ton centrage vertical.

<{POST_SNAPBACK}>

Bonjour Thierry,

Merci pour ton aide! ;-) J'ai essayé ta méthode, cela marche, cela centre bien verticalement, mais en 800x600, je suis toujours confrontée au même problème, c'est à dire: une partie supérieure de la div qui "disparaît".

Ma première CSS a été conçue en fonction des conseils d'Alsacréations.

Et dans leur exemple, leur div centrée fait 700px de longueur et 400px de longueur; en effet, en 800x600, cela apparaît nickel chrome, rien ne dépasse. Mais 700x400, c'est tout petit Mais enfin, je vais essayer de réduire mes images; après tout, au webdesigner de s'adapter...

Je suis un peu déçue quand même qu'il n'y ait pas de solution à ce problème si je voulais, par exemple, conserver mes images comme elles sont, sans que la partie supérieure de ma div disparaisse...

[thierryf]

Je suis un peu étonné par ce que tu me dis. Dans la regle que je te propose pour le div #conteneur, la marge du dessus est définie à 10px. Et cette taille ne doit pas varier quelle que soit la taille de ton navigateur. De la même manière, tu devrais pouvoir mettre une valeur en pourcentage, comme ceci (margin:5% auto; ) qui s'adapterait à toute les tailles.

En testant ta page sur le navigateurs que j'ai (IE6, Firefox, Opera) et en changeant la taille de ma fenêtre, le problème ne se pose plus.

Ceci étant, bien qu'étant un adapte des CSS, je crois que ce n'est vraiment pas la technique appropriée pour l'intégration de ton graphisme. Si j'avais à le faire, je ferai un tableau HTML... tout simplement.

Il faut bien comprendre que le grand intérêt des CSS, c'est la séparation du contenu de la présentation. Dans cette logique, aucune image servant à la présentation (graphisme de ta page) ne devrait être intégrée dans ton fichier HTML. Ces images devraient apparaitre avec la regle (background-image) des CSS.

De cette manière si tu dois un jour changer le graphisme d'un site, tu peux le faire sans toucher à tes fichiers HTML. Il te suffit de changer ton CSS.

Pour mieux comprendre ce que j'affirme, regarde le site ZEN Garden (http://www.csszengarden.com/ ).

Dans ton cas, si tu devais changer le graphisme de ta page, il faudrait que tu modifies le fichier HTML puisque les images servant à ta présentation sont intégrées dedans. Donc, pourquoi se prendre la tête avec les CSS ????

Autant faire un tableau pour intégrer tout ça.

[Kreestal]

Bonjour Thierry :-)

Merci pour les nouveaux éléments que tu m'apportes. Je préfère exclure d'emblée la solution des tableaux; pas que je sois sectaire, mais je ne veux pas baisser les bras à la première petite difficulté (surtout que ce n'est pas la première ). Donc, go for CSS. Je débute dans le domaine, certes; mais je suis réellement animée par la volontée de comprendre la logique du XHTML et du CSS et, c'est bien connu, c'est en forgeant qu'on devient forgeron. Donc pardonne à la padawan que je suis ses erreurs de débutante. ;-)

Dans cette logique, aucune image servant à la présentation (graphisme de ta page) ne devrait être intégrée dans ton fichier HTML. Ces images devraient apparaitre avec la regle (background-image) des CSS.

Comme tu l'as vu dans ma CSS, cette page d'accueil se compose de cinq div, dont trois servent précisément à présenter les images sur la page. En lisant ta réponse, j'imagine donc que je dois créer autant de div que d'images (?), et préciser leur image de fond à chacune dans leurs propriétés propres, dans ma CSS. Seulement, ce que je n'arrive pas à piger, c'est comment tu intègres un lien sur ces images si elles sont en image d'arrière-plan d'une div? Gifs transparents (pitié non)?

D'avance merci pour tes explications, elles me sont très précieuses, et en plus tu es super clair.

Edit: J'ai modifié ma page selon tes conseils: Voir ce que ça donne

Je suis contente, en effet c'est plus précis comme ça. Je ne veux plus centrer verticalement, tu as raison, ça ne sert à rien. J'ai juste mis une marge de 50px, comme ça, ça rend bien, et on voit tout en 800x600.

Cependant, la question principale demeure: "comment tu intègres un lien sur ces images si elles sont en image d'arrière-plan d'une div?" Parce que mon menu ne me sert à rien là si on peut pas cliquer dessus

Modifié 25 Novembre 2005 par Kreestal

[thierryf]

Bonjour,

Comme je te le disais, le plus simple serait un bon vieux tableau. Mais, puisque tu veux travailler avec les CSS, je ne peux que te proposer des pistes.

Avec les CSS, tu peux travailler à partir des différents calques de ton image, donc pas question de l'aplatir pour faire son intégration.

Dans ton fichier HTML, tu ne vas pas faire des Div pour tes images mais pour tes blocs de texte. Tu as :

- Chaque lien

- Le titre du site

- Le texte de bienvenu

Au niveau de ton image, tu as d'abord l'image sans aucun texte. Cette image tu l'intègres grâce à 'background-image' de body.

Ensuite, tu positionnes tes Div qui contiennent ton texte (tu dois utiliser un positionnement en valeur absolue).

Pour chaucun de tes Div, positionnés par rapport à ton fond, tu intégres une image de fond toujours 'background-image' (Dans ton exemple les mêmes textes mais avec le typo que tu as choisis.).

Si tout est OK, il te restera à empêcher l'affichage des textes HTML contenu dans tes div. Pour cela, il y a plusieurs méthodes.

Tu peux utiliser 'text-indent:-3000px' (le texte est déplacé dans une zone qui n'apparait pas à l'écran)

Ou, si entoures tes textes HTML comme ceci :

<div id="titre"><h1><span>oxalys</span></h1></div>

Tu peux écrire ceci pour empêcher l'affichage du texte :

#titre h1 span {visibility:hidden;}

Voilà comment j'aborderai les choses pour faire ce que tu veux faire. De cette manière, tu auras vraiment une séparation complète entre le contenu et la présentation.

Un navigateur qui ne gère pas les images verra quand même s'afficher : le nom du site, le message de bienvenue et la liste de tes liens. Il en sera de même pour les moteurs de recherches.

Bon courage.

[Dudu]

Salut

Cependant, la question principale demeure: "comment tu intègres un lien sur ces images si elles sont en image d'arrière-plan d'une div?" Parce que mon menu ne me sert à rien là si on peut pas cliquer dessus 

Le problème est à prendre dans l'autre sens

Insères un lien où tu veux dans ta page avec une bête balise <a>.

Et ensuite, tu détermines dans ta CSS l'image de fond, la position, etc ..

[Kreestal]

Hello Thierry,

Merci énormément pour ces nouvelles indications. J'ai essayé ce que tu m'as conseillé de faire uniquement avec les items "News" et "Galerie", mais en n'utilisant que h1 pour les deux divs, cela ne fonctionnait pas; il y en avait toujours une qui ne s'affichait pas. Donc j'ai "donné" du h1 à #news et du h2 à #galerie, et cela a l'air de fonctionner (edit: sauf dans IE!). Je vais essayer avec les autres items de menu et d'autres h, je posterai ici si ça ne fonctionne pas.

Voir ce que ça donne.

Je n'ai pas su, en revanche, où je dois intégrer les divs que tu me conseilles, à savoir celle qui doit contenir le titre du site, et celle qui doit contenir sa description. Avant #oxalys j'imagine?...

Sinon, dernière question pour aujourd'hui: au hasard, j'ai voulu regarder ce que donnerait une validation W3C pour ce que j'ai fait, mais il y a visiblement une erreur au niveau des h1 et h2. L'ai-je bien écrit?

Au fait, n'étant pas l'infographiste sur ce coup-là, je n'ai pas pu faire en sorte que l'image de fond qui devrait être sans texte n'ait pas de texte. Mais comme la div #news est placée au-dessus de l'item "News" de l'image de fond, ça n'a pas l'air de poser problème... (si?)

D'avance merci

_AT_Dudu: merci pour ta réponse! ;-) J'ai essayé de suivre tes conseils (je dis bien: essayé ) et voilà ce que ça donne: j'ai précisé ce que devait être <a> dans la div #news; cela fonctionne, à ceci près que l'on voit (en tout cas, moi je le vois), le trait de soulignement du texte... Est-ce normal?

Modifié 30 Novembre 2005 par Kreestal

[Dudu]

Salut

cela fonctionne, à ceci près que l'on voit (en tout cas, moi je le vois), le trait de soulignement du texte... Est-ce normal?

çà, c'est la feuille de style interne à ton navigateur (celle qui définit les règles par défaut) qui prend le dessus en l'absence d'infos.

Pour preuve, je ne vois aucun soulignement chez moi donc çà ne vient pas de ta page en elle-même.

Un bout de code CSS comme celui-ci devrait mettre tout le monde d'accord

a:link, a:visited, a:hover, a:active, a:focus {color:inherit;text-decoration:none;}

[v4np13]

Bonjour,

J'ai trouvé un lien qui utilise que du css qui pourrait te servir sur alsacreations.

Autrement je pensais à un autre truc encore, c'est d'utiliser un map, mais il faut préciser les coordonnées des liens,... de la chipoterie mais bon

Bonne chance

Edit: Je te mets aussi le lien avec les autres menus commentés. Ca peut être utile.

Modifié 1 Décembre 2005 par v4np13

[Kreestal]

Edit: Je supprime le contenu de ce post, car j'ai résolu mon problème................ toute seule comme une grande

_AT_v4np13: Merci de ta réponse et des liens vers les exemples Alsacréations! ;-) En effet, le premier que tu me conseilles est intéressant, mais j'ignore totalement comment l'appliquer à mon cas...

Modifié 14 Décembre 2005 par Kreestal