Coup de pouce CSS

Zeplin · le 10 décembre 2016

Bonjour par ici !

Rapidement : Je suis un voyageur a long court qui aimerais -d´'une certaine maniere- aider un peu ses paternels.

Ils sont aquaculteurs (Huitres/crevettes) et j'aimerais leur faire un site vitrine pour qu'il puissent partager leur savoir. Car ce sont de veritables passionnes (malgre le travail penible qui caracterise le metier (qui a fait la collecte/tri d'huitres en saison d'hiver savent..)).

Afin de faire quelque chose de leger et portable j'ai donc commence un site statique en HTML/CSS (sans javascript) Et me voila deja a mes premieres bosses... Si vous pouviez me donner un petit coup de pouce ..

NOTE : Les sources sont telechargeables en .zip a la fin du post. Ces fichiers sont lisibles sous les spoilers aussi.

1.

Je me demande pourquoi le bloc <article> ce met en dessous du <div class="bloc-g"> (le bloc avec le champ de recherche a gauche) LORSQUE la fenetre est REDIMENSSIONNEE en largeur ().

Autrement dis : j'ai donc un second menu sur la gauche qui est en "inline-block" pour etre a coter de mon <article>.

Quand je redimenssionne la fenetre en largeur mon <article> ce met automatiquement en bas du <div> .. Moi pas demande ca. m'voyez ?

Alors j'ai cree un autre <div> pour que ces deux blocs soit vu comme un seul et unique bloc. Mais ca na pas solutionne mon probleme...

Une idee ?

margin: auto ne me sert pas

min-margin. %; non plus

Precision : Ces deux blocs sont dans la balise parent <section> . Un rapport ?

2.

J´aimerais aussi que le menu ce colle (en diminuant de taille aussi) en haut de l'ecran lorsque je defile vers le bas de la page (il n'y a pas de contenu dans la page 'index' mais une fois rajoute, on devra 'scroller' vers le bas.

autrement dis :

la proprietee "position" avec la variable "fixed" sert a ancrer un objet a un endroit precis sur l'ecran/page, et restera la, meme quand on fera defiler la page.

C'est super ! Mais dans mon cas je voudrais que le menu ne ce fixe QUE sur le haut de la page, quand elle vient buter sur ce menu et

l'emporte avec lui dans sa descente.

3.

Comment avoir un Background (banniere) different sur le <header> des differentes pages du site ( Je ne vous est pas file les autres pages du menu puisque la page 'index' (accueil) est ma base) ?

4.

Pour centrer et limiter mon site sur les plus grandes resolutions, j'agis sur la balise <body> avec un 'position: center' et un 'max-width' defini en pixels ?

...

J'allais poser que la premiere question mais je me suis laisser emporter ... En tout cas c'est celle dont la logique me depasse et qui me chamboulle vraiment le design.

j'ai fais quelques recherches mais le cybercafe + debit tres bas ne m'aide pas trop. J'habite sur une montagne en ce moment, deconnecte d'internet (c'est pas plus mal) donc je risque d'etre peux reactif mais je suivrais le fil !

Merci de m'avoir lu !

Voici les sources du site (fichier HTML 'index'(2kb) et CSS 'style' (4kb) + image de banniere 'port' (229kb) (archive .zip de 226.4 kB) :

https://framadrop.org/r/HL-QFWXzDe#H8rSWrIYB8Nvd6IOG5rjT0IUQTmXN4ffbhFgZuHEsok=

Dylav · le 12 décembre 2016

Bonjour Zeplin,

Je me débrouillais pas trop mal en HTML4, puis en XHTML. Et puis je suis passé à autre chose.

Je viens néanmoins de découvrir récemment HTML5 et CSS3, dont certaines avancées m'ont scotché !

Après ce préambule oiseux, je vais tenter de te fournir des réponses constructives...

Tout d'abord, tu te compliques inutilement la vie, avec ta façon de traduire ta structure de page. Et cela en réduit la qualité sémantique. Pense en particulier aux handicapés visuels, auxquels un moteur d'interprétation traduit vocalement les pages web qu'ils consultent.

La structure que tu as choisie correspond exactement à la combinaison native des balises header, nav, aside, article et footer (et je suppose que ce n'est pas un hasard). Alors, le mieux est de décrire ta page avec ces balises. Voir la page Structure de base d'une page HTML5, et en particulier le schéma Anatomie d'une page html5 de base.

La <div> bloc-page n'apporte rien, c'est la balise <body> qui en tient lieu. Supprime la <div> et rapatrie son CSS sur body.
Pourquoi le bloc <nav> dans le bloc <header> ? Surtout si tu veux pouvoir le rendre fixe en haut de page.
Le bloc <section>, étant unique, n'apporte rien. Supprime-le.
La <div> bloc-g, c'est en fait sémantiquement le bloc <aside>.

J'en viens à ta question n°1. La présence ou non d'un bloc <section> englobant <aside> et <article> ne change rien au problème. Il s'agit d'un débordement en largeur, qui oblige le navigateur à retourner à la ligne pour afficher <article>. Il faudrait que tu revoies l'ensemble de tes dimensionnements horizontaux des blocs <aside> et <article> (width, min-width, margin, padding, border, box-shadow). Théoriquement, le display:inline-block devrait suffire (quitte à avoir un scrolling horizontal). Voir peut-être la page Display inline-block, une valeur trop peu utilisée (merci AlsaCréations), et en particulier le chapitre sur le white-space (une vraie saloperie qui semble difficile à contourner) !

À mon avis, la solution la plus simple est de t'arranger pour n'utiliser que 95% de la largeur de la page (ou peut-être 98%, à constater empiriquement), de sorte que le white-space n'ait pas l'effet négatif constaté.

Au sujet de la balise <nav>, il faut absolument que tu consultes la page Le modèle de boîte flexible, qui décrit une avancée géniale de CSS3 ! Ou comment décrire un menu horizontal en un seul attribut ! Une véritable tuerie...

J'ai un peu travaillé ton HTML et ton CSS dans ce sens. Je t'envoie le résultat de mes propositions d'aménagement. Ce ne sont bien sûr que des propositions... En particulier, tu devrais positionner ton image de fond de header au top (et non au bottom) du bloc.

Je n'ai pas encore de réponse à la question n°2.

Pour la question n°3, c'est très simple. Il te suffit d'ajouter dans le bloc <head> de chaque page HTML, derrière la balise <link rel="stylesheet" ... >, une feuille de style locale qui remplacera automatiquement le nom de l'image à prendre en compte dans cette page.

<style type="text/css">
header {background-image: url("image-de-cette-page.jpg")}
</style>

À suivre, pour les autres questions

Zeplin · le 12 décembre 2016

Super !

Ben justement j'etais parti sur la base de body, header, nav, section, footer :

https://user.oc-static.com/files/343001_344000/343677.png

avec ce cours :

http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/structurer-sa-page#/id/r-1610875

mais apres j'ai commencer a bidouiller et voila ..

Je vais donc sauver ton post et m'y mettre une fois rentre !

je te tiens au jus, merci !

Dylav · le 12 décembre 2016

Il est vrai qu'avec HTML on peut faire tout et n'importe quoi.
Mais je préfère le schéma du tuto que je t'ai cité à celui du tien,

même si OpenClassRoom (ex SiteDuZéro) est un site plutôt réputé,
mais surtout au vu de ton projet, qui correspond exactement au schéma que j'ai proposé, simple et classique !

Dylav · le 13 décembre 2016

Bonjour Zeplin,

En matière de barre de navigation fixe (ta question n°2), il existe une solution très efficace que je te laisse découvrir. Si elle ne répond pas exactement à ton vœu, elle présente l'avantage d'être simple, donc claire, ce qui est essentiel si tu n'as pas envie de t'arracher les cheveux lors de la maintenance ultérieure de ton site.

En fait, tu souhaites positionner ta barre de navigation entre le header et le corps de la page (aside & article), mais qu'elle se fige en haut de page dès que le scrolling vertical tend à la faire disparaître. Exemple élégant : le site Marianne Restaurant. Le problème, c'est qu'il y a plus de 4000 lignes de CSS à défiler, plus du JavaScript, pour trouver le mécanisme...
Dans le code HTML, la balise <nav> qui nous intéresse est décrite par les lignes 3662/3689, emboîtée ainsi,

<div id="home-layer">...
 <header>
  <div id="nav-bar">...
   <div class="container">...
    <nav class="pages">...
     <ul>
      <li...

Rien dans le CSS associé ne pilote le comportement de la barre de navigation. C'est donc qu'il est décrit dans du JavaScript. Situation un peu compliquée pour moi... il y a 11 fichiers JavaScript externes, plus du JavaScript interne !
Dommage, parce que le mouvement reste fluide, alors qu'il est très agaçant dans d'autres cas, avec une saccade comme sur Allo Ciné...

Reste à jeter un œil sur le sujet Fixer un menu après scroll (forum AlsaCréations), où la solution de Zelalsan semble assez concise, donc sans doute simple à transposer. Je ne l'ai pas étudiée...

Son fonctionnement est simulé dans la 4ème case (en bas à droite). Et le comportement semble fluide ! :super:

Dylav · le 14 décembre 2016

Question n°2 – Barre de navigation toujours visible

J'ai étudié le script de Zelalsan, et l'ai adapté à ton problème.

il tient compte du fait que le bloc <nav> est sous le bloc <header>, et non pas inclus dedans,
il fonctionne de la façon suivante : lorsque la hauteur de scroll vertical dépasse celle du bloc <header>, c'est-à-dire dès que le bloc <header> a disparu vers le haut et que le bloc <nav> va lui aussi être entamé, le script ajoute à la volée au bloc <nav> une classe fixed, dont le but est de figer la barre de navigation en haut de page (position:fixed et top:0).
bizarrement, il est préconisé de placer les scripts JavaScript en fin de <body>, alors que j'avais retenu qu'il fallait les installer dans le <head>... le monde change.

Tu trouveras ci-joint un fichier compressé contenant les 3 modules, HTML, CSS et JavaScript.

Question n°4 – Comment obtenir le même rendu quel que soit l'écran

La meilleure façon de remplir correctement une page web quelle que soit la taille et la résolution de l'écran du visiteur, c'est de tout exprimer en pourcentage,

en exprimant les dimensions d'un bloc en % de celles du bloc qui l'englobe,
en exprimant les tailles de caractères dans l'unité em (qui est liée à la taille de l'écran). Attention, si tu as choisi 1.5em pour le bloc englobant, et 1.5em pour le bloc englobé, la taille de la police sera 1.5 fois plus grande dans ce dernier bloc (1,5x1,5=2,25).

C'est un peu fastidieux à implémenter, mais tu peux ainsi espérer que tous tes visiteurs verront ton site à peu près de la même façon. Bien qu'il subsiste toujours des différences, ne serait-ce qu'à cause des images insérées dans ta page qui, elles, ne changeront pas de taille.

Dylav · le 15 décembre 2016

Regardez ce que je viens de trouver sur le forum Alsacréations : Coup de pouce CSS ! U_THIN~1.GIF

Tonton · le 18 décembre 2016

Tiens....

Connexion

Pas encore inscrit ?

Coup de pouce CSS

Messages recommandés

Zeplin

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Zeplin

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Tonton

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer