logo Kortic

Le layout rigolo

Et encore… Quand on dit «rigolo», il n'y a bien qu'un inté que ça peut amuser.

L'idée à la base…

Nous savons tous faire ça, mais avec quelle méthode ?

Depuis des lustres, nous voyons (et faisons) des div qui contiennent des div et qui contiennent des div, pour afficher un texte qui est suivi d'une image dans une div. Certainement parce que les table nous manquent trop trop trop.
Comme on aime bien les div, on a mis tout ça dans une grosse div englobante avec le très parlant petit nom de content ou le non moins explicite surnom de body. Ben oui, chez les intés on n'est pas des couillons, té !

Et si on repartait de zéro ? Retour au body. Et oui, c'est un container cette chose là.
En y regardant bien, ce que tu lis en ce moment est pile dans une jolie zone blanche : c'est le body dis donc !!
Sauf que là, on lui a dit « – toi mon coco, tu ne dépasses pas les 1000px !».

Le graphiste s'amuse !

Bon ok, le graphiste a bien tenté de dire au client « – ça va pas être hyper simple de balancer des images en pleine largeur !». Ce à quoi le client à forcément répondu « – Ouais, je sais… Et ?». Imparable. C'est le client.

Du coup, on a l'air malin maintenant. Va falloir faire des div partout, des calculs à la noix, gérer les viewports… Raaaaaaaaa !!
Beh pas trop finalement, on a LE tips. Easy indeed, relâchement, zenitude.
«– Aller hop, on code !»
«– heu… ouais, mais ton truc il est dans le body et lui il ne va pas au bord avec ta manie d'enlever les div
«– Pas grave ça, prend mon calc() magique !! Deux margin et c'est plié !»

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

Et hop ! Le bloc pleine largeur

Panoramix & Otis

« – C'est une bonne situation, ça, scribe ?»

« – Mais vous savez, moi je ne crois pas qu'il y ait de bonnes ou de mauvaises situations. Moi, si je devais résumer ma vie, aujourd'hui avec vous, je dirais que c'est d´abord des rencontres, des gens qui m'ont tendu la main peut-être à un moment où je ne pouvais pas, où j'étais seul chez moi. Et c'est assez curieux de se dire que les hasards, les rencontres forgent une destinée. Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l'interlocuteur en face, je dirais le miroir qui vous aide à avancer.
Alors ce n'est pas mon cas, comme je disais là, puisque moi au contraire j'ai pu, et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie, je ne suis qu'amour. Et finalement quand beaucoup de gens aujourd'hui me disent : « Mais comment fais-tu pour avoir cette humanité ? » eh bien je leur réponds très simplement, je leur dis : « C'est ce goût de l´amour », ce goût donc, qui m'a poussé aujourd'hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi.»

Musée d'art moderne - Istanbul © kortic

Et tiens, voilà un peu plus de trucs rigolos

:root {
--content-width: 62.5rem; /* 1000px */
--initialgutter: 2.5rem; /* 40px */
--gutter: var(--initialgutter); /* base desktop */
font-size: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f9f9f9;
height: 100vh;
}
@media (max-width: 48rem) {
:root {
--gutter: calc(var(--initialgutter) / 2); /* réduction de la gouttière */
}
}
/* la jolie classe css qui va "pousser" vers les murs */
.fit-to-window {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.fit-to-window > .contain {
width: var(--content-width);
max-width: calc(100vw - calc(var(--gutter) * 2));
margin-left: auto;
margin-right: auto;
}
/* view-source pour voir la CSS complète */

Voilà voilà… Pas grand chose à faire en plus et là, cher toi, ton XPATH et super light !
Le h3 du monologue d'Arthur, ci-dessous, a une profondeur de /html/body/main/div[1]/div/h3.
Autant dire que quand tu vas parser le DOM, ça va décaper !!

Et un autre bloc pleine largeur

Kaamelott, Arthur.

«Eh bien, c’est l’histoire d’un petit ourson qui s’appelle... Arthur. Et y’a une fée, un jour, qui vient voir le petit ourson et qui lui dit : – Arthur tu vas partir à la recherche du Vase Magique. Et elle lui donne une épée hmm... magique (ouais, parce qu’y a plein de trucs magiques dans l’histoire, bref) alors le petit ourson il se dit : – Heu, chercher le Vase Magique ça doit être drôlement difficile, alors il faut que je parte dans la forêt pour trouver des amis pour m’aider.
Alors il va voir son ami Lancelot... le cerf (parce que le cerf c’est majestueux comme ça), heu, Bohort le faisan et puis Léodagan... heu... l’ours, ouais c’est un ours aussi, c’est pas tout à fait le même ours mais bon. Donc Léodagan qui est le père de la femme du petit ourson, qui s’appelle Guenièvre la truite... non, non, parce que c’est la fille de... non c’est un ours aussi puisque c’est la fille de l’autre ours, non parce qu’après ça fait des machins mixtes, en fait un ours et une truite... non en fait ça va pas. Bref, sinon y’a Gauvain le neveu du petit ourson qui est le fils de sa sœur Anna, qui est restée à Tintagel avec sa mère Igerne la... bah non, ouais du coup je suis obligé de foutre des ours de partout sinon on pige plus rien dans la famille... Donc c’est des ours, en gros, enfin bref... Ils sont tous là et donc Petit Ourson il part avec sa troupe à la recherche du Vase Magique. Mais il le trouve pas, il le trouve pas parce qu’en fait pour la plupart d’entre eux c’est... c’est des nazes : ils sont hyper mous, ils sont bêtes, en plus y’en a qu’ont la trouille. Donc il décide de les faire bruler dans une grange pour s’en débarrasser... Donc la fée revient pour lui dire : "– Attention petit ourson, il faut être gentil avec ses amis de la forêt" quand même c’est vrai, et du coup Petit Ourson il lui met un taquet dans la tête à la fée, comme ça : " – BAH !".
Alors la fée elle est comme ça et elle s’en va... et voilà et en fait il trouve pas le vase. En fait il est... il trouve pas... et Petit Ourson il fait de la dépression et tout les jours il se demande s’il va se tuer ou... pas...»

Vietnam © kortic

Et la suite ?

J'ai envie de dire : « – view-source !»
C'est juste une base de layout de page, y'a plus qu'à !
Petite précision : sous Internet explorer, les var() CSS, on oublie. Tout comme le sticky CSS. Minimum Egde !