28173 sujets

CSS et mise en forme, CSS3

<div> devant commencer plus bas ...

Bonjour à tous ... j'ai un petit souci Smiley lol , et je compte sur vos lumières pour le solutionner Smiley langue

Mon site fait une SEULE et unique page (elle est très longue mais très légére).
et est composée ainsi :


<div>blabla 1</div>
<div>blabla 2</div>
<div>blabla 3</div>
<div>blabla 4</div>
<div>blabla 5</div>
<div>blabla 6></div>
<div>blabla 7</div>
etc


Elles sont toutes les unes sous les autres (un ID par div)
Chacune a une ancre et les liens pointant vers celle ci marche également
Jusque là pas de souci (tout répond au poil)

Mon problème c'est que :
je ne VEUX PAS voir la <div2> quand j'ai cliqué sur le lien pour aller à l'ancre de la <div1>, je VEUX que la <div2> soit plus bas (il doit donc y avoir un espace blanc.

Plus concretement, imaginez une div de texte qui prend les 5cms du haut de votre écran, je souhaite que la div suivante soit plus bas que le bas de votre écran Smiley biggol ...

Je bidouille en créant un div vide (avec un espace insécable) de largeur x pixel et de hauteur 500px par exemple .. sur mon ordi cela marche, mais si un visiteur a un plus grand écran alors les 500 ne seront pas forcément suffisant .. Smiley confus

Voyez vous une solution ?
avec height: 100% ma div n'apparait pas ...
Modifié par NeroTulip (20 Sep 2007 - 14:33)
Y'en a vraiment qui aiment se compliquer la vie ! Smiley biggol

Mis à part du javascript, qui peut détecter la hauteur de l'écran, je ne vois pas ... et encore, puisque ça ne dépend pas uniquement de la résolution d'écran mais aussi de la taille du texte qu'affiche l'utilisateur ... d'après moi, tu ne trouveras pas de solution miracle à ton problème masochiste et si il existait une solution (min-height: 100% peut-être ... et encore, je ne pense pas que ça fonctionnera) elle serait plus le fruit du hasard qu'autre chose : le hasard, c'est rarement bon dans le Css ...

Essaies de trouver une alternative. Comme par exemple n'afficher que le contenu que tu souhaites avec javascript : ça, c'est possible. Mais tout afficher dans une page en étant absolument certain qu'une seule partie sera visible à l'écran lorsque l'utilisateur cliquera, je ne pense pas que cela soit possible. Du moins pas à ma connaissance.
Gaylord.P a écrit :
Mis à part du javascript, qui peut détecter la hauteur de l'écran, je ne vois pas ... et encore, puisque ça ne dépend pas uniquement de la résolution d'écran mais aussi de la taille du texte qu'affiche l'utilisateur ...

Ça ne dépend pas de la résolution d'écran, mais plutôt de la hauteur du viewport (zone de visualisation). Et ça, c'est exploitable directement en CSS. La preuve:
http://web.covertprestige.info/test/29-page-avec-serie-blocs-hauteur-ecran-1.html

Donc pas d'obligation de passer par Javascript. Cependant, la solution full-CSS de cette page d'exemple a de nombreuses limitations. Elles sont décrites dans la deuxième «page» (deuxième bloc de la page, en fait), donc je ne les reprend pas ici.

Ceci dit, si on ne cherche pas à cacher/empêcher le défilement global (donc on vire le html, body {overflow: hidden;}), on supprime la plupart des problèmes.
Modifié par Florent V. (21 Sep 2007 - 13:15)
Merci pour les réponses mais je me sens pas la force d'appliquer la méthode proposée par FLorent qui plus est quand on voit ses limitations ...
Je vais me contenter d'une DIV vide de taille respectable ... 800 px ? par exemple ..
Smiley lol
NeroTulip a écrit :
ton lien ne semble pas fonctionner ? Smiley murf

Autant pour moi, je me suis trompé d'onglet. Le lien est maintenant corrigé.
(Sinon, on peut passer par la page de la première version, j'ai rajouté un lien sur le premier écran...)
Florent V. a écrit :

Autant pour moi, je me suis trompé d'onglet. Le lien est maintenant corrigé.
(Sinon, on peut passer par la page de la première version, j'ai rajouté un lien sur le premier écran...)


ca y est. Implementé et ça fonctionne du tonnerre, la version alternative (je ferai des tests cross-browser sous peu pour avoir un premier rendu) .. en tout cas, c'est extra ...

Maintenant il ne me reste plus qu'a savoir comment mettre en page (en terme de typo, et confort de lecture, de longs, longs articles ... des idées ? Smiley lol

merci encore Smiley cligne

edit: j'ai entendu dire que le "colonnage" automatique est prévu avec CSS 3.0 (qui est certes sur les rails mais pas encore dans les bacs), y a t il des solutions alternatives efficaces (toujours en lien avec la mise en page de mes grands blocs de textes) Smiley sweatdrop
Modifié par NeroTulip (24 Sep 2007 - 17:35)
NeroTulip a écrit :
Maintenant il ne me reste plus qu'a savoir comment mettre en page (en terme de typo, et confort de lecture, de longs, longs articles ... des idées ? Smiley lol

Éviter d'avoir recours au colonage pour le média screen (rendu sur écran): si le groupe de colonnes est plus haut qu'un écran, on est obligé de scroller en bas, puis en haut, puis en bas, puis en haut... etc. Les colonnes sont envisageables pour des textes courts, et pour les médias paginés (print), mais au-delà c'est casse-gueule.

Sans parler du fait qu'il s'agit effectivement de propriétés CSS3 encore peu implémentées...
Une remarque générale pour finir: intégrer toute une série de contenus («accueil», textes informatifs, descriptifs, articles, etc.) sur une même page, c'est vraiment pas terrible pour le référencement.

Si cette composante est importante, mieux vaut avoir des documents web individualisés et liés entre eux... des pages web, quoi.
la page d'accueil ne contient que certaines informations. Les articles sont sur une page dédiée. Le problème vient du fait qu'ils sont excessivement longs et je ne sais comment les présenter pour rendre la lecture agréable. Le colonage me semblait une solution.. mais il est vrai que scroll bas -> scroll haut -> scroll bas -> etc, ce n'est pas la meilleure solution ...
Modifié par NeroTulip (24 Sep 2007 - 18:06)
NeroTulip a écrit :
Le problème vient du fait qu'ils sont excessivement longs et je ne sais comment les présenter pour rendre la lecture agréable

Rapidement:
- réduire la largeur totale du bloc de texte pour avoir des lignes de texte de longueur raisonnable;
- utiliser une taille de texte suffisante;
- penser à préciser l'interlignage grâce à line-height... ne pas hésiter à utiliser un interlignage important, surtout si les lignes de texte sont relativement longues (ex: line-height: 1.5em);
- découper l'article en plusieurs parties et utiliser des titres de section (hN) pour organiser un peu et proposer des repères visuels;
- etc.
Merci pour ses réponses ... j'utilise déjà toutes tes recommandations ... mais ca fait quand même une longue page ...

D'où ma dernière question :

que penser des PDFs ? faut avoir le plugin, cela rompt avec le flux normal de la page .. etc ...

mais au moins un petit coup de LaTeX et c'est nickel .. Smiley ohwell
Tout en sachant que les textes n'ont pas pour réel objectif d'être lu sur le net ...
coucou nerotulip

dans ton profil penses à mettre http:// devant l'url de ton site car la le lien ne marche pas quand on veut voir ton site

cedric.
NeroTulip a écrit :
Tout en sachant que les textes n'ont pas pour réel objectif d'être lu sur le net ...

Auquel cas, tu peux toujours faire une page de présentation, en laissant l'introduction du texte puis en faisant un lien bien visible vers un fichier PDF qui contiendrait le texte complet.

Attention cependant: je ne sais pas si LaTeX produit des PDFs accessibles. Il est possible (probable?) que non. Le format le plus accessible pour tes textes sera alors le HTML, la version PDF venant en renfort (on peut la proposer dès le début de la page, en mettant le lien bien en valeur, pour les utilisateurs qui préfèreraient la version PDF).
Sujet clos
Aller à