28173 sujets

CSS et mise en forme, CSS3

Overflow : question !

Bonjour a tous !

J'ai un petit problème a vous soumettre. Smiley smile

Voila, je bosse actuellement sur un site, et j'ai voulu utiliser l'overflow, que je trouve génial pour l'intégration de pages php, etc. Bon bref, pour que l'overflow soit la ou je le souhaite, il a fallu que je définisse une marge gauche et une marge haut au JPG ( qui est donc le background du site ) pour qu'il soit a peu près au centre de la page, et pour que l'overflow y soit correctement intégré.

Oui mais voilà, question de style, l'affichage du site se fait correctement en 1280, mais lorsqu'on utilise une résolution différente ( voir inférieur, la ou c'est le pire ) le site ne s'adapte pas ( évident ). Donc, pour les marges du JPG, je me suis dit, qu'il fallait définir une marge en pourcentage, au lieu que de mettre une marge définie en pixel.

Bon oui, mais du coup, mon overflow, comment est-ce que je peux lui dire qu'il faut qu'il reste a une place bien définie sur le JPG ? Si je lui donne a lui aussi une marge définie en %, il y a de fortes chances pour qu'il ne sois, du coup, plus adapté au JPG...

Auriez vous une idée ? Smiley langue

En tous cas, merci pour tout vos tutos, vos explications, et tout le reste, une bonne communauté dans laquelle je me réjouit d'être venu !

Merci encore Smiley smile

Cesk.
Modifié par Cesk (02 May 2007 - 18:29)
Bonjour,

Très beau site, j'aime beaucoup le graphisme... lorsque je regarde ça sur une fenêtre de navigateur prenant tout mon écran en 1280x1024.

Par contre, niveau HTML+CSS, il va falloir reprendre pas mal de choses, si ce n'est tout.

Pour commencer, il te faut un conteneur global, qui doit être positionné en relatif, afin de servir de référent à ses enfants et descendants positionnés en absolu.
<body>
<div id="global">
...
</div>
</body>

Tu peux déjà oublier les marges que tu as mis sur body pour positionner tes éléments : c'est une fichue mauvaise idée (mais c'est normal, en débutant on a toujours des idées un peu étranges qui vous explosent à la figure Smiley lol ).

Ce conteneur global, tu lui donnes les dimensions voulues (875px de large si j'en crois ton image « de fond »).

Ensuite, tu dois placer tes éléments. Le problème, c'est que tu as beaucoup d'éléments sous la forme d'images, mais qui portent néanmoins des informations. La page suivante par exemple :
http://huttemusique.anezia.com/steph/production/
Les informations « StephaneSecq.com » et « Production » sont inaccessibles, car présentes uniquement sous la forme d'une image, sans texte alternatif correspondant. Même chose pour le menu de navigation : pas de texte alternatif donné à chaque area, hélas.

C'est non seulement mauvais pour certains de tes visiteurs (l'exemple que l'on donne souvent est celui des non-voyants qui surfent avec une lecteur d'écran), mais aussi pour les moteurs de recherche, qui n'auront pas de contenu à se mettre sous la dent et risquent de ne pas suivre tes liens. Double mauvais plan. Smiley decu

(la suite un peu plus tard...)
Merci pour ta réponse, et pour tes compliments Smiley smile

Ce que je fait, ca reste du bricolage. A terme, j'aimerais nettoyer le code et faire en sorte que tout fonctionne bien comme il faut.

Le problème persiste : le " fond " s'adapte ( et encore que, il n'est pas tout a fait centré, puisque je lui applique un % ) mais pas la frame ! tu pourra en juger par toi même ici : http://huttemusique.anezia.com/steph/apropos .

Et j'ai pourtant appliqué tout ça au paramètre " global " avec largeur et tout le bazar.

J'avais pas pensé aux non-voyant... Je vais rectifier le tir !

Autre truc, qui pourrait peut-être m'aider dans le même problème : on sait qu'on peut aligner un objet horizontalement. Ce qui fait que l'objet en question sera centré à l'écran, quelle que soit la résolution. Peut-on faire de même verticalement ?
Modifié par Cesk (02 May 2007 - 22:45)
Alors dans l'ordre, on va faire comme ça :

1 - Commence par supprimer les marges de div#global. On réfléchira plus tard aux moyens pour centrer ce bloc. Donc on le laisse se coller en haut à gauche (pas tout à fait collé car il y a le retrait par défaut de 8px attribué à body par les navigateurs), et on s'occupe du contenu de ce bloc.

2 - Tant qu'à faire, on va commencer aussi par simplifier un peu les choses en supprimant l'image du code HTML, et en la plaçant comme image de fond de div#global.
div#global {
	color: white;
	background-color: black;
	background-image: url(monimage.jpg);
}

Du coup, pleins d'éléments de contenu (textes en images, menu) passent dans la décoration. Pas terrible, mais c'est temporaire. On va réinjecter un à un tous les éléments de contenu, en gardant au final une image de fond épurée (donc sans les éléments de contenu, avec juste portrait + image décorative + trait jaune, par exemple).

3 - Dans mon message précédent, je disais : « il te faut un conteneur global, qui doit être positionné en relatif, afin de servir de référent à ses enfants et descendants positionnés en absolu ». Donc :
div#global {
	position: relative;
}


4 - À partir de là, tu peux donner à ton bloc de contenu div#bloc1 les coordonnées voulues, avec left ou right, et top ou bottom... à vue de nez, je dirais plutôt avec top: 50px et right: 0;, un truc comme ça. Par contre, ne pas utiliser à la fois right et left (c'est possible, mais ça a un effet différent et inutile ici).

5 - Tant qu'à faire, on va un peu épurer et supprimer l'affreux tableau totalement inutile qui entoure le texte dans ce bloc de contenu. C'est bon, l'affreux tableau a disparu ? Ok. Maintenant, on peut aussi assassiner sauvagement tous les align="justify" qui trainent, ainsi que le <div align="justify"> (sans oublier la balise fermante correspondante). Tout ça ne sert à rien. On va juste faire ceci :
div#bloc1 {
	text-align: justify;
}

Si on veut n'appliquer cette mise en forme qu'aux seuls paragraphes (et pas aux titres hN, aux listes, etc.), on peut par exemple faire ceci à la place :
div#bloc1 p {
	text-align: justify;
}

On vise ainsi tous les éléments p enfants ou descendants de l'élément dont l'identifiant est "bloc1".

6 - Remettre les éléments de contenu passés en image de fond. On va « découper » l'image de fond, ou plutôt en extraire (en laissant un simple fond noir à la place) :
- le titre « StephaneSecq.com » ;
- le titre de page, lorsqu'il est en image (pages Production et Revue de presse) ;
- le menu de navigation.
Pour les images-titres, c'est assez simple, on peut faire par exemple :
<p id="titresite"><img alt="StephaneSecq.com" src="..." /></p>
<h1 id="titrepage"><img alt="Revue de presse" src="..." /></h1>

<div id="bloc1>...

Et en CSS, on positionnera p#titresite et h1#titrepage en absolu (tant qu'à faire), en suivant le même principe que pour le bloc principal de contenu.
Attention : certaines de ces images demandent à ce qu'on laisse transparaitre le fond ou du moins une partie du fond. Il sera donc préférable d'utiliser du GIF ou du PNG-8 avec transparence binaire (un pixel est soit transparent, soit opaque). Ça ne devrait pas poser de problème particulier, il me semble.

7 - Le menu : à priori, on devrait pouvoir garder une image map. On pourait aussi avoir un menu de la forme suivante :
<ul id="navigation">
	<li><a href="../accueil/"><img src="..." alt="Accueil" /></a></li>
	<li><a href="../realisation/"><img src="..." alt="Réalisation" /></a></li>
	<li><a href="../production/"><img src="..." alt="Production" /></a></li>
	<li><a href="../revue/"><img src="..." alt="Revue de presse" /></a></li>
	<li><a href="../apropos/"><img src="..." alt="À propos" /></a></li>
</ul>

Pas bien compliqué, et il suffira de découper les images à la bonne taille et de faire un peu de mise en forme CSS pour avoir un rendu très correct.

On peut aussi garder l'image map, donc, en retaillant une image correspondant uniquement au menu, pas à toute la page. Par contre il faudra adapter les coordonnées des zones réactives ! Et surtout, placer des attributs alt un peu comme dans l'exemple ci-dessus, mais pour les éléments area.


Voili voilou.
En passant, et pour pinailler : autant j'aime le graphisme, autant je trouve regrettable l'utilisation d'un bloc de contenu de hauteur fixe et avec barre de défilement interne. C'est une tentation très forte sur les sites très graphique, mais lorsqu'on arrive au résultat suivant :
- 70% de place dédiée au graphisme et à quelques éléments épars ;
- 30% de place dédiée au contenu principal de la page...
... ben il faut commencer à se poser des questions pas très glamour mais particulièrement utiles. Des questions d'ergonomie, de visibilité de l'information (et donc pas uniquement d'impact de séduction donné par le graphisme).

De plus, et puisqu'on parle d'ergonomie, les barres de défilement internes sont un mauvais plan. Pas rédhibitoire, mais souvent gênant, surtout pour les petites résolutions, lorsque la page est déjà elle-même assez grande pour générer une barre de défilement globale, et que le contenu génère une barre de défilement interne. Ici, même en 1024x768 (résolution qui totalise dans les 50-55% des utilisateurs !), on a un fort risque de voir apparaitre une barre de défilement globale. Bref, pas terrible, d'autant plus que l'utilisation de la molette de la souris est problématique quand on a une barre de défilement interne (le pointeur de la souris être dans le bloc concerné pour qu'il défile correctement).

Enfin, les barres de défilement internes posent problème lors de la navigation au clavier, qui devient impossible avec certains navigateurs. Ou encore pour l'utilisation de loupes d'écran.

Ce n'est sans doute pas le moment de refaire toute la charte graphique, mais il est préférable de penser design extensible en hauteur lorsqu'on travaille pour le Web. Le Web n'est pas un média paginé. Un document Web serait plutôt un flux de longueur variable, ce qui se traduit visuellement par une page de hauteur indéfinie, et l'utilisation d'une barre de défilement globale pour accéder aux contenus s'ils sont longs.
Benjamin D.C. a écrit :
Hé ben, ça c'est de la réponse... Smiley eek

Heureusement que je fais pas ça tous les soir (juste un soir sur deux... Smiley lol ).
Pour ton dernier message, je suis d'accord. C'est vrai que ce n'est pas très fonctionnel, et de plus, je fais parti des gens qui râlent lorsque ce problème de souris arrive Smiley lol

Mais je trouve quand même le système intéressant, et le " propriétaire " du site aussi. Alors je vais continuer dans cette voie la, même si comme tu le dis, il est un peu trop tard pour revoir complètement la charte graphique.

En tout cas, ta réponse ma grandement rendue service. Encore mille fois merci, j'en apprend beaucoup Smiley smile Mais il me reste encore ce problème de " centrage ", qui me bouffe un peu la tronche. Et c'est par soucis de " compatibilité ", pour le maximum d'utilisateurs. Si ce n'était pas le cas, j'aurais sans doutes fait quelque chose d'encore plus pitoyable, niveau affichage Smiley lol

Une chose est sûr, il me reste du boulot ! Smiley lol

Merci encore Smiley smile Et si tu as encore deux ou trois idées, n'hésite pas, je suis preneur ( a condition que tu ai le temps, bien évidemment ! )
Pour le centrage, une fois que le reste sera ok, parcourir :
- les tutoriels d'alsacréations ;
- la FAQ du forum.

Je recommande personnellement un centrage horizontal avec la technique des marges automatiques, et un centrage vertical, si nécessaire, avec un tableau à une seule cellule, ou (non compatible IE mais moins lourd niveau HTML) un display: table sur body ou un sous-conteneur.
Sujet clos
Aller à