Białymi liniami oznaczyłem jak ma być podzielona góra strony. Na górze mam czerwony nagłówek, który jest grafiką. Troszkę niżej mam 2 boxy:
- w pierwszym mam mieć grafikę jako tło
- w drugim po prostu jakieś tam jednolite tło (np. białe)
Layout ma być skalowalny, tzn. że przy rozszerzeniu mają się te wszystkie tła przedłużać (prócz #barHolder, ponieważ resztę tła po lewej ma dopełniać tło jednolite). Dla tych boxów napisałem kod
Kod
#barHolder {
float: left;
width: 35%;
height: 40px;
background: #0a76a2 url(../img/bar_bg.jpg) no-repeat right;
}
#barHolder2 {
float: right;
width: 65%;
height: 40px;
background: #fff;
}
float: left;
width: 35%;
height: 40px;
background: #0a76a2 url(../img/bar_bg.jpg) no-repeat right;
}
#barHolder2 {
float: right;
width: 65%;
height: 40px;
background: #fff;
}
Jak widać, wymiary ich określiłem w procentach. Jednak przy skalowaniu strony, nijak to się odnosi do rozmiaru menu, po prostu box #barHolder i menu nie są cały czas na równi (w jednej kolumnie). Czy ktoś wie jak to rozwiązać?