navbar - [CSS]How to make it move to the top? -
i'm sorry, newbie designer. want ask something, how make background color move top? still split white space(the top of 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 bad english , sorry bad skill... help...
the ul
element has default margin
pushing of content down. can specify margin: 0;
on ul
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>
Comments
Post a Comment