如何在调整浏览器窗口大小时使导航栏保持其原始位置?

时间:2016-08-29 15:33:16

标签: html css browser resize sticky

我是网络开发和堆栈溢出的新手。我是第一次建立一个网站,并面对导航栏的一些问题,当浏览器窗口调整大小时,它正在改变它的位置。我提供下面的源代码。我希望导航栏坚持到右边而不管它是什么浏览器尺寸

body
{
	font-family:Arial, Helvetica, sans-serif ;
	font-size: 14;
	margin:0px;
	padding:0px;
	line-height:1.5em;
	color:black;
}
#header
{
	height:150px;
	width:100%;
	background-color:#ff0000;
}
.container
{
	width:90%;
	margin:auto;
	margin-top:15px;
	margin-bottom:15px;
}
#image
{
	display:block;
	width:100%;
	height:350px;
}
.head2
{
	width:50%;
	margin:auto;
	margin-top:25px;
	margin-bottom:25px;
	text-align:center;
	color:#6F0A21;
}
.sidebar
{
	width:250px;
	height:150px;
	padding:5px;
	margin-right:10px;
	margin-bottom:10px;
	background-color:lightgray;
	float:left;
	clear:left;
}
.main_content
{
	margin-left:265px;
	margin-bottom:10px;
	border:1px solid orange;
	height:300px;
}
#footer
{
	width:100%;
	height:150px;
	background-color:#ff0000;
	margin-top:10px;
	clear:both;
}
#header #logo
{
	position:relative;
	margin:0;
	top: 50%;
	transform: translateY(-50%);
	margin-left:5%;
}
#header #navbar
{
	list-style:none;
	position:relative;
	display:inline-block;
	float:right;
	top: 50%;
	transform: translateY(-50%);
	margin-right:5%;
	//min-width:643.891px;
}
#header #navbar li
{
	display:inline;
	margin-left:20px;
	margin-right:0px;
}
#header form
{
	display:inline;
	margin-right:0px;
}
#navbar a
{
	text-decoration:none;
	font-size:20px;
	color:white;
}
#searchbox
{
	height:18px;
	margin-bottom:1.5px;
	width:200px;
}
#submit_button
{
	height:25px;
}
<!DOCTYPE HTML>

<html>
	<head>
	<title>My Web Page</title>
	<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
	<meta charset="utf-8"/>
	<meta name="description" content="This website is developed by Soumik Banerjee"/>
	<meta name="keywords" content="Home, About, news, Contact"/>
	<link rel="stylesheet" href="webpage.css"/>
	</head>
	<body>
			<div id="header">
				<a href="index.html">
					<img id="logo" src=logo.png alt="logo"/>
				</a>
				<ul id="navbar">
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contents</a></li>
					<li><a href="#">Contact Us</a></li>
					<li id="form">
						<form action="">
							<input id="searchbox" type="text" name="Serching" placeholder="Search"/>
							<input id="submit_button" type="submit" value="Go"/>
						</form>
					</li>
				</ul>
			</div>
			<div class="container">
				<img id="image" src="garden.jpg" alt="garden.jpg"/>
				<h2 class="head2">Welcome to My Website</h2>
				<div class="sidebar">
					
				</div>
				<div class="sidebar">
					
				</div>
				<div class="sidebar">
					
				</div>
				<div class="sidebar">
					
				</div>
				<div class="main_content">
					
				</div>
				<div class="main_content">
					
				</div>
			</div>
			<div id="footer">
				
			</div>
	</body>
</html>
	

(我不想让导航栏固定)。请帮助。

1 个答案:

答案 0 :(得分:0)

就个人而言,我使用w3-css创建一个响应式网站。请参阅this

这很酷很容易。 This网站是使用w3-css创建的(我的官方网站)

如果您不熟悉网络开发,我建议使用w3-css。