CODEWITHSUNDEEP
htmlcssimagenavremoving-whitespace
Sean Anderson
Sean Anderson

Reputation: 5

How to remove the white gap between the background image and the navigation bar

I am by no means an expert in HTML or CSS. I am fairly new, and have little experience. I have come across and issue and I am not sure how to fix it. As you can see from the JSFiddle (linked below) there is a white gab between the image and the navigation bar. The image is a background-image created in CSS. I would like to remove the gap so that the image is flush with the navigation bar.

I have tried changed the values for the margin and padding of the #headerimage div as well as the #nav div. I know if I make the margin-top a negative value, it can fix the problem, but that is a very clunky solution because I would constantly have to change that value if I increase font size or anything like that. I have also search stackoverflow for similar problems, but none of them fixed my problem.

I also realize that I probably could have done many things differently in terms of how I coded some things, again I am new. The following code is the HTML code, the next block is the CSS code. Sorry if I did not explain something well, if you require more information, I will try my best to elaborate further on the issue. Thank you guys so much for taking the time to look at my issue. All the best. If you notice anything else, whether it a possible error, or just not a good solution for something, I would love to here about it.

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="about.css">
        <title>Sean Anderson</title>

    </head>
    <body>

        <div id="container">

            <div id="nav">

                <ul>

                    <li><a href="about.html">About</a></li>
                    <li><a href="achievements.html">Achievements</a></li>
                    <li><a href="school.html">Academics</a></li>
                    <li><a href="contact.html">Contact</a></li>

                </ul>

            </div>
            <div id="headerimage">

                <h1>SEAN ANDERSON</h1>


            </div>
            <div id="whoami">

                <h2>WHO AM I?</h2>
                <ul>

                    <li>I am a student at SFS High School</li>
                    <li>I am an aspiring programmer</li>
                    <li>Comics, books, programming, casual gaming</li>
                    <li>4.0 GPA</li>
                    <li>Star Wars is my life</li>

                </ul>

                <img src="testbackground.jpg">

            </div>
            <div id="skills">

                <h2>SKILLS</h2>

                <ul>

                    <li>Familiar with Java, HTML, and CSS</li>
                    <li>Skilled with Microsoft Office Suite 2013</li>
                    <li>Skilled in math, science, and English</li>
                    <li>Awesome</li>

                </ul>

            </div>
            <div id="footer">

                <p>Copyright &copy; 2015 Sean Anderson</p>

            </div>

        </div>

    </body>

</html>

body {

    font-family: Helvetica, sans-serif;
    width: 100%;
    background-color: white;
    margin-left: 0px;
    margin-top: 0px;

}


#container {

    width: 100%;
    background-color: white;
    margin-top: 0px;

}

#nav {

    background-color: black;
    margin-bottom: 0px;

}

#nav ul {

    list-style-type: none;
    padding: 30px 0px 30px 0px;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    min-width: 1920px;


}

#nav li {

    display: inline;
    text-align: center;

}

#nav a {

    text-decoration: none;
    text-align: center;
    color: white;
    font-size: 30px;
    padding: 30px 50px 30px 50px;

}

#nav a:hover {

    background-color: white;
    color: black;

}

#headerimage {

    background-image: url("testbackground.jpg");
    background-repeat: repeat;
    height: 1000px;
    width: 100%;
    margin-top: 0px auto;
    display: block;
    clear: both;

}

#headerimage h1 {

    text-align: center;
    vertical-align: middle;
    padding-top: 150px;

}

Here is the JSFiddle: http://jsfiddle.net/Seanathon98/3nw5wj1d/ (The image takes up the whole width on my monitor, not sure why is doesn't appear that way, as I did use width: 100%.

Upvotes: 0

Views: 5932

Answers (1)

Rhapsody
Rhapsody

Reputation: 6077

Set the margin and padding of the H1 element to 0. 

h1 { 
    margin: 0;
    padding: 0;
}

You can center the h1 element by setting its position to be absolute and use padding & margin to position it correctly;

#headerimage h1 {
  position: absolute;
  margin: -20px 0 0 0;
  padding: 50% 0 0 0;
}

Upvotes: 1

Related Questions