How to create a pixel perfect divider using css border [closed]

StackOverflow https://stackoverflow.com/questions/13337077

  •  28-11-2021
  •  | 
  •  

Domanda

I have a menu with background black and submenu with backgound grey.

Now I would like to have a pixel perfect divider between them.

But I have no idea what border color I should use to get pixel perfect divider. Can anyone help me?

Here is the html code

<!DOCTYPE html>
<html>
<body>
<div class="mainnav">
    <p> This is main nav </p>
</div>
<div class="subnav">
     <p> This is sub nav </p>
</div> 
</body>
</html>

And here is my css

.mainnav {
width:100%;
    height:60px;
    background-color:#000000;
    color:#ffffff;
    text-align:center;
}
.mainnav p {
padding-top:20px; 
}
.subnav p {
padding-top:10px; 
}
.subnav {
width:100%;
    height:45px;
    background-color:#333;
    color:#ffffff;
    text-align:center;
}

​

Here is my jsfiddle.

http://jsfiddle.net/ruUgk/

Thanks.

È stato utile?

Soluzione

Add a bottom border to .mainnav

.mainnav {
    border-bottom:1px solid #fff;
}

http://jsfiddle.net/ruUgk/1/

Altri suggerimenti

I do not think you need any pixel perect devider! It is good as is. In any case, I do not think this site is for questions of this type, you should have a technical question here, not a question on how to make things look good.

I will add a dotted line between them

Add following line to mainnav css

border-bottom:1px dotted #fff;

Check this one on JSFiddle

http://jsfiddle.net/ruUgk/2/
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top