[Invision & PHPBB2] Coder un cadre autour du forum en images

NyoTheNeko

Age : 30Messages : 5683

Ven 2 Jan 2015 - 12:58

#html #css #css3 #auteur_NyoTheNeko #phpBB2 #Invision

[Invision & PHPBB2] Coder un cadre autour du forum en images

Je comprends rien à ton titre...

Oui, le titre n'est pas le plus clair du monde, mais grâce à la gentillesse extrême de Gravity et Hismé, laissez-moi vous expliquer ce dont je veux parler! Ou plutôt même: vous montrer. En effet, voici donc ce que je vais vous apprendre à faire. Imaginez que Gravity vous fasse une superbe maquette comme pour la commande de Hismé pour Heiwa et que GASP! Mais il y a un cadre autour du forum! Voyez seulement:

Et là, vous vous demandez comment vous allez faire, parce qu'il y a un haut, un bas, et surtout, un motif de pierres qui doit se répéter... et si le motif ne se répète pas à la bonne hauteur, vous faite comment? Et là il faut toucher aux templates et tout ça, et ça va pa bien s'adapter à l'écran des gens avec une taille fixe, et ça va pas le faire et... FAUX!
En réalité, c'est très facile.

Bref, c'est peut-être un peu difficile de voir comment faire, c'est pourquoi j'écris... ce tuto! YOUPI! =D

Cependant, je vous conseille de lire le tuto sur les sélecteurs de Manumanu qui vous sera utile, vu que nous utilisons des :before et :after. Sinon, tout le reste sera expliqué.

Pour le PHPBB2

On commence tout de suite avec la plateforme la plus utilisée: le PHPBB2. Vous verrez, c'est aussi la plus "simple" des deux

Le HTML

Il n'y a pas de HTML à faire. Vraiment, rien, nada. C'est pour ça que c'est si facile! Cependant, il y a quelques trucs que vous pouvez faire, simplement pour vous faciliter la vie par la suite. La plupart de ces choses n'ont même pas besoin de toucher du HTML.

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates.
Là vous allez sous Affichage -> Templates -> Général -> overall_header et vous suprimez ce petit bout de code:

Code:

                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>

À la limite, vous pouvez également simplement supprimer les balises br dans ce code, mais si de toute façon vous ne voulez pas afficher la description et le nom du forum, autant les retirer complètement

Le CSS

Là c'est le plus long! Évidemment, vous devez avoir les images à disposition pour le haut, le bas et le centre qui se répète.

Mais d'abord, commençons par le commencement. Première ligne du CSS:

Code:

/* Pour l'adaptivité du design par rapport à l'écran. */
.bodylinewidth {
  width: 100%;
}

Comme je l'ai écrit dans mon petit commentaire, cette ligne très simple permet de faire en sorte que l'intérieur du forum va s'adapter à la taille de l'écran, en prenant simplement toute la largeur du forum. Normalement, le bodylinewidth prend la largeur que vous lui avez indiqué dans Général -> Forum -> Configuration -> Largeur du forum (nombre ou %) :. Mais là, en gros, on lui dit de ne pas le rendre en compte.

Bon là, forcément, votre forum ressemble à plus grand chose, du coup on va redonner la largeur que l'on veut au forum en ajoutant ceci:

Code:

/* Permet que l'intérieur du corps de page soit plus petit que le cadre */
#page-body .three-col {
  margin: auto;
  width: 890px;
}

En gros, on redonne une taille "normale" à tout ce qui doit se trouver dans le cadre et on le centre.

Bon, tout ça c'est super, mais maintenant, il est temps de mettre en place la bannière et le forum. Voici donc le code très important:

Code:

/* Permettra de placer la bannière et le footer correctement. */
.bodyline {
  position: relative;
  z-index: 2;
  padding: 0px;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire ne sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!

Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent n'est tout simplement pas dessus! Pas de panique, on va encore s'occuper de ça, mais d'abord, mettons en place le corps de page!

Code:

/* Le cadre du corps de page. */
#page-body {
  margin: auto;
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
}

Vous voyez donc que l'on change d'élément sur lequel on applique, mais en gros, on entoure le corps, on met un width: 100%; (pour s'adapter à toute largeur d'écran), et on fait se répéter le background seulement sur l'axe des y (donc verticalement). Maintenant, votre forum ressemble déjà un peu plus à l'encadrement que vous devriez avoir! Cependant, bien sûr, la bannière est encore au-dessus du logo, et le bas de votre forum ne touche pas le milieu. Embêtant, mais facilement corrigeable à l'aide des margin!

Cependant, avant de nous amuser avec les margin, changeons la taille du logo pour qu'il ait la bonne hauteur et largeur (toute la hauteur de la bannière donc).

Chez moi, ça donne ça:

Code:

/* Taille du logo "fictif" pour rendre la bannière clickable */
#i_logo {
  height: 933px;
}

Bien sûr, chez vous la taille peut être différente.

Il faut le faire avant de jouer avec les margin, car la hauteur du logo détermine aussi la taille de la margin: plus le logo est grand, plus le margin le sera aussi.

Reprenons donc le code que nous avions avant, et ajoutons-y des margin (les miennes sont tout à la fin de chacun des deux bouts de code):

Code:


/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: -955px;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-top: -46px;
}

Mettez toujours les margin-top, margin-bottom, margin-left ou margin-right après les margin: tout court. En effet, sinon, votre margin-top/bottom/left/right ne sera pas prit en compte!

Ert voilà, votre forum est dans un joli cadre! =D

Cependant, si vous n'avez pas retiré la couleur du cadre de bodyline, vous remarquerez que le cadre n'arrive pas vraiment jusqu'au bout de votre page de navigateur... C'est normal, parce que le body a une marge, et le bodyline a un cadre!

On peut donc retirer tout ça en mettant ceci dans le CSS:

Code:

body {
  margin: 0px;
}

.bodyline {
  border: 0px solid;
}

Le Javascript

Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement!

Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:

Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript,nommez-le quelque chose comme "Multiplication en taille du page-body" cochez sur toutes les pages.

Puis vous y mettez:

Code:

$(function() {
    $div = $('#page-body');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!

En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de page-body.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de page-body, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à page-body.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui est fait et tout simple pour PHPBB2!

Pour Invision

Invision est une des plateformes que j'utilise personnellement le plus, parce qu'il n'y a pas vraiment de tableaux. Du coup c'est la deuxième version que je vais vous montrer, et je ne vais pas vous montrer pour les autres versions. Désolée!

Le HTML

Ici, c'est légèrement plus difficile que pour le PHPBB2, car il y a deux templates sur lesquels on va devoir modifier quelque chose. En réalité, on ajoute une seule et même div, cependant, vu que la div s'ouvre sur overall_header, il faut la fermer sur overall_footer_begin !

Cherchez dans votre template overall_header ceci:

Code:

</div>
<div id="submenu">

Il vous suffit alors d'ouvrir une div entre deux en lui donnant une class, comme par exemple:

Code:

</div>
<div id="contour_forum">
   <div id="submenu">

Maintenant, dans overall_footer_begin, tout à la fin du template, vous avez ceci:

Code:

</div>
<!-- END html_validation -->

Rajoutez-y simplement une div fermante, comme ceci:

Code:

</div>
</div>
<!-- END html_validation -->

Et voilà qui est terminé pour la partie compliquée!

Pour la partie simple, nous avons pareil pour que le PHPBB2, donc je vous le remets ici:

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates. Je vous laisse jouer avec

Le CSS

Plus compliqué tout de même que le HTML, le code reste cependant assez simple et similaire à sa version du PHPBB2, à quelque changements près!

Commençons tout de suite par mettre les images de bannière et de footer du forum:

Code:

/* Permettra de placer la bannière et le footer correctement. */
.container_IE {
  position: relative;
  z-index: 2;
  padding: 0px;
  background-color: #A5C9E9;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:after {
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
}

Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire en sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!

Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent a un fond, tout d'abord, et il ne se met pas au-dessus de l'image de bannière!

On va donc tout de suite régler notre premier problème:

Code:

/* On met la bannière é la bonne largeur et au bon endroit */
#logostrip {
  max-width: 797px;
  margin: auto;
  height: 568px;
  background: none !important;
}

#logostrip img {
  width: 797px;
  height: 600px;
}

div#logostrip #logo {
  margin: 0px;
}

Expliquons rapidement son code. Sur Invision, le logo est dans deux div: #logostrip et #logo. #logo a une marge qui est mise automatiquement, une marge que je retire dans le CSS, et #logostrip doit être mit au centre (avec margin-auto). Je mets aussi une largeur et une hauteur à notre image du logo (pour qu'elle prenne toute la hauteur de la bannière et une bonne largeur. Et enfin, je retire la couleur de fond à notre logo, avec le background:none!

Maintenant, occupons-nous du corps du forum!

Code:

/* Mettre le fond au reste */
#ipbwrapper {
  margin: auto;
  width: 100%;
  padding: 0px;
}

/* On met le centre en place */
#contour_forum {
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
  margin-top: 100px;
}

Ici c'est simple, on met un width: 100% à ipbwrapper pour qu'il s'adapte à la taille de l'écran et on retire tout padding, ensuite, on utilise la div qu'on a créée pour mettre l'image de fond qui se répète verticalement, en mettant un width de 100% pour qu'elle s'adapte à toute taille d'écran.

Maintenant, vraiment, on n'a plus qu'un seul problème: tout ce qui est à l'intérieur prend toute la largeur... vraiment pas pratique, et pas franchement ce qu'on veut!

Du coup, une seule solution: mettre une largeur max à tout ce qu'il y a à l'intérieur et un joli margin: auto pour que ça se centre:

Code:

/* On force le reste à être plus petit et rentrer dans le cadre. */
#submenu, #userlinks, #clearfix, #gfooter, p.center, #emptyidcc {
  position: relative;
  max-width: 790px;
  margin: auto;
  left: 3px;
}

Le left: 3px est mit parce qu'en réalité, sur Invision, tout est un tout petit peu décalé. Rien de bien grave donc, qui ne peut être corrigé avec un petit position: relative!

Et à présent, vient donc le moment de retirer tout trou béant entre le header et notre corps,ou le footer et notre corps. Dans mon cas, le footer est déjà collé au corps, donc je n'y touche pas (mais vous pourriez simplement ajouter un margintop négatif à .container_IE:after ), alors il me suffit de changer le .container_IE:before.

Cela donne donc ceci :

Code:

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  margin-bottom: -711px;
}

Et voilà le CSS qui est terminé!

Le Javascript

Le Javascript pour Invision est le même que celui de PHPBB2 à un détail près: il s'applique sur #contour_forum ! Du coup, je copie-colle juste ce qu'il y a plus haut en changeant ce détail (parce que j'ai la flemme =P)

Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement! Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:

Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript, nommez-le quelque chose comme "Multiplication en taille du contour_forum " cochez sur toutes les pages.

Puis vous y mettez:

Code:

$(function() {
    $div = $('#contour_forum');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!

En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de contour_forum.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de contour_forum, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à contour_forum.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui sonne la fin de ce tuto! ^w^

Dernière édition par NyoTheNeko le Jeu 22 Jan 2015 - 22:51, édité 5 fois

redSheep

Age : 25Messages : 6

Dim 4 Jan 2015 - 22:18

waouh. le tuto hyper génial, j'y avais jamais pensé.
j'en ai pas besoin mais je le trouvais génial donc bon. :decede:
gg !

NyoTheNeko

Age : 30Messages : 5683

Lun 5 Jan 2015 - 14:35

Merci redsheep!

Du couè le tuto est à présent terminé! J'ai rajouté pour Invision et c'est TEMRINÉEEEE =D

Nihil Scar Winspeare

Messages : 5244

Sam 10 Jan 2015 - 8:50

Merci beaucoup pour ton partage Nyo, tu as tout bien expliqué *-* !
Sympa l'idée de changer la hauteur en javascript ! Il y a des petites fautes d'étourderies dans les commentaires du CSS si tu t'ennuies et que tu veux corriger ça (ex : "adaptrivité") :)

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire en sorte que cela s'adapte à l'écran.

Il me semble que pour les :after et :before tu peux faire sans le "margin: auto" puisque tu as une largeur qui prend tout l'espace, non ? Le width: 100% n'est pas obligatoire ? Je crois qu'avec display: block; automatiquement il y a un width: 100%; (^-^).
Des petites remarques rapides que tu savais peut-être déjà, je m'interroge juste histoire de rendre le code encore plus court ♥

NyoTheNeko

Age : 30Messages : 5683

Sam 10 Jan 2015 - 10:34

J'écris trop vite pour mon propre bien, d'où les fautes =P
Le margin: auto, c'est une habitude en fait, je le mets presque toujours même s'il y en a pas besoin ('est comme un tic si tu veux x) ), effectivement on pourrait l'enlever x)

Nihil Scar Winspeare

Messages : 5244

Dim 11 Jan 2015 - 18:25

Oui, on a souvent des petits tics en code, je vois exactement ce que tu veux dire x)
J'ai tendance à éviter les "width: 100%" quand on a un display: block, histoire d'éviter tout problème si quelqu'un s'amuse à mettre des padding sans ajouter un box-sizing spécial x-x (Nihil => parano )

NyoTheNeko

Age : 30Messages : 5683

Dim 11 Jan 2015 - 18:35

Le truc, c'est que si tu veux que ça s'adapte à la taille de ton écran (donc que ça prenne tout l'écran) le width: 100% est un peu obligatoire, tu peux pas donner de valeur fixe ^^

Nihil Scar Winspeare

Messages : 5244

Dim 11 Jan 2015 - 20:21

Je viens de relire mon message où j'en parlais, j'ai écrit trop vite et j'ai mangé des mots

Mon explication qui ne sert à rien T----T:

Dernière édition par Nihil Scar Winspeare le Lun 12 Jan 2015 - 9:59, édité 1 fois

NyoTheNeko

Age : 30Messages : 5683

Dim 11 Jan 2015 - 22:00

Hmm pas tout à fait, vu que tu veux overrider toute valeur qui a été mise ailleurs ^^ Après, je pourrais très bien dire de mettre une largeur de 100% dans la aprtie Générale -> Configuration de ton Panneau d'administration, mais là je le mets directement dans le CSS. Parce que sinon, justement, si tu as mit, allez, 800 (donc 800px) là, eh bien ça ne va pas marcher, le :after et :before auront une largeur de 800px. Après je pourrais évidemment le retirer à :after et :before si je mets simplement un 100% à bodylinewidth mais sinon ça va pas marcher.
Et de toute façon, je suis le genre de personne qui préfère que cela reste parfaitement clair dans mon code, plutôt que d'optimiser à tout prix (pour ça que je déteste le Scala et les one-liners). Plutôt que de devoir après expliquer en commentaires (ou ne pas expliquer du tout) pourquoi ça prend toute la largeur automatiquement, je préfère directement mettre "width: 100%" pour indiquer que le bloc prendra toute la largeur, même si ce n'est pas nécessaire. Après, les margin: auto c'est un tic, là on en a pas besoin pour un width 100% de toute façon x)
Après, je ne mets pas de padding dans mon code, et je crois qu'on répète déjà assez partout que le padding rajoute à la largeur du bloc. Si les gens en rajoutent, pour le coup, j'y peux pas grand chose x) (surtout que je vois pas dans quel cadre tu mettrais un padding en suivant ce tuto) (et dès fois j'ajoute du padding à un width 100% pour cacher la barre de navig dans un bloc =P)

En tout cas, c'est gentil de vouloir m'expliquer Nihil Mais en fait, tout ça je le sais déjà x) J'avais juste pas pensé que tu parlais du display: block avec le width: auto =P

Nihil Scar Winspeare

Messages : 5244

Dim 11 Jan 2015 - 22:11

Je trouvais ça bizarre aussi que tu ne connaisses pas ça XD (dire que j'ai pris le temps de faire un exemple =_____=, tu aurais pu au moins faire semblant de pas connaître è_é ! XD), c'est pour ça que j'avais abordé le sujet trop rapidement dans mon premier message x)

Je re-précise bien que le width: 100% et le margin: auto, c'était pour le before et le after, pas pour autre chose (^-^), par ce que du coup je n'ai pas trop trop compris pourquoi tu parles de la largeur du forum ou d'overrider une autre valeur... (BAKA NIHIL complètement perdue)
Normalement que le width 100% et le margin soient là ou non (pour le before et le after) ça ne change rien, à part prendre 2 lignes en plus XD... Et comme tu prends le temps d'expliquer pourquoi le width: 100% ("Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire en sorte que cela s'adapte à l'écran."), je croyais que c'était une simple inattention, c'est tout (◕‿◕✿)

NyoTheNeko

Age : 30Messages : 5683

Dim 11 Jan 2015 - 22:25

Ah l'explication est là pour que les gens mettent pas une valeur fixe comme width: 1059px; (genre la taille de leur image en largeur quoi) ce qui ferait que ça ne s'adapte plus à l'écran et se "décale", surtout que je leur dis de mettre comme hauteur la hauteur de leur image! ^^"

Nihil Scar Winspeare

Messages : 5244

Dim 11 Jan 2015 - 22:27

Oooow, je comprends mieux, merci pour l'éclaircissement :)

Akina-chan

Age : 31Messages : 140

Mer 28 Jan 2015 - 19:24

Merci beaucoup ! Ultra sympa !!!

Yesterday

Age : 29Messages : 57

Ven 30 Jan 2015 - 23:43

merci beaucoup! :)

Arabesque Jo

Age : 75Messages : 697

Mer 25 Fév 2015 - 9:32

Merci beaucoup !

Murania

Age : 27Messages : 85

Dim 1 Mar 2015 - 11:46

Merci =)

patriciadpt30

Age : 61Messages : 240

Ven 13 Mar 2015 - 21:52

merci pour voir je suis curieuse de nature :)

Lunayine

Age : 27Messages : 55

Dim 15 Mar 2015 - 19:59

Le résultat donne drôlement envie *-* Je suis nulle en graphisme mais je vais tout de même regarder. Merci pour ce partage :3

mikalus

Age : 53Messages : 92

Lun 16 Mar 2015 - 16:42

Thank you.

Filou

Age : 33Messages : 162

Sam 21 Mar 2015 - 17:59

Je trouve enfin une explication pour cette étape du codage.
Merci de partager ta science et ton expérience Nyo', je suis pas sûre de tout comprendre dans la seconde mais je dormirais moins bête ce soir :3

tchapalow

Age : 34Messages : 33

Mar 7 Avr 2015 - 12:51

Je comprends pas tout alors je voudrais voir ça de plus près!
Je vous remercie pour ce code!

Ryoma

Age : 37Messages : 420

Sam 11 Avr 2015 - 14:43

merci beaucoup

Clémentine

Age : 32Messages : 223

Ven 17 Avr 2015 - 1:40

Merci *_*

Geniustyx

Age : 26Messages : 31

Sam 18 Avr 2015 - 12:46

Merci beaucoup ♥

Kokoa

Age : 25Messages : 57

Lun 27 Avr 2015 - 10:43

wow superbe :0

Contenu sponsorisé