[AWESOMEBB] Aide pour une mise en forme PA

Invité · Invité Jeu 4 Juin 2020 - 18:18

Version du forum :
AWESOMEBB
Templates modifiés :
oui
Navigateur :
Chrome

Coucou Phil. Je ne sais pas si tu peux apporter ce genre d'aide mais voilà : j'essaye de construire par mes propres moyens une mise en forme pour une page d'accueil parce que je tiens à apprendre un peu aussi par moi même. En fouillant à droite et à gauche, j'ai déjà réussi à faire un bloc je te mets le code à la suite.
le problème est que je veux mettre plusieurs blocs espacés (au moins deux pour commencer) sur la même ligne donc à la même hauteur et ça je ne sais pas comment créer cet espace sans que les blocs se retrouvent les uns en dessous des autres.
Est-t-il possible que tu m'expliques comment faire et si c'est possible dans le code déjà existant ?
Si je peux avoir la base du fonctionnement je pense déjà essayer de me débrouiller pour les valeurs, largeurs de blocs, couleur etc... par exemple, parce que pour l'instant je réfléchis à comment faire quelques choses de potable ^^ . Merci par avance.

Code:: <div style="width:300px;height:150px;background:#ededed;padding:10px;box-sizing:border-box;margin-left:200px;border: 8px #444444 solid; "> blablablablablablablabla o miroir miroir dis moi qui est la plus moche </div>

**Milouze14** · **Milouze14** Jeu 4 Juin 2020 - 19:07

Coucou Alex,
alors en css et sur cette partie du fofo, tu peux utiliser un float.
C'est à dire:
on renseigne si on positionne le bloc à gauche:

Code:: float:left:

on renseigne si on positionne à droite:

Code:: float:right;

Ce qui donne pour ton code HTML:

Code:: <div style="width:300px;height:150px;background:#ededed;padding:10px;box-sizing:border-box;border: 8px #444444 solid;float:left; "> Blablablablablablablabla o miroir miroir dis moi qui est la plus moche </div> <div style="width:300px;height:150px;background:#ededed;padding:10px;box-sizing:border-box;border: 8px #444444 solid;float:right; "> Blablablablablablablabla ben pit être Milouze!!! </div>

Invité · Invité Ven 5 Juin 2020 - 12:18

Coucou Phil merci beaucoup. +1000 J'ai vu le com ! MdR1

Je continue à potasser. Je vais maintenant tenter de trouver comment réduire l'espace entre les deux blocs. Je sens que ça ne va pas être du gâteau.
Pour l'instant, je ne clos pas mon sujet. Si je me noie je reviens vers toi.
Souhaite moi bonne chance steplé. lol

**Milouze14** · **Milouze14** Ven 5 Juin 2020 - 18:11

Coucou Alex,
alors bonne chance MDR

.

**Milouze14** · **Milouze14** Sam 6 Juin 2020 - 8:01

Coucou Alex,
bon aller, je vais te filer un tit coup de main.
Alors il faut toujours penser que le conteneur qui reçoit les div que tu vas déposer doit avoir
une largeur à cent pour cent:

Code:: width:100%;

Comme dans cette partie, on ne sait pas la largeur définie, on va donc englober toutes les divs que tu voudras déposer dans celle-ci:

Code:: <div style="width:100%;"> ICI TOUTES LES DIVS AVEC UNE LARGEUR EN POURCENTAGE ET NON EN PX </div>

Ce qui donnera une fois réalisé:

Code:: <div style="width:100%;"> <div style="width:48%;height:150px;background:#ededed;padding:10px;box-sizing:border-box;border: 8px #444444 solid;float:left; "> Blablablablablablablabla o miroir miroir dis moi qui est la plus moche </div> <div style="width:48%;height:150px;background:#ededed;padding:10px;box-sizing:border-box;border: 8px #444444 solid;float:right; "> Blablablablablablablabla ben pit être Milouze!!! </div> </div>

Invité · Invité Sam 6 Juin 2020 - 11:16

Ah ! Tu me sauves ! Merci beaucoup. Je vais tester et voir ce que je peux faire avec tes indications.

Invité · Invité Dim 7 Juin 2020 - 12:54

Re Phil. Tes indications m'ont beaucoup aidé. Je suis contente d'avoir réussi avec ton aide, à faire une mise en page, elle est simple pour le moment mais je suis déjà contente d'y être arrivée et du résultat obtenu. Je pense que tu peux donc classer ce sujet. Merci beaucoup. fr4