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

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. 

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

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

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.

Mais encore ?

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

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

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

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

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}

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...

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

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 !

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 !