Mam taki problem. Mamy pasek nawigacyjny:

<nav>
<div>...</div>
<div class="selected">...</div>
<div>...</div>
...
</nav>

Jedna z opcji menu jest wyselekcjonowana. Graficznie ma się ona wysunąć
do góry, ponad obrys NAV i zajmować wysokość NAV + 20px. Jednakże
zawartość DIVa ma pozostać na miejscu. Problem polega na tym, że jeśli
zwiększy się wysokość wyselekcjonowanego DIVa o 20px, to wszystkie
pozostałe przesuną się w dół jako inline-bloki. Chyba zmęczenie mnie
dopadło bo nie wiem jak z tego wybrnąć.

nav {
position-relative;
height: 100px;
width: 900px;
}

div {
position-relative;
display: inline-block;
height: 100px;
background-color: #F00;
}

.selected {
margin-top: -20px;
padding-top: 20px;
}


CSS cytuję poglądowo. Wyrzuciłem to co nie ma związku ze sprawą.

do góry

Dnia 09-12-2012 12:53 Marek napisał:

> nav {
> position-relative;
> height: 100px;
> width: 900px;
> }

Chyba: "position: relative;"? Czy o czymś nie wiem?

--
Wojtek Gapiński
http://jwmprojekt.pl

do góry

W dniu 2012-12-09 13:29, Wojtek Gapiński pisze:
> Dnia 09-12-2012 12:53 Marek napisał:
>
>> nav {
>> position-relative;
>> height: 100px;
>> width: 900px;
>> }
>
> Chyba: "position: relative;"? Czy o czymś nie wiem?
>

Tak, masz rację. CSS zredagowałem poglądowo. Literówki mogą się zdarzyć.
Niemniej jednak chodzi mi o meritum sprawy.

do góry

Dnia 09-12-2012 14:03 Marek napisał:
> W dniu 2012-12-09 13:29, Wojtek Gapiński pisze:
>> Dnia 09-12-2012 12:53 Marek napisał:
>>
>>> nav {
>>> position-relative;
>>> height: 100px;
>>> width: 900px;
>>> }
>>
>> Chyba: "position: relative;"? Czy o czymś nie wiem?
>>
>
> Tak, masz rację. CSS zredagowałem poglądowo. Literówki mogą się zdarzyć.
> Niemniej jednak chodzi mi o meritum sprawy.

OK, wolałem się upewnić :)
Zostawiłeś miejsce w elemencie znajdującym się powyżej <nav> na te 20 px
marginesu? Bo jeśli nie, to nic dziwnego, że całość przesuwa się w dół -
jakoś trzeba zmieścić te elementy.

pozdrawiam
--
Wojtek Gapiński
http://jwmprojekt.pl

do góry

On Sun, 09 Dec 2012 15:25:52 +0100, Wojtek Gapiński wrote:
> Dnia 09-12-2012 14:03 Marek napisał:
>> W dniu 2012-12-09 13:29, Wojtek Gapiński pisze:
>>> Dnia 09-12-2012 12:53 Marek napisał:
> Zostawiłeś miejsce w elemencie znajdującym się powyżej <nav> na te 20 px
> marginesu? Bo jeśli nie, to nic dziwnego, że całość przesuwa się w dół -
> jakoś trzeba zmieścić te elementy.

No właśnie: daj im margin-top:20px, a temu, który jest "selected"
margin-top:0 i o 20px większą wysokość.

HARY

--
Acting is an art which consists of keeping the audience from
coughing.

do góry

W dniu 2012-12-09 15:25, Wojtek Gapiński pisze:

> Zostawiłeś miejsce w elemencie znajdującym się powyżej <nav> na te 20 px
> marginesu? Bo jeśli nie, to nic dziwnego, że całość przesuwa się w dół -
> jakoś trzeba zmieścić te elementy.

Nie zostawiłem. Ponadto nie powstaje przestrzeń między nav a
poprzedzającym elementem. Element z marginesem -20px wychodzi poza nav i
nachodzi na element poprzedzający. Problem dotyczy tego co się w nav
dzieje.

W międzyczasie zastosowałem vertical-align: bottom na każdym DIVie. To
rozwiązało problem. Nie wiem dlaczego poprzednio nie chciało to
zadziałać. Zmieniałem CSS w paru miejscach i nie jestem już w stanie
dowiedzieć się co było źle.

do góry

W dniu 2012-12-09 18:08, HARY pisze:
> No właśnie: daj im margin-top:20px, a temu, który jest "selected"
> margin-top:0 i o 20px większą wysokość.

W międzyczasie rozwiązałem problem. Wojtkowi napisałem więcej o tym.

Rozważając już akademicko: przy takim rozwiązaniu element selected nie
wyszedłby poza obrys nav więc nie spełniłby założeń. Chodzi o to aby
grafika wyselekcjonowanego przycisku zachodziła na grafikę powyżej nav.

do góry