GoldenLine
Zaloguj się
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: da sie ustawic element w polowie wysokosci innego...

Tutaj zywy przyklad:

http://jsfiddle.net/EXLtq/

Chce ustawic input text w polowie wysokosci obrazka. Nie wiem, jaka jest wysokosc obrazka, bo to nie musi byc obrazek, moze byc div z dynamiczna zawartoscia, cokolwiek.

Da sie to jakos css-ami ustawic, czy musze kombinowac z js? Probowalam z vertical-align: middle; ale nie idzie (albo ja cos robie zle)
Link do wypowiedziLink

konto usunięte

Temat: da sie ustawic element w polowie wysokosci innego...

Problem stary jak świat... może po prostu 50-procentówką?
<div>

<div style="position: relative; top:50%;">tu coś</div>

</div>

Tylko teraz zrobić, by obrazek wrzucało do DIVa nadrzędnego jako background, a "tu coś" dać input?Miłosz Wojaczek edytował(a) ten post dnia 09.11.12 o godzinie 12:46
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: da sie ustawic element w polowie wysokosci innego...

T&ak nie bardzo, np diva z dynamiczna trescia nie wrzuce w background. To musza byc dwa elementy obok siebie. Ten po prawej musi sie pojawiac w polowie wysokosci tego po lewej.
Link do wypowiedziLink
Andrzej Kidaj

Andrzej Kidaj www.ad3.eu

Temat: da sie ustawic element w polowie wysokosci innego...

Maja Miarecka:
Tutaj zywy przyklad:

http://jsfiddle.net/EXLtq/

Chce ustawic input text w polowie wysokosci obrazka. Nie wiem, jaka jest wysokosc obrazka, bo to nie musi byc obrazek, moze byc div z dynamiczna zawartoscia, cokolwiek.

Da sie to jakos css-ami ustawic, czy musze kombinowac z js? Probowalam z vertical-align: middle; ale nie idzie (albo ja cos robie zle)

vertical-align działa tylko z tabelami.

Centrowanie w pionie to chyba jedyne miejsce, gdzie jest łatwiej i szybciej użyć zwykłej tabeli.
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: da sie ustawic element w polowie wysokosci innego...

Miłosz Wojaczek:
Problem stary jak świat... może po prostu 50-procentówką?
<div>

<div style="position: relative; top:50%;">tu coś</div>

</div>

Tylko teraz zrobić, by obrazek wrzucało do DIVa nadrzędnego jako background, a "tu coś" dać input?

No dobra, to roywiazanie prawie zadzialalo :P prawie, bo powinno byc nieco inne:


<div style="position: relative;">

 <div style="position: absolute; top:30%;">tu coś</div>

</div>


i bangla :)

Dzieki za podrzucenie pomyslu :) staram sie jak najrzadziej uzywac position, float itp, ale jak widac czasami trzeba.

A tabel uzywam, ale do prezentacji danych, do layoutu tylko pudelka.
Link do wypowiedziLink
Andrzej Kidaj

Andrzej Kidaj www.ad3.eu

Temat: da sie ustawic element w polowie wysokosci innego...

Maja Miarecka:

A tabel uzywam, ale do prezentacji danych, do layoutu tylko pudelka.

OK. Powyższy przykład zadziała kiedy się zna wysokość wewnętrznego pudełka i jest ona stała. A co jeśli chcesz wyświetlić element o nieznanej wysokości (może być generowana dynamicznie) na środku ekranu? O ile wiem, CSS nie obsługuje czegoś takiego jak 50% - połowa_wysokości_pudełka (chyba, że CSS3, nie sprawdzałem). I tu albo użyjesz JS albo tabeli na całą wysokość ekranu i pionowe centrowanie w komórce.
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: da sie ustawic element w polowie wysokosci innego...

Masz racje, ale do moich potrzeb to rozwiazanie wystarcza. Jesli potrzebuje wyznaczyc cos bardziej dokladnie wtedy tylko JS, ale dla layoutow przy szerokosci ekranu pomiedzy 320 a 480 px to rozwiazanie jest wystarczajace :)

Nie znam dokladnej wysokosci elementu, ale na oko moge okreslic, ze top: 25% jest idealny w moim layoucie :P
Link do wypowiedziLink
Andrzej Kidaj

Andrzej Kidaj www.ad3.eu

Temat: da sie ustawic element w polowie wysokosci innego...

Maja Miarecka:
Masz racje, ale do moich potrzeb to rozwiazanie wystarcza. Jesli potrzebuje wyznaczyc cos bardziej dokladnie wtedy tylko JS, ale dla layoutow przy szerokosci ekranu pomiedzy 320 a 480 px to rozwiazanie jest wystarczajace :)

Nie znam dokladnej wysokosci elementu, ale na oko moge okreslic, ze top: 25% jest idealny w moim layoucie :P

No chyba że tak :)
Link do wypowiedziLink

konto usunięte

Temat: da sie ustawic element w polowie wysokosci innego...

Najlepiej uzyć relatywnie pozycjonowanego kontenera, a w nim "bebechy". Jeśli znasz wysokość inputa to najlepiej:


input {

    position: absolute;

    height: 20px;

    top: 50%;

    margin-top: -10px;

}

Wówczas niezależnie od wysokości obrazka lub relatywnego kontenera input będzie zawsze na środku. Spróbuj zwiększyć znacznie wysokość w Twoim przykładzie i zobacz co się stanie :)

Jeśli input (lub inny element) ma mieć dynamiczną zawartość, to można użyć display [table, table-row, table-cell] i vertical-align. W tym przypadku mamy stety problem z kompatybilnością dla < IE8.Mateusz G. edytował(a) ten post dnia 09.11.12 o godzinie 13:45
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: da sie ustawic element w polowie wysokosci innego...

Dzieki, zaraz bede testowac :)
Link do wypowiedziLink

konto usunięte

Temat: da sie ustawic element w polowie wysokosci innego...

A, to git.
No tak na szybko wpisałem, że 50tką żeby to zrobić, heh.
Link do wypowiedziLink
Korneliusz Wilgocki

Korneliusz Wilgocki programista stron
internetowych

Temat: da sie ustawic element w polowie wysokosci innego...

a jak nie znasz żadnych wysokości to ratuje cię jquery i pobieranie w locie wysokości elementów i ich pozycjonowanie
Link do wypowiedziLink

konto usunięte

Temat: da sie ustawic element w polowie wysokosci innego...

Korneliusz Wilgocki:
a jak nie znasz żadnych wysokości to ratuje cię jquery i pobieranie w locie wysokości elementów i ich pozycjonowanie

Do tego wystarczy nawet zwykły JS, nie trzeba strzelać do komara z armaty...
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: da sie ustawic element w polowie wysokosci innego...

Jak napisalam wczesniej, do dokladnych wyliczen (gdzie to jest na prawde potrzebne, bo np roznice miedzy wysokoscia elementu siegaja setek pixeli, w zaleznosci od przypadku) to uzywam JS (przy obecnym projekcie jQuery, bo akurat z tej biblioteki korzystamy), ale do takiej, za przeproszeniem pierdoly, gdzie wysokosc obrazka jest mi nieznana, bo wszystko jest zrobione w oparciu o fluid layout, to dla szerokosci screena pomiedzy 320 a 480 ta wartosc nie zmienia sie na tyle, zeby ustawienie wartosci procentowej topu psulo efekt :D

A nie zamierzam dla layoutu dla telefonow pchac zbedny js. To ma byc szybkie i lekkie, bez zbednych wodotryskow :)
Link do wypowiedziLink
Paweł K.

Paweł K. Front-end web
developer

Temat: da sie ustawic element w polowie wysokosci innego...

Drodzy moi ... vertical-align działa nie tylko z tabelami, i idealnie nadaje się do rozwiązania tego problemu. W najlepszy możliwy sposób.
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: da sie ustawic element w polowie wysokosci innego...

Paweł K.:
Drodzy moi ... vertical-align działa nie tylko z tabelami, i idealnie nadaje się do rozwiązania tego problemu. W najlepszy możliwy sposób.

To prosze zobrazuj swoje slowa przykladem, link do fiddle'a w pierwszym poscie.
Link do wypowiedziLink
Mariusz Witek

Mariusz Witek Programista PHP,
Front-End Developer

Temat: da sie ustawic element w polowie wysokosci innego...

Paweł miał pewnie na myśli coś takiego:
http://jsfiddle.net/EXLtq/3/
Nie wiem, czy w innych przykładach zadziała poprawnie. Podaj proszę konkretny kod na którym ma to Ci działać.Mariusz Witek edytował(a) ten post dnia 18.11.12 o godzinie 23:42
Link do wypowiedziLink
Paweł K.

Paweł K. Front-end web
developer

Temat: da sie ustawic element w polowie wysokosci innego...

Maja Miarecka:
Paweł K.:
Drodzy moi ... vertical-align działa nie tylko z tabelami, i idealnie nadaje się do rozwiązania tego problemu. W najlepszy możliwy sposób.

To prosze zobrazuj swoje slowa przykladem, link do fiddle'a w pierwszym poscie.

To co napisał Mariusz powinno wystarczyć :)
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: da sie ustawic element w polowie wysokosci innego...

Mariusz Witek:
Paweł miał pewnie na myśli coś takiego:
http://jsfiddle.net/EXLtq/3/
Nie wiem, czy w innych przykładach zadziała poprawnie. Podaj proszę konkretny kod na którym ma to Ci działać.

Wyglada dokladnie tak jak potrzebuje :) pytanie, co w bardziej zewnetrznych kontenerach moze psuc efekt vertical-align?
Link do wypowiedziLink
Paweł K.

Paweł K. Front-end web
developer

Temat: da sie ustawic element w polowie wysokosci innego...

Maja Miarecka:
Mariusz Witek:
Paweł miał pewnie na myśli coś takiego:
http://jsfiddle.net/EXLtq/3/
Nie wiem, czy w innych przykładach zadziała poprawnie. Podaj proszę konkretny kod na którym ma to Ci działać.

Wyglada dokladnie tak jak potrzebuje :) pytanie, co w bardziej zewnetrznych kontenerach moze psuc efekt vertical-align?

nie rozumiem pytania

mam natomiast inne: Ty pracujesz na stanowisku front-end developera, czy może juniora? Pytanie proszę potraktować poważnie.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj