My Webpage Won't Retain it's Width When Narrowed

问题

and thanks for checking or helping me out with the issue! I'm currently trying to create a simple webpage for the http://www.code.org Computer Science week! I'm trying to create an image based background for my navigation bar at the top of the page.

This is what I have so far:

HTML5 CODE

    <!DOCTYPE html>
    <html>
    <head>
<title>Welcome</title>
<link rel="stylesheet" type="css/text" href="CSstylesheet.css"
    </head>
    <body>
<div>
    <img src="binarybanner.png" id="bannerimg" />
</div>
<div class="h3setup">
    <a href=""><h3 id="GI">General Information</h3></a>
    <a href=""><h3 id="BC">Benefits to Coding</h3></a>
    <a href=""><h3 id="CT">Coding Types</h3></a>
</div>
<div>
    <img src="siteMapButton.png" id="siteMapButton"/>
</div>
    </body>
    </html>

CSS3 CODE

    /* CSS STYLESHEET */

    h3{
display: inline;
    }
    div.h3setup{
left: 195px;
top: 145px;
position: absolute;
display: inline;
width: 100%;
    }
    div.h3setup a{
text-decoration: none;
    }
    #GI{
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
    }
    #GI:hover{
text-shadow: 3px 3px 3px #99FF66;
    }
    #BC{
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
    }
    #BC:hover{
text-shadow: 3px 3px 3px #99FF66;
    }
    #CT{
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
    }
    #CT:hover{
text-shadow: 3px 3px 3px #99FF66;
    }
    #bannerimg{
height: 200px;
width: 100%;
display: inline;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
    }
    #siteMapButton{
height: 35px;
width: 35px;
float: right;
margin-right: 1px;
    }

What I'm getting is the correct layout when the webpage is maximized, but when I resize the page to half size, Chrome tries to adjust the image as well as the rest of the elements to the set percentage. I understand that its due to the percentage being used, but I'm concerned about other computers bigger than the one I'm currently developing the webpage on not being able to correctly view it due to a set pixel size. How can I keep the webpage its maximized width for resized windows? I'd like the resized webpage to have a horizontal navigation bar.

回答1:

What you need is a wrapper div that holds all of the elements in your page and add a min-width. That will prevent the page from getting too small when the window is minimized.

<div id="wrap">
<div class="h3setup">
<ul>
    <li><a href=""><h3 id="GI">General Information</h3></a></li>
    <li><a href=""><h3 id="BC">Benefits to Coding</h3></a></li>
    <li> <a href=""><h3 id="CT">Coding Types</h3></a></li>
</div>
<div>
<img src="siteMapButton.png" id="siteMapButton"/>
</div>
</div<!--end wrap-->

#wrap{
width:100%;
min-width:900px;
margin:0 auto;
}

As far as the rest of your page is concerned, instead of having an img element as your background image, you should use background:url('img.png'); to have the image as a background in that particular element.

For example:

  .h3setup{
background:url('img.png') no-repeat;
height:200px;
width: 100%;
}

SEE DEMO HERE

来源：https://stackoverflow.com/questions/20231086/my-webpage-wont-retain-its-width-when-narrowed

标签

html

css

html5

width

stretch