CODEWITHSUNDEEP
htmlcsscss-position
PoorProgrammer
PoorProgrammer

Reputation: 111

One div taking over another one when zooming

When I'm zooming out the page images at the bottom are taking over my other image (background) at the top. When I'm zooming in there's blank space on the right side. And my footer is missing as well. How to fix this? https://jsfiddle.net/egdeLy1c/

body {
    margin: 0px;
}

/* Properties for background image here */
#wrapper {
    width: 100%;
    height: 100%;
    background-image: url("http://citywallpaperhd.com/download/71-huge-impressive-city-at-night.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


#logo {
    padding-top: 30px;
    padding-left: 25px;
    float: left;
}


#navigation {
    width: 100%;
    height: 90px;
    background-color: #000000;
}

#navigation ul {
    margin: 0px;
    padding: 30px;
    text-align: center;
    list-style-type: none;
}

#navigation li {
    width: 15%;
    font-size: 18px;
    padding: 0px 0px;
    display: inline-block;
    color: #ffffff;
}

#navigation a {
    padding: 5px; 
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
}

#navigation a.current {
    color: #000000;
    background-color: #ffffff;
    border-radius: 8px; 
}

#navigation a:hover {
    color: #ff9900;
}


#banner-text {
    width: 1200px;
    margin: 250px 50px; 
    font-size: 42px;
    color: #ffffff;
}

#banner-text p {
    width: 800px; 
    font-size: 24px;
    line-height: 24px;
}


#main-content img, #main-content-2 img{
  width: 50%;
  height: auto;
  float: left;
}


#footer {
    width: 100%;
    height: 200px;
    background-color: #000000;
}
    <body>
    <div id="wrapper">
        <nav id="navigation">

            <img id="logo" src="img/logo.png"/>

            <ul>
                <li><a class="current" href="index.html">Home</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Text</a></li>
            </ul>
        </nav>

        <div id="banner-text">
            <h1>h1 text</h1>
            <p>
                text text text text text text text text text text text text text text text text text text 
                text text text text text text text text text text text text text text text text text text 
            </p>
        </div>
    </div>

    <div id="main-content">
        <img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/>
   </div>
   
   <div id="main-content-2">
     <img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/>
   </div>

    <div id="footer">

    </div>

    </body>

Upvotes: 0

Views: 40

Answers (1)

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

Hey :) I can't reproduce the zoom in out issue. But i brought your footer back.

If you are floating elements you need to add a Clearfix to them. Here you can read more about the clear fix and floats

https://www.w3schools.com/css/css_float.asp

And for the header-img don't add %-height if you want it always the same height. Go with a fixed height with pixel... For example 750px.

body {
    margin: 0px;
}

/*Clearfix*/

   .clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Properties for background image here */
#wrapper {
    width: 100%;
    height: 750px;
    background-image: url("http://citywallpaperhd.com/download/71-huge-impressive-city-at-night.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


#logo {
    padding-top: 30px;
    padding-left: 25px;
    float: left;
}


#navigation {
    width: 100%;
    height: 90px;
    background-color: #000000;
}

#navigation ul {
    margin: 0px;
    padding: 30px;
    text-align: center;
    list-style-type: none;
}

#navigation li {
    width: 15%;
    font-size: 18px;
    padding: 0px 0px;
    display: inline-block;
    color: #ffffff;
}

#navigation a {
    padding: 5px; 
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
}

#navigation a.current {
    color: #000000;
    background-color: #ffffff;
    border-radius: 8px; 
}

#navigation a:hover {
    color: #ff9900;
}


#banner-text {
    width: 1200px;
    margin: 250px 50px; 
    font-size: 42px;
    color: #ffffff;
}

#banner-text p {
    width: 800px; 
    font-size: 24px;
    line-height: 24px;
}


#main-content img, #main-content-2 img{
  width: 50%;
  height: auto;
  float: left;
}


#footer {
    width: 100%;
    height: 200px;
    background-color: #000000;
}
<body>
    <div id="wrapper">
        <nav id="navigation">

            <img id="logo" src="img/logo.png"/>

            <ul>
                <li><a class="current" href="index.html">Home</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Text</a></li>
            </ul>
        </nav>

        <div id="banner-text">
            <h1>h1 text</h1>
            <p>
                text text text text text text text text text text text text text text text text text text 
                text text text text text text text text text text text text text text text text text text 
            </p>
        </div>
    </div>

    <div id="main-content" class="clearfix">
        <img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/>
   </div>
   
   <div id="main-content-2" class="clearfix">
     <img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/>
   </div>

    <div id="footer">

    </div>

    </body>

Upvotes: 1

Related Questions