CODEWITHSUNDEEP
cssnavbar
Tim Fox
Tim Fox

Reputation: 31

[CSS]How to make it move to the top?

I'm sorry, i just a newbie designer. I want to ask something, how to make the background color to move to the top? It still split by white space(the top of the background color)

<!DOCTYPE html>
<html>
	<head>
		<style>
			body{
				margin: 0px;
				padding: 0px;
			}
			#navbar{
				position: relative;
				background: #004f6b;
				height: 100px;
				color: white;
			}
			li{
				list-style-type:none;
				display:inline;
			}
			#navbar > ul > li#title{
			position: absolute;
			left: 5px;
			}
			#navbar > ul > li#homeicon{
			position: absolute;
			left: 610px;
			}
			#navbar > ul > li#search{
			position: absolute;
			right: 300px;
			}
			#navbar > ul > li#profile{
			position: absolute;
			right: 5px;
			}
		</style>
	</head>
	<body>
		<div id="navbar">
			<ul>
				<li id="title">Title</li>
				<li id="homeicon">Icon</li>
				<li id="search"><input type="text" style="width:210%"/></li>
				<li id="profile">Follow Us!</li>
			</ul>
		</div>
	</body>
</html>

Screenshot : http://i58.tinypic.com/rhr8xt.png Sorry for my bad english and sorry for my bad skill... Thanks for your help...

Upvotes: 0

Views: 50

Answers (2)

Anirudh Modi
Anirudh Modi

Reputation: 1829

Its better to use 

*
{
padding:0px;
margin:0px;
}

by declaring a css in * it means that all the predefined padding and margin will be removed from each and every html element.

which is the best practice.as it is difficult to figure out padding/margin for every element

Upvotes: 0

Blake Mann
Blake Mann

Reputation: 5490

The ul element has a default margin that is pushing all of the content down. You can simply specify margin: 0; on the ul to solve this.

<!DOCTYPE html>
<html>
	<head>
		<style>
			body{
				margin: 0px;
				padding: 0px;
			}
			#navbar{
				position: relative;
				background: #004f6b;
				height: 100px;
				color: white;
			}
			li{
				list-style-type:none;
				display:inline;
			}
                        #navbar > ul {
                                margin: 0;
                        }
			#navbar > ul > li#title{
			position: absolute;
			left: 5px;
			}
			#navbar > ul > li#homeicon{
			position: absolute;
			left: 610px;
			}
			#navbar > ul > li#search{
			position: absolute;
			right: 300px;
			}
			#navbar > ul > li#profile{
			position: absolute;
			right: 5px;
			}
		</style>
	</head>
	<body>
		<div id="navbar">
			<ul>
				<li id="title">Title</li>
				<li id="homeicon">Icon</li>
				<li id="search"><input type="text" style="width:210%"/></li>
				<li id="profile">Follow Us!</li>
			</ul>
		</div>
	</body>
</html>

Upvotes: 1

Related Questions