Partage

Disposition d'éléments dans une bannière

Sujet résolu
30 novembre 2017 à 18:51:00

Hello,

Je débute en HTML CSS, j'en suis seulement au TP où il faut créer son propre site.

Je ne parviens absolument pas à disposer les éléments de ma bannière comme je le souhaite..

La bannière est simplement constituée d'un fond de couleur (CSS), d'une image PNG qui doit être disposée à droite, et à gauche un titre ainsi qu'un bouton.

Voici mon code html : 

<div id="banniere">
<div id="banniere_description">
<div class id="image">
<img src="images/espion.png" alt="image d'espion" />
</div>
<h2>Vestibulum luctus elit eu liber </br> Vestibulum luctus elit eu libero ultrice </h2>
<a href="#" class="bouton">En savoir plus</a>
</div>
</div>

Quelqu'un pourrait-il me proposer une solution pour le CSS pour que cela ressemble à ce que je souhaite faire : 

Merci pour votre aide !

Adrien

1 décembre 2017 à 12:00:38

Salut,

Première question pour commencer : à quoi sert l'image de l'espion ?

Si son rôle est purement et simplement décoratif alors sa place est dans le CSS (en background-image par exemple) et non dans le HTML. 

1 décembre 2017 à 17:21:16

Salut,

Oui son rôle est simplement décoratif effectivement ! je vais dejà faire ça :)

Et concernant le positionnement de ces 3 éléments du coup, le titre le bouton et l'image.

Je ne m'y retrouve plus du tout entre flexbox et float .. j'aimerai simplement voir une structure css et html propre de cet exemple pour m'aider à visualiser comment ca fonctionne !

Merci

1 décembre 2017 à 17:27:20

Demandes de codes ou de solutions

Nous ne donnons pas de code tout fait sur les forums : nous vous aidons à construire le votre, en vous expliquant et en corrigeant vos erreurs. Si vous posez une question, merci de toujours montrer ce que vous avez essayé de faire, même si c'est faux. Si vous oubliez, on vous le demandera : ne le prenez pas mal, c'est normal et nécessaire pour bien vous répondre.

Si vous répondez aux questions des autres, merci de ne pas poster de code tout fait. Corrigez plutôt les codes que les débutants postent, ou donnez-leur des indices s'ils ne savent pas comment démarrer. Ce sera bien plus bénéfique pour eux. <img src="../../bundles/tinymce/vendor/tiny_mce/plugins/emotions/img/smile.png" title=":)" alt=":)" />

https://openclassrooms.com/forum/sujet/regles-de-ce-forum-a-lire-avant-de-poster-1

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
1 décembre 2017 à 20:18:53

Bonsoir,

nous avons donc un conteneur à fond jaune avec une image de James Bond en background, qu'il faudra positionner et ne pas répéter,
je verrais bien une marge intérieure à droite  de ce conteneur - histoire de laisser de l'espace pour voir Bond en fond - qui va contenir deux éléments de type bloc qui vont s'afficher l'un au dessus de l'autre, leurs contenus étant centrés.

2 décembre 2017 à 13:35:14

Mais encore ?

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
2 décembre 2017 à 15:32:17

Mais encore ??? Que veux-tu dire Artemix ?

2 décembre 2017 à 18:11:10

Tu ne dis que ce que tu veux faire, mais n'expliques pas ton problème. Donc, mais encore, quel est ton problème ?

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
2 décembre 2017 à 19:50:33

je n'ai aucun problème, je réponds simplement à Aurélien_, en lui donnant des pistes pour résoudre son problème
3 décembre 2017 à 13:55:32

Hello tout le monde,

Voici mon code HTML :

<div id="banner_image">
   <h1>Vous souhaitez eliminez les erreurs de </br>votre communication graphique ?</h1>
    <a href="#">Contactez-nous</a>
</div>


Mon code CSS : 

#banner_image
{
    position :absolute;
    width: 100%;
    height: 400px;
    background-color: #f1c40f;
    background-image: url(images/espion.png); Arial; serif;
    background-position: 90% 100%;
    background-repeat: no-repeat;
}

#banner_image h1
{ 
    font-family:'spy_agency_halftoneregular', Arial, serif;
    font-size: 25px;
    position: absolute;
    bottom:190px;
    left:85px;
    text-align: center;
}

#banner_image a
{
    font-family: Trebuchet MS;
    position: absolute;
    bottom: 150px;
    left:340px;
    border: 1px blue solid;
    border-color: black;
    border-radius: 50px;
    background-color: black;
    padding : 5px 20px 5px 20px;
    margin-top: 0px;

Voici ce que j'obtiens :

J'ai le résultat que je souhaitais, mais je voulais savoir si mon code était logique et s'il n'y avait pas une façon plus logique pour en arriver là ? 

Autre question, je souhaite créer un nouveau bloc sous cette bannière jaune, mais lorsque je définis la couleur et la taille, celles-ci commencent au coin supérieur gauche de la fenêtre et non au coin inférieur gauche de la bannière comme je le voudrais. Comment pourrais-je faire ?

Merci par avance :)

3 décembre 2017 à 14:52:46

Non ta solution n'est pas bonne,

1 supprime les ID, remplace par classes
2 pas besoin de position:absolute, tu vas être embêté pour modifier la bannière, d'ailleurs tu l's expérimenté
3 une marge intérieure de la div principale suffira, pour que les contenus soient centrés dans la partie gauche de la bannière
4 tu pourras ainsi ajouter un 3ème élément
5 pour positionner verticalement les éléments texte, mets leur des marges (intérieure ou extérieure)
ou bien utilise  flex, c'est à dire display la bannière en flexbox

3 décembre 2017 à 19:24:15

Bonjour

J'ai remarqué qu'il y a des membres qui on proposez le CSS position : absolute, alors il y a une solution plus simple regarder svp se code de CSS

#image { float:right; margin-top:0px; margin-right:0px}

VPN : comment se protéger ?
4 décembre 2017 à 8:41:10

Aurélien_ :

Ligne 7 de ton CSS : pourquoi mettre des polices de caractères en fallbacks de ton image de fond ?

JuliennePouchard :

#image { float:right; margin-top:0px; margin-right:0px}, c'est franchement crade comme solution...

4 décembre 2017 à 16:19:55

Bon voilà mes ajustements : 

HTML : 

 <div class="banner">
       <div class="banner_text">
            <h1>Vous souhaitez eliminez les erreurs</br>de 
                votre communication graphique ?</h1>
   	    <a href="#">Contactez-nous</a>
       </div>
 </div>

CSS :

.banner
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 400px;
    background-color: #f1c40f;
    background-image: url(images/espion.png);
    background-position: 90% 100%;
    background-repeat: no-repeat;
}

.banner h1
{
    font-family:'spy_agency_halftoneregular', Arial, serif;
    font-size: 1.9em;
    text-align: center;
    margin-left: -360px;
}

.banner a
{
   width: 150px;
   text-align: center;
   font-family: Trebuchet MS;
   color: white;
   background-color: black;
   border: 2px black solid;
   border-radius: 50px;
   padding: 2px 15px 2px 15px;
   margin-left: 370px;
}

.banner_text
{
    margin-bottom: 25px;
}

résultat : 

Donc l'image a été placé dans le CSS, le titre et le bouton en flexbox et en jouant avec les marges. et ma troisième partie "qui sommes nous" se place bien à la suite comme demandé.

Pensez vous que le code utilisé désormais est viable ?

Merci beaucoup

5 décembre 2017 à 17:29:25

on s'approche,
mais plutôt que des padding-left sur les 2 éléments, on peut essayer un padding-right du conteneur principal,
avec centrage de ces deux éléments
et la div banner_text est inutile

la div principale reste flex, justify-content:center, et on lui ajoute : 
align-items: center;
pour que les deux textes soient centrés dans l'espace laissé par le padding-right

Encore un petit effort !

7 décembre 2017 à 13:09:40

Je viens d'essayer ta méthode ! ça fonctionne et c'est plus simple et propre ! et j'ai finalement compris la logique de tout ça ! =)

Merci beaucoup pour votre aide !

7 décembre 2017 à 15:39:17

Bravo Aurélien !
n'hésite pas à revenir demander des explications et de l'aide
bonne continuation

Disposition d'éléments dans une bannière

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown