Problem with static title and button

Asked

Viewed 28 times

1

I’m having trouble with an H1 and a link with class inside a div, which do not go up or down the way I want. I’ve tried to solve this using margin-top and margin-bottom, but I didn’t get the effect I crave. When I use these properties, it collapses. They stay within of an image, inserted via CSS Follows code:

.container {
    width: 980px;
    margin: 0 auto;
}

.hero-image {
    background: url('http://i.imgur.com/uCRNEAF.jpg');
    background-repeat: no-repeat;
    padding: 100px;
    text-align: center;
    margin-top: 1.2em;
}

.hero-image h1 {
    font-size: 28px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5em;
}

/* Button */
.botao {
   font-family: 'Oswald', sans-serif;
   color: #ffffff;
   text-decoration: none;
   padding: 5px 10px;
   background-color: #1989ca;
   font-size: 0.9em;
   border-radius: 4px;
}
<div class="container">
  <div class="hero-image">
  <h1>ESTE É MEU TÍTULO!</h1>
<a href="#botao" class="botao" title="Botão">HISTÓRIA</a>
    </div>
</div>

html5 css3

  • What behavior are you looking for?

  • Opa Thiago. It is the central alignment of this title of the H1 tag and the button below, but with a spacing between them. What I’m trying to do is put them both higher.

1 answer

0


I changed your styles a little to make it easier to edit, I applied a padding: 250px; in class .hero-image and manipulated the margin-top and margin-bottom of H1 freely: 

.container {
    width: 980px;
    margin: 0 auto;
}

.hero-image {
    background: url('http://i.imgur.com/uCRNEAF.jpg');
    padding: 250px;
    text-align: center;
}

.hero-image h1 {
    font-size: 28px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: -100px;
    margin-bottom: 25px;
}

/* Button */
.botao {
   font-family: 'Oswald', sans-serif;
   color: #ffffff;
   text-decoration: none;
   padding: 5px 10px;
   background-color: #1989ca;
   font-size: 0.9em;
   border-radius: 4px;
}
<div class="container">
  <div class="hero-image">
  <h1>ESTE É MEU TÍTULO!</h1>
<a href="#botao" class="botao" title="Botão">HISTÓRIA</a>
    </div>
</div>

  • Thanks for the help, Thiago! Big hug.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.