Zrobiłem 2 przyciski po lewej i prawej stronie ekranu:

<button id="switchLeft"></button>
<button id="switchRight"></button>

Ponieważ (chyba) nie da się elementu wypozycjonować tak aby jego środek
wypadł pośrodku ekranu (top: 50% umieści górną krawędź elementu pośrodku
a nie środek) to wymyśliłem obejście w postaci zmniejszenia do zera
buttona i umieszczenie w nim pseudoelementu przesuniętego o połowę
wysokości. Działa świetnie pod IE i Chrome... ale nie pod FF. FF
renderuje ten element poprawnie ale nie da się na nim kliknąć i nie jest
generowane :hover. Czy da się jakoś zmusić tą przeglądarkę bez
zastępowania pseudoelementu - elementem?

Poniżej okrojony CSS z niepotrzebnych do rozważań elementów.


#switchLeft, #switchRight {
width: 0;
height: 0;
position: fixed;
left: 0;
top: 50%;
padding: 0;
margin: 0;
overflow: visible;
background-color: transparent;
display: none;
}

#switchLeft:hover, #switchRight:hover {
...
}

#switchLeft:before, #switchRight:before {
display: block;
content: "";
width: 32px;
height: 204px;
position: absolute;
top: -102px;
left: 0;
cursor: pointer;
}

#switchRight {
left: auto;
right: 32px;
}

#switchRight:before {
...
}

--
Pozdrawiam
Marek

do góry

Tue, 05 Nov 2013 23:45:06 +0100
Marek <p...@s...com> napisał(a):

> Zrobiłem 2 przyciski po lewej i prawej stronie ekranu:
>
> <button id="switchLeft"></button>
> <button id="switchRight"></button>
>
> Ponieważ (chyba) nie da się elementu wypozycjonować tak aby jego środek
> wypadł pośrodku ekranu (top: 50% umieści górną krawędź elementu pośrodku
> a nie środek) to wymyśliłem obejście w postaci zmniejszenia do zera
> buttona i umieszczenie w nim pseudoelementu przesuniętego o połowę
> wysokości. Działa świetnie pod IE i Chrome... ale nie pod FF. FF
> renderuje ten element poprawnie ale nie da się na nim kliknąć i nie jest
> generowane :hover. Czy da się jakoś zmusić tą przeglądarkę bez
> zastępowania pseudoelementu - elementem?

A np. coś takiego:

<div id="b"><button id="switchLeft"></button></div>

#b {position: fixed; top: 50%; }
#b button {position: absolute; top: -50px; height:100px; }



--
Piotr Grzegorzyca pozdrawia
http://komputerowe.zakamarki.net

jedenaste: Nie spamuj

do góry

W dniu 2013-11-06 10:46, rePeter pisze:
>
> A np. coś takiego:
>
> <div id="b"><button id="switchLeft"></button></div>
>
> #b {position: fixed; top: 50%; }
> #b button {position: absolute; top: -50px; height:100px; }
>
>
>

Ale ja napisałem:

Czy da się jakoś zmusić tą przeglądarkę bez
zastępowania pseudoelementu - elementem?

:-)

--
Pozdrawiam
Marek

do góry

W dniu 2013-11-05 23:45, Marek pisze:
> Zrobiłem 2 przyciski po lewej i prawej stronie ekranu:
>
> <button id="switchLeft"></button>
> <button id="switchRight"></button>
>
> Ponieważ (chyba) nie da się elementu wypozycjonować tak aby jego środek
> wypadł pośrodku ekranu (top: 50% umieści górną krawędź elementu pośrodku
> a nie środek) to wymyśliłem obejście w postaci zmniejszenia do zera
> buttona i umieszczenie w nim pseudoelementu przesuniętego o połowę
> wysokości. Działa świetnie pod IE i Chrome... ale nie pod FF. FF
> renderuje ten element poprawnie ale nie da się na nim kliknąć i nie jest
> generowane :hover. Czy da się jakoś zmusić tą przeglądarkę bez
> zastępowania pseudoelementu - elementem?
>
> Poniżej okrojony CSS z niepotrzebnych do rozważań elementów.
>
>
> #switchLeft, #switchRight {
[8<]
> display: none;
> }

Coś chyba namieszałeś w kodzie, wrzuć działający przykład na
http://jsfiddle.net/


--
Pozdrawiam,
Paweł "PablO" Piskorz

do góry

W dniu 2013-11-09 13:01, Paweł Piskorz pisze:
>
> Coś chyba namieszałeś w kodzie, wrzuć działający przykład na
> http://jsfiddle.net/

Proszę bardzo:
http://jsfiddle.net/marek1967/9Z4NN/16/embedded/resu
lt/

Najechanie myszką na prostokąt zabarwia go na niebiesko, ale nie pod FF.
Pod FF także nie zadziałają na tym buttonie zdarzenia myszy.

--
Pozdrawiam
Marek

do góry

>Czy da się jakoś zmusić tą przeglądarkę bez
>zastępowania pseudoelementu - elementem?

A jaki jest powód tego założenia?

do góry

W dniu 2013-11-10 12:38, Marek pisze:
> W dniu 2013-11-09 13:01, Paweł Piskorz pisze:
>>
>> Coś chyba namieszałeś w kodzie, wrzuć działający przykład na
>> http://jsfiddle.net/
>
> Proszę bardzo:
> http://jsfiddle.net/marek1967/9Z4NN/16/embedded/resu
lt/

Dzięki, w kodzie na fiddle nie masz display:none; dla
#switchLeft, #switchRight :)

> Najechanie myszką na prostokąt zabarwia go na niebiesko, ale nie pod FF.
> Pod FF także nie zadziałają na tym buttonie zdarzenia myszy.

Skoro znasz wysokość buttona (204px), to nadaj mu ujemny margines górny
o wartości połowy tej wysokości (-102px) i działaj na buttonie, nie na
pseudoelementach:
http://codepen.io/anon/pen/tCeEL
(jsfiddle ma czkawkę, toteż wrzuciłem na codepen)


--
Pozdrawiam,
Paweł "PablO" Piskorz

do góry

W dniu 2013-11-12 11:37, Paweł Piskorz pisze:
>
> Dzięki, w kodzie na fiddle nie masz display:none; dla
> #switchLeft, #switchRight :)

Tak, zapomniałem o tym, że w JS zmieniam display: none na block. Dlatego
- zgodnie z Twoim życzeniem - wrzuciłem działający przykład. :-)

>> Najechanie myszką na prostokąt zabarwia go na niebiesko, ale nie pod FF.
>> Pod FF także nie zadziałają na tym buttonie zdarzenia myszy.
>
> Skoro znasz wysokość buttona (204px), to nadaj mu ujemny margines górny
> o wartości połowy tej wysokości (-102px) i działaj na buttonie,

Czyli ujemny margines zadziała przy top: 50% jako środek w procentach
minus górny margines w pikselach? I to zadziała wszędzie? Jeśli tak, to
bomba :-)

> nie na
> pseudoelementach:
> http://codepen.io/anon/pen/tCeEL
> (jsfiddle ma czkawkę, toteż wrzuciłem na codepen)

Czy to adekwatny przykład? Bo mi się wydaje, ze dotyczy on innego mojego
wątku dotyczącego błędów z wychodzeniem tekstu poza obrys buttona.
Zresztą i tak ten przykład nie jest adekwatny bo podajesz tu DIVa a nie
BUTTON'a.


--
Pozdrawiam
Marek

do góry

Dnia Thu, 07 Nov 2013 17:09:23 +0100, Marek napisał(a):

> Ale ja napisałem:
>
> Czy da się jakoś zmusić tą przeglądarkę bez
> zastępowania pseudoelementu - elementem?

Bardzo prosto:

position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;

+ position:relative na kontenerze

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

W dniu 2013-11-12 08:16, c...@p...com pisze:
>> Czy da się jakoś zmusić tą przeglądarkę bez
>> zastępowania pseudoelementu - elementem?
>
> A jaki jest powód tego założenia?
>


Wspomniałem o tym w wątku otwierającym:
"Ponieważ (chyba) nie da się elementu wypozycjonować tak aby jego środek
wypadł pośrodku ekranu (top: 50% umieści górną krawędź elementu pośrodku
a nie środek)"

Jednakże Paweł podsunął mi pewną sztuczkę, która (chyba) zadziała i
przesunie element o 50% minus X pikseli.

--
Pozdrawiam
Marek

do góry