Photoshop Question posted in
The official user guide can be found here.

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

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

Tags:

6

Answers


  1. 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.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

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

    2) Use flexbox.

    3) Perfect Full Page Background Image

    Login or Signup to reply.
  4. 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.
  5. 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.
  6. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search