Problem with static title and button

Question

Problem with static title and button

Navigation

#1 by (0 votes)

1

I'm having trouble with an H1 and a class link inside a div, which does not go up or down the way I want. I've already tried to solve this using margin-top and margin-bottom , but I did not get the effect I want. When I use these properties, collapse happens. They come in from an image, inserted via CSS below 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

asked by anonymous 09.02.2017 / 19:46

1 answer

Send objects larger than 5Gb using SDK Amazon S3 Tree Table PrimeFaces does not work by selecting a node by Java

score 0 · Accepted Answer

I've slightly altered your styles to make it easier to edit, I've applied padding: 250px; to class .hero-image and I've manipulated 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>