Getting rid of this margin and vertical height and alignment - Photoshop

Uzer
February 3, 2016
101 views
2 votes
6 Answers

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:

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

Answers

- MikeDonkers
- February 3, 2016 at 9:26 am
- 0 votes
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!
Login or Signup to reply.

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>

- RadosawMiernik
- February 3, 2016 at 9:26 am
- 0 votes
0
1) That whitespace is just margin-top of h1.

2) Use flexbox.

3) Perfect Full Page Background Image

Login or Signup to reply.

- AndrewHendrie
- February 3, 2016 at 9:28 am
- 0 votes
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.
Login or Signup to reply.

- PeterWilson
- February 3, 2016 at 9:51 am
- 0 votes
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
Login or Signup to reply.

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

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Getting rid of this margin and vertical height and alignment – Photoshop

Answers