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

Question

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

57 views Asked by Tim Fox At 25 November 2024 at 22:08

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...

Original Q&A

There are 2 answers

**Blake Mann** · Answer 1 · 2015-06-10 17:41:48

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>

**Anirudh Modi** · Answer 2 · 2015-06-10 17:57:59

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

TechQA.

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

There are 2 answers

Related Questions in CSS

Related Questions in NAVBAR

Popular Questions

Popular Tags

Trending Questions