0

I'm trying to make a website for me but i'm having some problems.

This is what i'm trying to achieve:

Photoshop image

And this is what i have so far

Actual image

Here are the problems i'm currently facing:

  1. I can't get rid of the white space below the navigation bar, i removed the margin and padding of both the navigation and the rest of the window but it doesn't work.

  2. I can't properly align the text vertically in the middle like in the first image. I tried using line height and padding but when i resize the browser window vertically the text doesn't respond to the size. I want it to stay in the middle no matter what size the browser window is.

  3. What's the best way of getting the background image to fit the size of the window? currently i'm using

    width:100%; height:100vh; background-image:url("Images/background.jpg"); background-size:100% 100%;

But i feel like it's not the best way to do this

Here is my document so far:

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #272727;
  border-top: 2px solid #5e20d1;
  text-align: center;
}
#navigation a {
  display: inline-block;
  color: #747272;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0;
  text-decoration: none;
}
#navigation li {
  display: inline;
  margin: auto;
}
#navigation a:hover {
  color: white;
}
#jumbo {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 90vh;
  background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
  background-size: 100% 100%;
}
#jumbo li {
  display: inline;
  margin: 1%;
  color: white;
  font-size: 20px;
}
#jumbo h1 {
  color: white;
  font-size: 30px;
}
<div id="navigation">
  <ul>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Skills</a>
    </li>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<div id="jumbo">
  <h1>Responsive Front-end Developer</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
    <li>JQUERY</li>
    <li>WORDPRESS</li>
  </ul>
</div>

I would really appreciate if someone can help me fix all these issues

Uzer
  • 187
  • 2
  • 3
  • 15

6 Answers6

1

1) You have to add padding-top: 1px; to #jumbo or remove the margin-top from your h1.

2) Use a wrapper to align you text. Then apply top:50%; transform:translate(0, -50%);to it

3) #jumbo { background-size: cover; }

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #272727;
  border-top: 2px solid #5e20d1;
  text-align: center;
}
#navigation a {
  display: inline-block;
  color: #747272;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0;
  text-decoration: none;
}
#navigation li {
  display: inline;
  margin: auto;
}
#navigation a:hover {
  color: white;
}
#jumbo {
 text-align:center;
  margin: 0;
  padding: 1px 0 0 0;
  width: 100%;
  height: 90vh;
  background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
  background-size: cover;
}
#jumbo li {
  display: inline;
  margin: 1%;
  color: white;
  font-size: 20px;
}
#jumbo h1 {
  margin-top:0;
  color: white;
  font-size: 30px;
  /*background-color:rgba(0,0,0,.5);*/
}
.teaser {
 position:relative;
 /*background-color:rgba(0,0,0,.5);*/
 top:50%;
 transform:translate(0, -50%);
}
<div id="navigation">
  <ul>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Skills</a>
    </li>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<div id="jumbo">
<div class="teaser">
<h1>Responsive Front-end Developer</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
    <li>JQUERY</li>
    <li>WORDPRESS</li>
  </ul>
</div>
  
</div>
Roland Krinner
  • 421
  • 2
  • 10
  • Thank you very much, this fixes almost all of my issues except i have to set the height of #jumbo to like 93vh to fit the screen and i get a little scroll bar when i resize the page vertically Is there any better way to do this? – Uzer Feb 03 '16 at 08:52
  • Nevermind, i fixed it! I made the navigation bar a position of fixed, a higher z index than the jumbo and a width of 100% That fixed all my issues, thank you very much! – Uzer Feb 03 '16 at 08:59
  • In addition here is a very good article about centering text vertically: https://css-tricks.com/centering-css-complete-guide/ maybe you also want to have a look at this resource: http://vanseodesign.com/css/vertical-centering/ – Roland Krinner Feb 03 '16 at 09:45
0

To remove the unwanted margins and paddings you can simply add the following at the top of your CSS:

* {
    margin:0;
    padding:0;
}

This will remove the margin from ALL elements, unless otherwise declared beneath the * selector.

JsFiddle example for the * selector

Alternatively you can add margin-top:0; to the #jumbo h1 to remove only the whitespace between your header and content.

JsFiddle example for the margin-top

Hope this helps!

Mike Donkers
  • 3,589
  • 2
  • 21
  • 34
0

1) That whitespace is just margin-top of h1.

2) Use flexbox.

3) Perfect Full Page Background Image

Radosław Miernik
  • 4,004
  • 8
  • 33
  • 36
  • Thank you very much :) I'm gonna read about flexbox but 3rd is not quite what i want, i want to be able to scroll down and have each of these "boxes" be the size of the screen https://i.gyazo.com/85384369cd51d55ab883de1cbd594a3c.png – Uzer Feb 03 '16 at 08:43
  • There's only one "box" in your example, but ok. In your case I would go with flexbox - flex wrapper with navigation (fixed height) and content (it will fill the rest of screen) and every item in content is one "box" with `width: 100%; height: 100%` to fill the screen. – Radosław Miernik Feb 03 '16 at 08:48
0

1. Add this to get rid of the white space (it's coming from the h1 tag). 

* {
  margin:0;
  padding:0;
}

You can see this by right clicking on the h1 tag and clicking inspect.

2. Centering text inside a div

See this answer for details.

3. Perfect full page background images

CSS Tricks has a great post about this.

Community
  • 1
  • 1
Andrew Hendrie
  • 6,205
  • 4
  • 40
  • 71
0

Here is the answer for your problems as you mentioned 1- H1 tag by default has margin top and down so the margin-top of H1 tag causes the issue to get rid of it you have to remove it

#jumbo h1 {
   color: white;
   font-size: 30px;
   margin-top: 0;
   padding-top: 20px;

}

2- you have to wrap the content of the jumbtron inside new container and then give the jumbtron display table and the wrapper display table-cell and vertical align middle;

 <div id="jumbo">
 <div class="wrapper">
 <h1>Responsive Front-end Developer</h1>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JAVASCRIPT</li>
 <li>JQUERY</li>
 <li>WORDPRESS</li>
</ul>
</div>

and the CSS

#jumbo {
 display:table;
 }
#jumbo .wrapper{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

here is a complete article on how to align vertically 3- the best way is 

 background-size: cover;
 height: 100%;

100vh is not common in all browsers

Peter Wilson
  • 4,150
  • 3
  • 35
  • 62
  • What's a alternative to 100vh? height:100%; doesn't make the background fit the entire screen Everything else is as it should be now :) Thank you :) – Uzer Feb 03 '16 at 09:06
  • to use 100%; the parents should have 100% as well ,I mean you have to state html,body{height:100%} but you will have an issue which is the top navigation has a part of this height so you can fix it by #jubmo{height:calc(100% - 50px)} where 50px is the height of the top nav – Peter Wilson Feb 03 '16 at 09:11
0
  1. Your body may be having some padding/margin. So make it zero likebody{margin:0; padding:0} and apply #jumbo h1{margin: 0;}

2.apply #jumbo{text-align:center;position: relative;}. then add an extra div like this <div class='v-block'><h1>Responsive Front-end Developer</h1><ul><li>HTML</li><li>CSS</li><li>JAVASCRIPT</li><li>JQUERY</li><li>WORDPRESS</li></ul></div> and add the css like .v-block{height: 80px;position: absolute;width: 100%;top: 50%;margin-top: -40px;}

  1. background-size: cover; this will avoid stretching of the background image.

the final code is below..

body{
                margin: 0;
                padding: 0;
            }
            #navigation ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #272727;
                border-top: 2px solid #5e20d1;
                text-align: center;
            }
            #navigation a {
                display: inline-block;
                color: #747272;
                text-align: center;
                padding-top: 15px;
                padding-bottom: 15px;
                padding-right: 15px;
                padding-left: 15px;
                margin: 0;
                text-decoration: none;
            }
            #navigation li {
                display: inline;
                margin: auto;
            }
            #navigation a:hover {
                color: white;
            }
            #jumbo {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 90vh;
                background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
                background-size: 100% 100%;
                text-align: center;
                position: relative;
                background-size: cover;
            }
            #jumbo li {
                display: inline;
                margin: 1%;
                color: white;
                font-size: 20px;
            }
            #jumbo h1 {
                color: white;
                font-size: 30px;
                margin: 0;
            }
            .v-block{
                height: 80px;
                position: absolute;
                width: 100%;
                top: 50%;
                margin-top: -40px;
            }
<div id="navigation">
            <ul>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Skills</a>
                </li>
                <li><a href="#">Projects</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </div>

        <div id="jumbo">
            <div class='v-block'>
                <h1>Responsive Front-end Developer</h1>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JAVASCRIPT</li>
                    <li>JQUERY</li>
                    <li>WORDPRESS</li>
                </ul>
            </div>
        </div>
Pons Purushothaman
  • 2,225
  • 1
  • 14
  • 23
  • if you want ".v-block" with dynamic height, you can use simple javascript/jquery to apply the margin-top value. the margin-top should be the half of the height of that div. – Pons Purushothaman Feb 03 '16 at 08:54