W moim projekcie mam coś takiego jak box zajętości który wygląda mniej więcej tak:
<div class="1"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
Kontenery left i right mają określoną szerokość i wysokość w px, element middle ma zmieniać się dynamicznie, w zależności jaka klasę mu jeszcze przypnę, tzn może mieć 100px, 200px, 300px itd.
Tłem są tu grafiki, gdzie w left i right mam całe buttony z zaokrąglanymi przezroczystymi rogami (obrazek to png), natomiast middle to grafika o szerokości 1px i odpowiedniej wysokości, powtarzana repeat-x przez całą szerokość.
Kontenerowi middle nie mogę dac stałej szerokości w px ale daję ją na 100% żeby zmieniała się wraz z szerokością.
problem jest taki że warstwa środkowa mając 100% szerokości, mimo że ustawiona pod left i right, "prześwituje" na przezroczystych rogach lewej i prawej strony.
Z lewą poradziłem sobie bardzo prosto - dając w css warstwy środkowej margin-left: XX px;. Niestety w żaden sposób nie mogę poradzić sobie z prawą stroną
CSS wygląda następujaco:
.1{
height: 94.59%;
width: 100%;
position: relative;
margin:0;
padding:0;
z-index: 1;
overflow: hidden;
}
.left {
height: 175px;
width: 18px;
float: left;
position: absolute;
}
.middle {
height: 175px;
margin-left:18px;
width: 100%;
float: left;
}
.right {
height: 175px;
width: 17px;
right:0;
position: absolute;
}
A efekt jaki chcę uzyskać to:
A mam:
Ta prawa strona mnie rozbija
Ma ktoś jakiś pomysł?
Pozdr
Do góry
Zgłoś
