我的网页在缩小时不会保留它的宽度 [英] My Webpage Won't Retain it's Width When Narrowed
问题描述
并感谢检查或帮助我的问题！我目前正在尝试为 http://www.code.org 计算机科学周创建一个简单的网页！我正在尝试为页面顶部的导航栏创建基于图像的背景。
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.
这是我到目前为止：
HTML5 CODE
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
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;
}
我得到的是网页最大化时的正确布局，当我将页面调整为一半大小时，Chrome会尝试将图片以及其他元素调整为设置的百分比。我知道，由于使用的百分比，但我担心其他计算机比我目前正在开发的网页，由于设置像素大小无法正确查看。如何保持网页的最大化宽度调整大小的窗口？
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.
推荐答案
您需要的是一个包装器 div ，其中包含您网页中的所有元素，并添加 min-width 。这将防止在窗口最小化时页面过小。
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;
}
至于页面的其余部分， code> img 元素作为背景图片，您应该使用 background：url（'img.png'）; 作为该特定元素的背景。
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.
例如：
.h3setup{
background:url('img.png') no-repeat;
height:200px;
width: 100%;
}
这篇关于我的网页在缩小时不会保留它的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
