mardi 21 avril 2015

Can element ignore height values of properties before it?

I have 2 elements sharing the same class [.cta]. The CTA inside of [casino-box] looks great, however the one inside of [header-box] is accounting for the 165px of space taken up by [top-nav-bar] and [nav-bar].

How can I get the top CTA to ignore the added spacing of those two nav bars, without having to split the css code for the CTAs?

Link to CodePen

.cta
  max-width: 600px
  margin: 0 auto
  text-align: center
  position: relative
  top: 50%
  margin-top: -80px

.cta h1
  color: #fff
  weight: 500
  text-shadow: 0px 0px 4px black

.cta .button
  color: #fff
  border-color: #fff
  font-weight: bold
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7)
  text-shadow: 0px 0px 4px black

  &:hover
    color: #90281F
    background: #fff
    text-shadow: none

.cta hr
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7)

Aucun commentaire:

Enregistrer un commentaire