28173 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour,
2 ans après m'être inscrite sur ce forum, avec derrière la tête l'idée de refaire mon site aux normes, force est de constater que je n'ai pas beaucoup avancé...
Aujourd'hui, je trouve un peu de temps pour tenter de m'y mettre, et au bout d'à peine une demie-heure de réflexion, voilà que je coince...

Allons droit au but... personnellement (c'est sans doute une déformation professionnelle, m'enfin...) je trouve qu'une image parle toujours mieux qu'un long discours, donc voilà ce que je souhaiterais obtenir : http://chezclot.free.fr/provisoire/shema_explicatif.gif
Et pour ceux à qui ça ne parle pas : un header fixe, un footer fixe, et entre les deux, une bande horizontale, dans laquelle les créas vont venir se mettre les unes à côté des autres.

Grosso modo, ça me paraissait assez basique, je me disais qu'en définissant une hauteur fixe pour le header, le contenu et le footer, il ne me resterait plus qu'à définir mes blocs de créa ainsi :
.bloccrea {
	display:inline;
	float: left;
	height: 400px;
	width: 200px;
}

Bah ils se placeraient gentiment les uns à la suite des autres, qu'au bout d'un moment une élégante barre de scroll horizontal apparaîtrait en bas de mon div "contenu", et qu'hop j'aurais ce que je voulais.

Mais il se trouve qu'une fois arrivés au bout de l'écran, mes blocs de créa... passent à la ligne Smiley sweatdrop . Et chevauchent allègrement mon pied de page.
Je me suis dit qu'il fallait sans doute que je pense également aux propriétés de mon conteneur, j'ai donc tenté de lui attribuer la propriété "overflow: scroll;", mais si, au moins, les blocs ne chevauchent plus mon footer, ils retournent quand même à la ligne...

Est-ce que vous sauriez me dire d'où vient mon problème?
Au cas où, j'ai mis ma page de test en ligne, peut-être que comme ça vous trouverez plus facilement d'où vient l'erreur...
La page en question
La feuille de styles associée

Merci d'avance pour tous les conseils que vous pourriez me donner Smiley smile
Est-ce qu'anti-ergonomique est synonyme d'anti-accessible?

Pour l'instant, mon objectif est de faire une page qui soit conforme aux standarts, et j'aime bien ce style de navigation... enfin dans mon cas, où il va s'agir de présenter essentiellement des images.
C'est clair que dans le cas de l'exemple que tu m'as cité, ou il s'agit de blocs de texte, je ne trouve pas ça idéal...

Outre le fait que l'on ne puisse pas naviguer sur la page via la roulette, quels sont les autres problèmes liés à ce type d'interface?

En tous cas merci pour ton lien, il va sans doute falloir que je le décortique pendant des heures avant de comprendre le truc, mais je suis motivée Smiley smile

PS : tiens, c'est marrant, au taf (sur PC - Firefox), je n'avais que le bouton "Envoyer"... et chez moi (sur Mac - Firefox), mon bouton "Prévisualiser" chéri est apparu... C'est moi qui débloque?
... je vous tiendrai au courant de l'évolution!
Modifié par coltide (28 Aug 2006 - 19:32)
Bonjour,

coltide a écrit :
Est-ce qu'anti-ergonomique est synonyme d'anti-accessible?


Ergonomie et accessibilité ne coïncident pas, et un interface non ergonomique peut être par ailleurs accessible, de même qu'une page non accessible aux lecteurs d'écran par exemple peut être ergonomique dans le contexte de la navigation graphique.

Cela dit, concernant les designs horizontaux, ils posent par ailleurs généralement des problèmes d'accessibilité sans rapport avec l'ergonomie. Par exemple:
- le mode de scroll "rare" ne sera pas aisément perceptible dans une loupe d'écran, avec laquelle l'utilisateur n'a pas la vision globale de la mise en page qui permet de repérer ce mode de fonctionnement particulier.
- même problème du point de vue du handicap cognitif : des utilisateurs sachant consulter une page "verticale" pourront être perdus devant une page "horizontale".

Mais ce ne sont que des remarques générales. Il reste à voir comment chaque mise en page de ce type est concrètement mise en oeuvre.

coltide a écrit :

Outre le fait que l'on ne puisse pas naviguer sur la page via la roulette, quels sont les autres problèmes liés à ce type d'interface?


- Une consultation très malaisée dès que la hauteur de rendu est inférieur à celle prévue : on se retrouve en double scroll.

- Pour du texte, les allers et retours constants entre lecture/défilement vertical (dans chaque "colonne") et lecture/défilement horizontal (pour passer d'un item à l'autre). C'est en fait le problème du transfert des colonnes type imprimé à l'écran. Ce qui ergonomique dans le cas, par exemple, d'un journal papier, ne l'est plus sur un autre media.

Mais là encore, il reste à voir quel est le contenu réel et comment ce design est-il mis en oeuvre : le fait qu'il s'agisse d'images et non de texte dans ton cas est en effet une donnée très importante, plutôt favorable. En revanche, ce header et ce footer fixes m'inquiètent davantage a priori...
Modifié par Laurent Denis (29 Aug 2006 - 06:33)
En fait, quand je disais "fixe", je voulais dire que, même si on scroll vers la droite au maximum, on a toujours le titre présent en haut à gauche, et les éventuels liens en bas. La hauteur des deux éléments est fixe, mais leur positionnement est défini "dans le flux", pas en absolu (enfin je crois que c'est le terme approprié pour dire que l'un se place "au début", et l'autre "à la fin" de la page)..

C'est d'ailleurs quelque chose qu'il n'y a pas dans l'exemple que tu m'as cité : l'ensemble de la page se déplace quand on scrolle. Il est donc fort probable que je revienne demander de l'aide... mais je vais d'abord essayer Smiley smile

Quant à ma navigation, je me fixe une contrainte de hauteur en décidant de procéder ainsi, mais c'est une contrainte "a priori", et je prévois donc de créer mes cadres "créa" (image + max 1 ligne de texte explicatif) en tenant compte de cette contrainte, pour éviter justement d'avoir à se retrouver avec un double scroll.

Enfin à me relire, je donne l'impression de ne pas écouter les conseils qui me sont donnés... en fait cette "création" de site est juste un prétexte pour m'entraîner, et je pense que (si j'arrive à m'en sortir!) cette interface ne sera que provisoire!
HyWaN > oui, Laurent Denis parlait de ça, je crois, en disant "voir aussi le site de son auteut" Smiley cligne
D'ailleurs le code de ce blog a été plus facile pour moi à décortiquer... et je me suis rendu compte que sa méthode à lui consiste à définir
style='left:valeur;

dans la balise <div>... ce qui m'embête, parce que dans l'idéal, moi je voulais séparer complètement le contenu du look, afin de pouvoir changer d'interface plus facilement. Il me semble qu'en choisissant sa méthode, ça m'obligera à revenir toucher au HTML.

Bref, retour à la case "voyons plutôt le code de l'interface ZenGarden", puisqu'il me semble que c'est justement le but, chez ZenGarden, de ne pas toucher au code HTML...
Me revoilà, et je suis bien embêtée.

L'exemple de ZenGarden, même si il correspond visuellement à ce à quoi j'aspire, n'est pas construit comme je le souhaiterais.
En fait, chaque cadre de texte est défini par une ID unique, et dans la feuille de style associée, chaque ID a une position absolue par rapport à la gauche de l'écran.
C'est ce positionnement absolu qui me pose problème : en effet, si je décide d'ajouter une image à mon portfolio, j'aurai naturellement tendance à vouloir l'ajouter "au début", c'est-à-dire à gauche de l'écran. Or ça implique qu'il faudra redéfinir toutes les valeur de positionnements des ID existantes...
Idem, j'aurais voulu pouvoir appliquer ma feuille de style à mon blog... mais par défaut, Blogger déclare chaque post comme une "class"...
C'est pourquoi je tenais en fait à ce que mes cadres "crea" soient des "class" et non des "id"...

Je ne sais pas si mon problème est clair en fait... et si ça se trouve, il est anti-standart de vouloir utiliser des "class" dans ce cas de figure... Mais si quelqu'un me comprend et peut me donner une solution alternative, je lui en serais extrêmement reconnaissante Smiley smile
Désolée pour le monologue, mais au fur et à mesure que je cherche, je pressens d'autres possibilités et je me dis que, peut-être, à un moment, ça sera une bonne alternative...

Voilà par exemple une possibilité à laquelle j'ai pensé :
définir une largeur fixe (et énorme, 20000px par exemple) pour mon conteneur.
Avantage : Cette solution me permet de me rapprocher de ce que je souhaite
Inconvénient : La scrollbar horizontale inférieure est présente, même dans le cas où le visiteur n'a pas besoin de scroller.

J'ai bien pensé à définir la largeur de mon conteneur en fonction de son contenu, mais alors ça m'oblige à modifier cette largeur à chaque fois que je veux ajouter du contenu... et je me retrouve coincée par rapport à ma logique de blog.

Du coup, j'ai trouvé non pas une solution, mais une autre formulation pour ma question...
Peut-on forcer un div à s'adapter automatiquement EN LARGEUR à son contenu?
Peut-être que présenté ainsi, quelqu'un saura m'aider Smiley cligne
Modifié par coltide (29 Aug 2006 - 13:21)
Administrateur
coltide a écrit :

Peut-on forcer un div à s'adapter automatiquement EN LARGEUR à son contenu?
Peut-être que présenté ainsi, quelqu'un saura m'aider Smiley cligne

Pour répondre précisément à cette question : oui, il y'a à ma connaissance deux méthodes :
- positionner l'élément en flottant sans indiquer de largeur
- positionner l'élément en absolut sans indiquer de largeur

Ces deux méthodes vont radicalement changer le flux et la structure de ton document, donc à prendre avec des pincettes.
Pour ce qui est de l ordre des images tu pourrais faire ca simplement en php, non? tu selectionnes avec un order by et le tour est joué, il ne te reste plus qu a inserer tes images avec une boucle. Chque image etant contenu dans un nouveau div avec comme classe toto qui comprend l option float: left;

Suis-je clair? suis-je a coté de la plaque ? Smiley langue
Mille merci, l'ami des kiwis Smiley smile
Cependant j'aurais dû être plus complète dans ma reformulation :
Peut-on forcer un div à s'adapter automatiquement EN LARGEUR à son contenu, en s'étendant si besoin "à l'extérieur" de la page?
Parce qu'effectivement, ta réponse convient, sauf que je reviens à mon problème de départ, où les blocs se mettent à la suite des uns des autres jusqu'aux limites de la page, alors que je voudrais qu'ils continuent en ligne jusqu'a bout...

Bouh les gens > je ne sais pas si tu es clair, parce que moi, quand je lis "simplement" et "php" dans la même phrase, d'abord je rigole, et ensuite je prends mes jambes à mon cou. Non, sans rire, pour l'instant je vais m'en tenir au simple HTML, peut-être que d'ici 2 ans, quand je m'en sortirai, je m'attèlerai au PHP Smiley lol
Salut,
personnellement, je comprends qu'on puisse s'acharner sur un exercice de style au moins pour la forme... et le plaisir d'y arriver... mais alors les scrolls horizontales, beurk, beurk, beurk Smiley lol
Bon ok, tu ne veux pas mettre le nez simplement dans php, mais peut-être un p'tit bout de flash alors ? Ce genre de navigation me rappèle vraiment des éléments flash (que j'avoue ne pas trop apprécier non plus hein, mais bon, c'est une question de goût) :
http://www.zoneflash.net/tutoriaux/t016.php
Ca a un avantage : ton conteneur peut être positionné sans déborder de la page puisque c'est le contenu qui bouge.
Ca a aussi plein d'inconvénients : c'est du flash, donc pour le référencement des pages liées, c'est cuit... et même si on peut faire un truc quand même un peu évolutif, c'est surement pas aussi souple que ce que tu souhaites...
Mais bon...

/Edit/
Ah finalement j'ai mieux : au fil de ma navigation sur le forum, et au hazard d'un clic curieux, j'ai trouvé peut-être ce que tu cherches....
http://lescourroies.free.fr/pages/photos05.html
Tu peux remercier l'auteur si c'est bon, il est des notres Smiley cligne
Modifié par cktoon (29 Aug 2006 - 19:29)
Le modèle de "menu" du site donné en lien par cktoon correspond exactement à ce que je veux.

Le conteneur est un div dont les propriétés sont :
conteneur {
overflow:auto;
white-space:nowrap;
width: 500px;
height:500px;
}


Il suffit ensuite de placer ses éléments dans le conteneur, sans aller à la ligne, et la propriété "white-space:nowrap" fait le reste Smiley smile Même pas besoin de se prendre la tête sur les propriétés de la classe "crea" à appliquer à mes blocs!

Super-contente, je me dis "allez hop, au boulot, y'a plus qu'à remplacer ses images par mes div, et ça roule".

Je pensais toucher au but... mais non T_T

Je remplace donc toutes les occurences de
<img src="image.jpg" class="crea">

par
<div class="crea"><img src="image.jpg"></div>


Allez savoir pourquoi*, mais un div ne veut pas se comporter aussi sagement qu'une image. Le div lui, il s'en fout royalement du "white-space:nowrap", et il va à la ligne, le sagouin!!

J'ai tenté de un
<span class="crea"><img src="image.jpg"</span>

Ça marche, mais m'enlève complètement la possibilité de mettre une image et une petite ligne d'explication dans le même bloc...

Retour à la case départ, donc... je ne lâche pas l'affaire.

* et si vous savez pourquoi, ce dont je ne doute pas une seconde, expliquez moi! Smiley bawling
Modifié par coltide (30 Aug 2006 - 13:36)
C'est parce que par défaut le div est un élément qui prend toute la largeur de son conteneur. T'as mis quoi exactement comme attributs à ta classe .crea? Essaie avec quelquechose comme ça:

.crea {
display:block
width:xpx
height:xpx
float:left
}

Modifié par _lwiz (30 Aug 2006 - 14:41)
Bah non, le "float:left" ne change rien...
Je me suis arraché les cheveux tout l'après-midi sans résultat, je crois que je vais laisser tout ça reposer un moment... en espérant que ça finisse par se décoincer Smiley lol
salut,
je suis pas sure de moi, mais donne un largeur de DIV très grande, et tes problemes de retour chariot oupssss dehors. ne met pas d'élèment centré, tu auras des soucis par la suite, pour placer tes élèments à l'horizontal, sympa ton idée, j'aime bien les sites où tu peux naviger de droite à gauche dans les visuels , essaye cela :

.crea {

display:block

width:1000px

height:xpx

float:left

}

Dis-moi, @+
coltide a écrit :

J'ai tenté de un
<span class="crea"><img src="image.jpg"</span>

Ça marche, mais m'enlève complètement la possibilité de mettre une image et une petite ligne d'explication dans le même bloc...


Non, tu peux mettre les deux, en les séparant simplement par <br />.
Bon, là chaud au niveau taf, je ne peux donc pas tester vos suggestions tout de suite... en tous cas merci de vous donner la peine d'aider une neuneu comme moi, ça fait plaisir Smiley smile

vinosaure > ta proprosition me permet de "contourner" le problème, et encore, comme je l'ai dit plus haut, ça m'obligerait à modifier la largeur du div contenant à chaque fois que je veux ajouter du contenu, et cette solution ne me convient pas... Mais merci!
salut Smiley biggrin en fait ton soucis est qu'il faut concevoir un 1er DIV qui fera la largeur de ta page, et ce 1er DIV contient un 2eme DIV mais de largeur presque infini, donc l'affichage de tes visuels se fera à travers la largeur du 1er DIV, et il te faudra juste deux boutons fleches qui feront défiler de droite à gauche ton 2eme DIV.

j'espère etre clair Smiley boulet sinon je te conseil de matter un peu le source de pages qui seraient confectionnées comme ton idée Smiley deal .

VInosaure
Pages :