Question

I’ve noticed how on some websites, the headers have no edges or excessive whitespace, I am trying to recreate something similar, but not really sure how to. A good example would be the top notification/search bar on stackoverflow itself.

.header
{
    height: 250px;
    width: 100%;
    margin: 0 auto;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffa200), color-stop(100%,#d25400));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200',endColorstr='#d25400',GradientType=0);
    background: -moz-linear-gradient(top,#ffa200,#d25400);
    background-image: -o-linear-gradient(#ffa200,#d25400);
    overflow: hidden;
}
.header .topbar
{
    height: 60px;
    background-image: url(../imgz/head/hBarSBg.png);
    background-repeat: repeat-x;
}
.header .topbar .mCquake
{
    height: 37px;
    width: 278px;
    background-image: url(../imgz/head/mCqRight.png);
    background-repeat: no-repeat;
    float: right;
    margin-right: 10px;
    margin-top: 11.5px;
    margin-bottom: 11.5px;
}

How exactly would I go about doing this?

Thanks. 🙂

Answer 1

Most of the people use some default css declarations to bring all browsers to the same level. One that is gaining attention recently is http://necolas.github.com/normalize.css/ — You can also type CSS Resets on google and it will give you bunch of results 😀