3.Jumbotron/ task 03


#1

I do not understand what's wrong here? The rule does not work ... :confused:
I get: Oops, try again. Set top to 100px
Please tell me what is wrong?

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

#2

I don't know if this still can help you, but I wrote this and worked:

 .jumbotron .container {
    position: relative;
}

THEN

    div {
top: 100px;
}

#3

Your version of the tried - does not work ?? But this is not quite correct, since DIV tags can be much on the page


#4

Thank you for trying to help, but the problem still remains :disappointed:


#5

It's just some kind of bug. It should be all right ?!


#6

Could you show me the rest of your CSS file? The problem might be a missing bracket, colon or semicolon.


#7

This could wildly alter the finished web page. It will move EVERY div on the page, the plan is to only move the container that is inside the jumbotron.


#8

make sure there is space in between the jumbotron and the dot(.) next to container
This one will work
.jumbotron .container{
position:relative;
top:100px;
}


#10

Select just the container in the jumbotron div, like this:

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

#11

I can't believe, all it took was to remove the space between .container and "{"....

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

but I still don't get what about DIV


#12

That space between .container and { should not affect anything.

If you select div as you have done there, you are selecting EVERY div in the whole page and moving it down 100 px.


#13

I know, i removed div tag that's why i don't get why this still good work...


#14

If you copy/paste all of your CSS code -- the whole thing, in here, I'll have a look.


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

.nav li {
      display: inline;
}

.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;
}

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

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

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

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

#16

@violeta001 - your CSS code works perfectly for me!


#17

whaat happended? for me, in some way, started to work xD Thanks, for the look. I wonder if vsepa also has been able to fix it


#18

yes, I'd realised that sometimes it works not good at all....


#19

Thank you! Really, it was the spaces: position:relative;


#20

For me this doesn t work??? I dont know why?


#21

Please copy/paste (not a screen shot) your entire main.css file in here so I can test it.