W dniu 2013-11-12 16:56, Marek pisze:
> "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)"

Tak na prawdę top:x umieszcza nie górną krawędź elementu, ale "top
margin edge", co w przypadku margin:0; daje ten sam efekt. Ale dzięki
temu że jest to właśnie margin edge, zadziała sztuczka z marginesem.


--
Pozdrawiam,
Paweł "PablO" Piskorz

do góry

W dniu 2013-11-12 16:54, Marek pisze:
> W dniu 2013-11-12 11:37, Paweł Piskorz pisze:
>>
>> 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 :-)

Zadziała wszędzie.

>> 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.

Hmm, chyba Ci się coś nie teges kliknęło, albo mnie codepen oszukuje.
W polu HTML mam:
<button id="switchLeft"></button>
a w CSS:
#switchLeft {
display:block;
width: 32px;
height: 204px;
margin-top:-102px;
position: fixed;
left: 0;
top: 50%;
padding: 0;
background-color: #F00;
}

#switchLeft:hover {
background-color: #00F;
}


--
Pozdrawiam,
Paweł "PablO" Piskorz

do góry

W dniu 2013-11-12 16:54, Borys Pogoreło pisze:
> 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

Już Paweł mi to pokazał :-) Ale dziękuję.



--
Pozdrawiam
Marek

do góry

W dniu 2013-11-12 19:52, Paweł Piskorz pisze:

>
>>> 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.
>
> Hmm, chyba Ci się coś nie teges kliknęło, albo mnie codepen oszukuje.
> W polu HTML mam:
> <button id="switchLeft"></button>
> a w CSS:
> #switchLeft {
> display:block;
> width: 32px;
> height: 204px;
> margin-top:-102px;
> position: fixed;
> left: 0;
> top: 50%;
> padding: 0;
> background-color: #F00;
> }
>
> #switchLeft:hover {
> background-color: #00F;
> }

To się uśmiejesz co ja widzę :-D

<div class="button">
tekst pod
</div>

a po stronie CSS

.button {
background: red;
width: 62px;
height: 0px;
padding-top: 65px;
display: block;
position: relative;
text-align: center;
overflow: visible;
}


--
Pozdrawiam
Marek

do góry

W dniu 2013-11-12 19:50, Paweł Piskorz pisze:

>
> Tak na prawdę top:x umieszcza nie górną krawędź elementu, ale "top
> margin edge", co w przypadku margin:0; daje ten sam efekt. Ale dzięki
> temu że jest to właśnie margin edge, zadziała sztuczka z marginesem.

No właśnie - tego "drobiazgu" nie wiedziałem. Mylnie sądziłem, że
chodziło o bounding box. Warto pogadać na forum ;-)


--
Pozdrawiam
Marek

do góry

A coś takiego:
http://codepen.io/anon/pen/ivtuj

do góry

W dniu 2013-11-12 21:18, Marek pisze:
> W dniu 2013-11-12 19:52, Paweł Piskorz pisze:
>
>> Hmm, chyba Ci się coś nie teges kliknęło, albo mnie codepen oszukuje.
>> W polu HTML mam:
>> <button id="switchLeft"></button>
>> a w CSS:
>> #switchLeft {
>> display:block;
>> width: 32px;
>> height: 204px;
>> margin-top:-102px;
>> position: fixed;
>> left: 0;
>> top: 50%;
>> padding: 0;
>> background-color: #F00;
>> }
>>
>> #switchLeft:hover {
>> background-color: #00F;
>> }
>
> To się uśmiejesz co ja widzę :-D
>
> <div class="button">
> tekst pod
> </div>
>
> a po stronie CSS
>
> .button {
> background: red;
> width: 62px;
> height: 0px;
> padding-top: 65px;
> display: block;
> position: relative;
> text-align: center;
> overflow: visible;
> }

Haha, to jednak zostańmy przy jsfiddle:
http://jsfiddle.net/KjJfQ/
:)


--
Pozdrawiam,
Paweł "PablO" Piskorz

do góry

W dniu 2013-11-13 10:52, czu pisze:
> A coś takiego:
> http://codepen.io/anon/pen/ivtuj

Nawet lepiej, mniej liczenia :)
Dla zainteresowanych:
http://coding.smashingmagazine.com/2013/08/09/absolu
te-horizontal-vertical-centering-css/


--
Pozdrawiam,
Paweł "PablO" Piskorz

do góry

Dnia Wed, 13 Nov 2013 12:27:56 +0100, Paweł Piskorz napisał(a):

>> A coś takiego:
>> http://codepen.io/anon/pen/ivtuj
>
> Nawet lepiej, mniej liczenia :)
> Dla zainteresowanych:
> http://coding.smashingmagazine.com/2013/08/09/absolu
te-horizontal-vertical-centering-css/

I pomyśleć ile problemów rozwiązałby flexbox. Jak już za 10 lat będzie
można go używać ;)

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

do góry