{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 不美不萌又怎样 的问题《My Webpage Won't Retain it's Width When Na》','https://www.manongdao.com/q-1035898.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
What you need is a wrapper
divthat holds all of the elements in your page and add amin-width. That will prevent the page from getting too small when the window is minimized.As far as the rest of your page is concerned, instead of having an
imgelement as your background image, you should usebackground:url('img.png');to have the image as a background in that particular element.For example:
SEE DEMO HERE