我的网页在缩小时不会保留宽度

感谢您检查或帮助我解决问题！我目前正在努力为http://www.code.org计算机科学周创建一个简单的网页！我正在尝试为页面顶部的导航栏创建基于图像的背景。我的网页在缩小时不会保留宽度

这是我到目前为止有：

HTML5代码

<!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代码

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

什么，我得到的是网页时，最大化正确的布局，但当我将页面大小调整为一半时，Chrome会尝试将图像以及其他元素调整为设定的百分比。我知道它是由于使用的百分比所致，但我担心其他计算机比我目前正在开发网页时由于设置的像素大小无法正确查看而导致的其他计算机更大。我怎样才能保持网页的最大宽度调整大小的窗口？我希望调整大小的网页有一个水平导航栏。

来源

2013-11-27 Zulfe

你需要的是一个包装div，它包含页面中的所有元素并添加一个min-width。当窗口最小化时，这将防止页面变得太小。

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

至于你的页面的其余部分而言，而不是有一个img元素作为背景图像，你应该使用background:url('img.png');有形象在那个特定元素的背景。

例如：

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

SEE DEMO HERE

来源

2013-11-27 02:14:06

我的网页在缩小时不会保留宽度

回答

相关问题