nass01 Posté 14 Avril 2018 Partager Posté 14 Avril 2018 Bonjour, j'espère que tout le monde va bien je suis sur WordPress depuis un an maintenant mais je ne m'y connaît pas tellement en langage html et css, j'ai quelques connaissances fragile mais insuffisante pour réaliser mon objectif qui est de reproduire exactement la même présentation que cette image : https://zupimages.net/up/18/15/z3gz.png vous voyez que l'image est assez simple : une bande en arrière plan qui traverse l'écran de gauche à droite d'une hauteur de 10.5 centimètre avec en premier plan trois rectangle aligné sur la même ligne de 6.5 cm (largeur) x 7 cm (hauteur) avec 0.4cm d'espace entre eux dont la bas (des rectangles) dépasse de 1.6 cm le bas de la bande en arrière plan Lien vers le commentaire Partager sur d’autres sites More sharing options...
PotatoesJunky Posté 14 Avril 2018 Partager Posté 14 Avril 2018 Bonjour, Déjà, n'utilise pas les cm : sur le Web, on parle en pixels. Ensuite, si tu es sous Wordpress, pourquoi ne pas chercher un thème (= design pour Wordpress) qui corresponde à cette présentation ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
bekhan Posté 31 Mai 2018 Partager Posté 31 Mai 2018 Hello, Je rejoins l’avis de PotatoesJunky, si tu utilise WordPress il y a énormément de plugins payants/gratuits qui te permettent de réaliser ce genre de "briques". Mais si tu souhaites vraiment le faire par HTML/CSS, voici un petit aperçu, tu pourras te baser dessus : La partie HTML : <!DOCTYPE html> <html> <head> <title>Ma page</title> </head> <body> <div class="background"> <div class="container"> <div class="block1"> Texte du block 1 </div> <div class="block2"> Texte du block 2 </div> <div class="block3"> Texte du block 3 </div> </div> </div> </body> </html> La partie CSS : body {background-color: #000000;} .background {height: 250px; width: 100%; background-color: #FF0000;} .container {margin: auto; width: 50%; padding-top: 150px;} .block1 {height: 150px; width: 150px; background-color: #FFFFFF; float: left; margin-right: 15px;} .block2 {height: 150px; width: 150px; background-color: #FFFFFF; float: left;margin-right: 15px;} .block3 {height: 150px; width: 150px; background-color: #FFFFFF; float: left;margin-right: 15px;} Ou alors, si ton site utilise la bibliothèque Bootstrap c'est encore plus simple, il suffit juste de modifier le style (couleur et compagnie) en rajoutant un class dans chaque div : <div class="col-md-12"> <!-- et tu mets le style que tu veux --> <div class="col-md-4"> Block 1 </div> <div class="col-md-4"> Block 2 </div> <div class="col-md-4"> Block 3 </div> </div> Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant