Mettre texte sur bannière footer?

Question

Bonjour,

Alors voila j'ai commencé à me mettre au CSS tout juste hier donc ne me tapez pas sur les doigts haha

J'essaie de créer quelques pages d'un site test pour le moment et je rencontre un problème avec mon footer. En effet, je n'arrive pas à mettre le texte sur la bannière que j'ai créee, il se met en dessous!

Voici le code que j'ai utilisé jusqu'à maintenant:

HTML:

<div id="footer">
<img src="footer.jpg" width="1950"/>
<ul class="footer-text">
  <li>Homepage</li>
<li>Characters</li>
<li>World</li>
<li>Titans</li>
<li>About US</li>
<li>Terms And Condition</li>
</ul>
</div>

CSS

#footer {
position:fixed;
bottom:0;
left:0;
box-sizing: border-box;
text-align: center;
}
.footer-text li{
  text-align: center;
   left: 500px;
    top: 31px;
    margin-right: 100px;
    margin-bottom: 500px;
    padding-bottom: 500px;bhghg
    font-size: 30px;
    color:Black;
}

Voici ce que j'ai (les flèches indique l'emplacement où je voudrais que ma liste soit):

Si quelqu'un peut m'éclairer sur le sujet ça serait sympa :)

Merci

Pitet · Answer

Salut,

Une solution possible est de définir ton image en tant que background (image de fond) du bloc #footer à la place d'utiliser une balise img.

Par exemple :

<div id="footer">
  <ul class="footer-text">
    <li>Homepage</li>
    <li>Characters</li>
    <li>World</li>
    <li>Titans</li>
    <li>About US</li>
    <li>Terms And Condition</li>
  </ul>
</div>

#footer {
    position:fixed;
    bottom:0;
    left:0;
    box-sizing: border-box;
    text-align: center;

    background-image: url('footer.jpg');
    background-size: cover;
    background-position: center;
}

.footer-text li{
    text-align: center;
    left: 500px;
    top: 31px;
    margin-right: 100px;
    margin-bottom: 500px;
    padding-bottom: 500px;
    font-size: 30px;
    color:Black;
}

Bonne journée

Mettre texte sur bannière footer?

1 réponse

Discussions similaires

Newsletters