konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Mam taką sytuację:


#include_top_space {
width: 100%;
height: 20px;
}
#include_left {
float: left;
width: 450px;
}
#include_center {
position: absolute;
margin-left: 450px;
margin-right: 450px;
width: 58px;
}
#include_right {
float: right;
width: 450px;
}
#include_clear {
clear: both;
}
#include_bottom_space {
width: 100%;
height: 20px;
}


Kawałek kodu dotyczy głównego fragmentu podstrony, która ładuje się do głównej strony. Problem w tym, że tylko zawartość sekcji include_left oraz include_right rozciąga stronę w dół (dzięki znacznikowi clear w sekcji include_clear). Kolumna include_center natomiast ze względu na pozycjonowanie absolutne tak się nie zachowuje - a docelowo powinna. Zawartość sekcji include_center "włazi" na stopkę, która jest umieszczona w stronie głównej.

Wielki problem to nie jest, bo kolumna centralna ma znaczenie demarkacyjne i będzie tam jedynie linia. Ale wolałbym, żeby działała dokładnie tak, jak lewa i prawa.

Czy jest na to jakiś sposób z wykorzystaniem atrybutów float?Michał Pijet edytował(a) ten post dnia 13.08.11 o godzinie 17:52

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Jezeli jest absolute, to w tym przypadku robi dokladnie, to co powinna ;)

zrob position:relative i daj mu tez float:left (chociaz pewnie bez floata tez sie obejdzie) Jesli miedzy kolumnami potrzebujesz przerwy to dodaj margin-right w lewej i srodkowej

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Jest właśnie margin-right i left. W przypadku, gdy nie ma absolute nadanego kolumnie centralnej, spycha ona kolumnę prawą do swojej ostatniej linii (początek linii bazowej kolumny prawej jest końcem kolumny center)...

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

jest margin, ale zle a center nadal jest absolute a nie powinno (float'a nie ma dla center)
mowiac margin-right mialem na mysli cos w stylu 20px, a nie szerokosc tych bocznych kolumn.

EDIT ------
az kurde przed chwila sprawdzilem czy nie mam zwidow w niedzielny poranek ;)
WYWAL:
position: absolute;
margin-left: 450px;
margin-right: 450px;

DODAJ:
float:left;

I problem rozwiazany, center bedzie sie zachwoywac tak samo jak left i right.Andrzej Winnicki edytował(a) ten post dnia 14.08.11 o godzinie 10:31

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Andrzej Winnicki:
jest margin, ale zle a center nadal jest absolute a nie powinno (float'a nie ma dla center)
mowiac margin-right mialem na mysli cos w stylu 20px, a nie szerokosc tych bocznych kolumn.

EDIT ------
az kurde przed chwila sprawdzilem czy nie mam zwidow w niedzielny poranek ;)
WYWAL:
position: absolute;
margin-left: 450px;
margin-right: 450px;

DODAJ:
float:left;

I problem rozwiazany, center bedzie sie zachwoywac tak samo jak left i right.

Coś jest nie tak z rozwiązaniem, które podałeś. W przypadku, gdy kolumna centralna staje się drugim float left - o ile dobrze zrozumiałem - wszystko jest dobrze tylko do momentu, gdy pierwsza jest pusta. Po wrzuceniu do pierwszej obrazka reszta kolumn zjeżdża w dół.

Chyba, że nie zrozumiałem tego, co poleciłeś mi poprawić.
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

1. Never-ever position absolute your layout!
2. główna ramka nie powinna być float.
3. http://www.google.pl/search?q=bulding+css+layouts

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Adam Pawliczek:
1. Never-ever position absolute your layout!
2. główna ramka nie powinna być float.
3. http://www.google.pl/search?q=bulding+css+layouts

Potrzebuję rady, jak rozwiązać problem środkowej ramki, która z konieczności jest pozycjonowana absolutnie. Nie potrzebuję kursów dla początkujących, ale jeśli chciałeś się dowartościować, to jestem w stanie zrozumieć.

Widzę, że muszę odświeżyć sobie sam metody pozycjonowania trzech kolumn via Google, bo lada moment posypią się pytania czy rozumiem akronim CSS. Więc prośba Adamie, jeśli masz radę na konkretny problem to pisz proszę kod albo podrzucaj wartościowy link, cała reszta na pewno mi się nie przyda.

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Jeśli to tylko linia to do czego jej dodatkowy markup? Można to zrobić na wiele sposobów jednak ten wydaje mi się najbardziej słitaśny:

http://rkrupinski.home.pl/_test/separator

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Michał Pijet:
Adam Pawliczek:
1. Never-ever position absolute your layout!
2. główna ramka nie powinna być float.
3. http://www.google.pl/search?q=bulding+css+layouts

Potrzebuję rady, jak rozwiązać problem środkowej ramki, która z konieczności jest pozycjonowana absolutnie.
Wytlumaczysz czym sie objawia ta koniecznosc i czemu nie mozesz zrobic jak Ci Andrzej napisal?

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Michał Mikłowski:
Michał Pijet:
Adam Pawliczek:
1. Never-ever position absolute your layout!
2. główna ramka nie powinna być float.
3. http://www.google.pl/search?q=bulding+css+layouts

Potrzebuję rady, jak rozwiązać problem środkowej ramki, która z konieczności jest pozycjonowana absolutnie.
Wytlumaczysz czym sie objawia ta koniecznosc i czemu nie mozesz zrobic jak Ci Andrzej napisal?

Właściwie mógłbym powiedzieć NIE MÓGŁBYM, ale ze względu na dobre wychowanie mogę Ci odpowiedzieć.

1. To jedyna rada, która ma sens, ale i tak nie rozwiązuje problemu
2. Główna ramka nie jest float, podałem wycinek szablonu, w ogóle od czapy
3. To kurs CSS a nie rozwiązanie sprawy

i

4. A Ty w ogóle znasz CSS i rozumiesz o co tu chodzi?Michał Pijet edytował(a) ten post dnia 15.08.11 o godzinie 23:16

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

rafał krupiński:
Jeśli to tylko linia to do czego jej dodatkowy markup? Można to zrobić na wiele sposobów jednak ten wydaje mi się najbardziej słitaśny:

http://rkrupinski.home.pl/_test/separator

Dzięki Rafał, rzucę okiem na Twój szablon.
PS. Wyrenderowałem go sobie na IE7 i są jednak drobne różnice. Ale zobaczę i tak :)

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Michał Pijet:

Sprawa jest prosta - im wiecej szczegolow, tym wieksza szansa ze ktos Ci trafnie pomoze :) Jesli mowisz ze sa problemy - zbuduj przykladowa strone i pokaz co Ci nie smiga, to bedzie mozna w 5 sekund ocenic gdzie jest problem i dac jakies rozwiazanie.
Wiele osob chce pomoc, ale nie licz ze beda sypac tona przykladow.
Skoro ty szukasz pomocy, postaraj sie ze swojej strony dac wszystkie informacje szczegoly i przyklady.

Jesli nie, to ten temat dalej bedzie sie ciagnal, bez konkretnego rozwiazania.

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Michał Pijet:
1. To jedyna rada, która ma sens, ale i tak nie rozwiązuje problemu
Rozwiązuje.
4. A Ty w ogóle znasz CSS i rozumiesz o co tu chodzi?
Nie, nie rozumiem, tak się udzielam z nudów... co za gość.

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Michał Mikłowski:
Michał Pijet:
1. To jedyna rada, która ma sens, ale i tak nie rozwiązuje problemu
Rozwiązuje.
4. A Ty w ogóle znasz CSS i rozumiesz o co tu chodzi?
Nie, nie rozumiem, tak się udzielam z nudów... co za gość.

Dla tego szablonu rezygnacja z pozycjonowania absolutnego nie rozwiązuje problemu.Michał Pijet edytował(a) ten post dnia 15.08.11 o godzinie 23:56
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Michał Pijet:
Potrzebuję rady, jak rozwiązać problem środkowej ramki, która z konieczności jest pozycjonowana absolutnie.
Float i absolute to dwa podejścia które się raczej wykluczają przy budowie layoutu stron, przy czym jak już napisałem budowanie na absolute ma sens w bardzo szczególnych przypadkach. Ogólnie to łatwiej by było gdybyś napisał jaki efekt chcesz uzyskać...
Nie potrzebuję kursów dla początkujących,
Jak widać jednak potrzebujesz, bo budowa layoutu to podstawa. Takie pytania zadają właśnie początkujący.
ale jeśli chciałeś się dowartościować, to jestem w stanie zrozumieć.
Nawet nie wiesz jak bardzo mi urosło... i nie widzę żadnych plusików :(
Widzę, że muszę odświeżyć sobie sam metody pozycjonowania trzech kolumn via Google, bo lada moment posypią się pytania czy rozumiem akronim CSS. Więc prośba Adamie, jeśli masz radę na konkretny problem to pisz proszę kod albo podrzucaj wartościowy link, cała reszta na pewno mi się nie przyda.
Wartościowy link podesłałem, konkretną radę też. I jak napisałem: podrzuć cały problem a nie jego kawałek, łatwiej będzie jeleniom napisać Ci rozwiązanie, skoro sam nie potrafisz ;) :P
Kamila Jarosz

Kamila Jarosz web designer

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Też nie pojmuję po co Ci ten absolute. No ale... To może stara, "dobra" tabelka dla tych biednych trzech kolumn?
A ta linia to nie może być prawy border lewego diva / lewy border diva prawego?

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Rozwiązanie podane przez Andrzeja z dwoma float left działa. http://jsfiddle.net/YDr88/1/
Może to kwestia reszty szablonu, doctype czy czegoś innego, że u Ciebie się rozjeżdża. Ciężko powiedzieć na sucho.

Jeśli koniecznie musi być ten absolute (choć pewnie nie musi ;)) to pozostaje chyba tylko js i manipulowanie margin-top w #include_clear.

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Czytam i oczom nie wierze.
po 1 zachowujecie się jak dzieci, po 2 autor podał skrawek kodu myśląc ze reszta kodu, a często gęsto "rodzic", nie ma wpływu na to co się dzieje.
Boisz się oceny innych? podaj kod, link, podam ci rozwiązanie

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Czytam i oczom nie wierze.
po 1 zachowujecie się jak dzieci, po 2 autor podał skrawek kodu myśląc ze reszta kodu, a często gęsto "rodzic", nie ma wpływu na to co się dzieje.
Boisz się oceny innych? podaj kod, link, podam ci rozwiązanie

konto usunięte

Temat: Pozycjonowanie absolutne środkowego elementu a przyrost...

Krzysztof Tomczyk:
Czytam i oczom nie wierze.
po 1 zachowujecie się jak dzieci, po 2 autor podał skrawek kodu myśląc ze reszta kodu, a często gęsto "rodzic", nie ma wpływu na to co się dzieje.
Boisz się oceny innych? podaj kod, link, podam ci rozwiązanie

Przeczytaj to, przeredaguj i wklej jeszcze raz :>



Wyślij zaproszenie do