3. Jumbotron - Change the position to relative


#1

Hi,

I am having trouble with changing the CSS layout at 3. Jumbotron to change the position to relative and the size to 100px inside the Div (I don't like Div's I have been stuck on almost all of them). Please help.


CSS Layout ; change the li elements from being block elements to inline elements
#2

First you have to select the container div that is inside the jumbotron div. There is an example in that exercise that shows you, it looks like this:

.jumbotron .container {

}

I don't see that CSS selector in the code that you posted.

Once you have that then you have to add the position and top properties.


#3

It's asking that you add the below:

.jumbotron .container {
  ...
}

in this case it wants to see the position property set to "relative" and top to "100px"

I hope this helps!


#4

Thanks Albionsrefuge

I have added as the example shows but still no luck.......


#5

You haven't left a space between your two class names.


#6

Thank you.

I have tried expanding the gap and still no luck. Any other suggestions?

I have included my Index image too in case for some reason I am missing something from there.....


#7

I still don't see a space between your two class names:


#8

Thank you for the speedy response.

Sorry i mis-understood where the gap was to go. I have now tried two different alternatives though looking at the image you sent me back and neither of these worked either.


#9

Here is a better answer :smile:

You need to change:

.jumbotron.container

to:

.jumbotron .container


#10

Sorry, I do appreciate the help but it is still not working for me :frowning:


#11

Here is what you have now:

.jumbotron. container

Here is what you should have:

.jumbotron .container

#12

I feel like I am doing everything right but it just isn't working.

Is there somewhere on here I can view another one that did submit correctly so I can compare?

Thanks


#13

It looks perfect now. If I had this problem, I would try the Reset Code button and type that rule in again. That clears out any clutter that may have built up while we were poking at it.

If that still doesn't work. copy/paste your code in here so I can test it, I can't always spot a problem by looking at the screen shot.


#14

Thanks albionsrefuge, still not working so please see code.

.nav li {
    display: inline; 
.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.jumbotron {
  background-image:url('http://goo.gl/04j7Nn');
  height: 500px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.jumboton .container {
    position: relative; 
    top: 100px;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

#15

Ah ha! You are missing one of these: }

I couldn't see it in your earlier screenshot.


#16

Wow something so simple! I see it now, have fixed it and it has worked.

Thank you for your patience.


#17

A post was split to a new topic: 3. Jumbotron - Change the position to relative


#18

A post was split to a new topic: 3. Jumbotron - Change the position to relative


#19

The same as described above happened to me. The code was ok, but it didn't work. I tried to reset code and retype again as albionsrefuge suggested, and problem solved :). Thanks a lot for the tip. It was making me nuts!


#20

A post was split to a new topic: 3. Jumbotron - Change the position to relative