Position button directly above another one


#1

Basically what I cant do is is stack 3 buttons on top of another 3 buttons.

this is the HTML

    <div class="supporting">
      <a href="https://www.codecademy.com" class="supporting-nav"><h2>Learn More</h2></a>  
      <a href="https://www.codecademy.com" class="supporting-nav"><h2>Learn More</h2></a>
      <a href="https://www.codecademy.com" class="supporting-nav"><h2>Learn More</h2></a>

this is the CSS

.supporting-nav {
  border: 1px solid #333333;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 600;
  color: white;
  margin-left: 65px;

the buttons I am trying to stack on the css is this

col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}

#2

i put your code in a bin, more code is required, the problem can't be replicated

i assume you want design, develop and deploy buttons to overlap the learn more buttons?


#3

it wont save the CSS for some reason

html, body {
margin: 0;
padding: 0;
}

.header {
background-color: #333333;
}

.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}

.jumbotron {
height: 800px;
background: url("http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg") no-repeat 50% 50% fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}

.nav {
margin: 0;
padding: 20px 0;
}

.nav li {
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
display: inline;
}

.main {
position: relative;
top: 180px;
text-align: center;
}

.main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 80px;
text-transform: uppercase;
}

.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}

.btn-default {

font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
}

.supporting {
padding-top: 80px;
padding-bottom: 100px;
}

.supporting-nav {
border: 1px solid #333333;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.3px;
font-weight: 600;
color: white;

}

.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
}

.supporting img {
height: 32px;
}

.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}

.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 50px;
margin-bottom: 40px;
}

.clearfix {
clear: both;
}

.footer {
background-color: #333;
color: #fff;
padding: 30px 0;
}

.footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}

@media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}

.supporting .col {
width: 100%;
}
}


#4

if you want to achieve this, i should start by laying out the html correctly:

<div class="col">
          <a href="https://www.codecademy.com" class="supporting-nav"><h2>Learn More</h2></a>
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg">
          <h2>Design</h2>
          <p>Make your projects look great and interact beautifully.</p>
          
        </div>

add the anchor element to the col, this way, you make it yourself a lot easier


#5

oh true.

thank you very much appreciated e-hug


#6

of course, if needs be you can make it work it work with css but that is like 100x more complicated if your html layout is not correct. Can you manage it from here?


#7

I will try, should be able to. Or I just redo the positioning unit again to refresh thank you ^^


#8

good luck! :slight_smile:

with html properly structured, you should be able :slight_smile:

If for some reason you do not manage, post an updated version of your code in this topic and i will help you further


#9

OMG did it work? :smiley: I still need to refresh knowledge of position and float and clear I keep forgetting those topics


#10

did what work? Could you see what i was doing?

i wrapped the image, h2 and so on in a div and simply used a negative margin-top which seems to work fine:

i also remove the break, you don't need it


#11

I was trying to line up the learn more over the button img and p
I will try remove the /br and add negative margin-top


#12

i also provided you with a bin where i did one for you.

you can also try if you can do it without the additional div


#13

sorry for being a noob but I clicked on your bin it says "you js.auto session has crashed"

sorry ><

If hassle I will relearn the entire subject my bad


#14

works fine:

try again?


#15

keeps loading like this


#16

that is fine, right? the left button is now good? not?

you do have the tabs in the top to open html and css files?


#17

oh apologies I explained it poorly.

The learn more are the new buttons they are meant to sit above the img. It was part of the exercise although your one looks a lot better and I saving it for reference :D.

I redoing the course now I think this bit to far ahead for me. I appreciate help I saving your code for reference :smiley:


#18

which project is this? I can have a look.

You could change the html nesting or you could simply move .supporting up with a negative margin


#19

it was the build your own website project first exercise. Its ok thought I think I should redo the HTML CSS Basics courses to refresh everything. (:


#20

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.