Co ty masz z tym position relative ? Ogólnie powinieneś zrobić diva menu a do niego wkładać te klasy z przyciskami. Potem wywalasz wszystkie relativy, left:0 co to kufa jest
Ogólnie kod to jest totalny chaos. Po co ci float:left to menu, jak nie chcesz by przyciski były koło niego ? Daj se kontener do menu i do całości, napisz css do pozostałych klas bo jak nie masz szerokości to centrowanie ci nie zadziała. Od biedy możesz dać rysunek to ci powiem dokładniej co masz zmienić ;]
//edit, jednak dałeś rysunek sec
To tak:
to co chcesz uzyskać (to co w tytule) dostaniesz wywalając śmieci i dodając margin-top:~50px
body {
background-image: url("background.png");
}
body.background {
}
.logo {
background-image: url("logo.png");
height: 91px;
width: 384px;
float: left;
}
.strgl {
background-image: url("str-gl.png");
float: left;
height: 39px;
width: 259px;
}
.portfolio {
background-image: url("portfolio.png");
float: left;
height: 35px;
width: 159px;
}
.blog {
background-image: url("blog.png");
float: left;
height: 36px;
width: 85px;
}
#menu {
height: 36px;
width: 520px;
float: left;
margin-top: 50px;
}
#kontener {
width: 950px;
margin: 0px auto;
}
Natomiast cały html proponowałbym jw. Dodać kontener dla menu i dla całości (bo nie uzyskasz szarego tła obok, nie etc. Od siebie tylko powiem, cyferki dla kontenera i menu strzelałem, najlepiej mieć równą sumę reszty, ew piksel / dwa odstępu. A co do przycisków, to braknie ci miejsca przy takich dużych grafikach w stosunku do rozdzielczości by to tak zrobić jak na obrazku. A co do tła u mnie (1600/900) działa normalnie, po zmiejszeniu okna również. A co do samej grafiki bardzo długo się ładuje. Daj coś takiego uzyskasz podobny efekt co do twojego gradienta (tylko w przeglądarkach obsługujących css3)
background-color:#f2f5f5;
background-image: -moz-radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px);
background-image: -webkit-radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px);
background-image: -o-radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px);
background-image: -ms-radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px);
background-image: radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px)
Niestety musisz dać kontener height 100% bo się będzie powtarzać / nie rozciągać do całości strony (taki urok css3)
To daj do body, oczywiście żaden ze mnie grafik, lamie strasznie w tej dziedzinie. Ale zawsze coś, kolory są dobre, ale z % musisz popracować. Oczywiście możesz pozostać przy grafice, ale jak już chcesz ją zostawić, wytnij tylko te kółko ze środka, i dał tło zewnętrzne jako tło w hex do body. Jednak to trzeba jakoś przesunąć, by było na środku.