Robert C.

Robert C. Starszy Programista,
Multi Packaging
Solutions Bialystok
...

Temat: layout na jeden ekran

Grafik zaprojektował taki oto design:

Obrazek


Założenie jest takie, że strona nie ma się przewijać, wszystko mieści się na jednym ekranie.
Nie posiadam zaawansowanej znajomości CSS-a i o ile jakoś jestem w stanie poradzić sobie z t-l, t-r, c-l, c-r, to trzy dolne warstwy przyprawiają mnie o skurcze żołądka :)
Mają one być wyrównane do dolnej krawędzi okna, b-l do lewej, b-r do prawej i są one ustalonej szerokości; b-c ma szerokość powiedzmy min:150. Oczywiście można zrobić z position:absolute, ale przy zmniejszeniu okna warstwy zachodzą na siebie, co jest niepożądane.
Warstwy c-l i c-r powinny leżeć określonej odległości od krawędzi odpowiednio lewej i prawej okna przeglądarki.
Oczywiście przypadek zmniejszenia okna, czy oglądania w dramatycznie niskiej rozdzielczości to wyjątki kiedy wszystko może nie mieścić się na jednym ekranie.

bardzo proszę o możliwie szybką pomoc o ile jest to wykonalne :)
pozdrawiamRobert C. edytował(a) ten post dnia 08.04.09 o godzinie 21:25

Temat: layout na jeden ekran

Witam

Najpierw próbowałbym określić szerokości elementów w procentach ekranu.

c-l {
float:left;
margin-left:Xpx;
width:30%;

}
c-r {
float:right;
margin-right:Ypx;
width:40%;
}

b-l, b-c, b-r {
float:left;
width:33%;
}

b-l, b-c, br w divie o pozycji absolutnej bottom:0px; i clear:both;Michał Żuk edytował(a) ten post dnia 08.04.09 o godzinie 22:46

konto usunięte

Temat: layout na jeden ekran

Jeśli coś na siebie zachodzi to korzystaj z określania minimalnych wymiarów elementów nadrzędnych (np. body): min-width, min-height.
Wtedy po osiągnięciu minimalnego wymiaru po prostu pojawią się paski przewijania, a układ się nie rozsypie.

PS:
Michał Żuk:
c-l {
float:left;
margin-left:Xpx;
width:30%;

}
c-r {
float:right;
margin-right:Ypx;
width:40%;
}

Nigdy, przenigdy nie mieszaj jednostek stałych z relatywnymi, jeśli te wymiary są ze sobą powiązane.Dawid L. edytował(a) ten post dnia 08.04.09 o godzinie 23:09

konto usunięte

Temat: layout na jeden ekran

apropo minimalnych wymiarów... ze wzgl na ie6 zapisałbym to tak: width: xxx; width: auto!important; min-width: xxx;
Robert C.

Robert C. Starszy Programista,
Multi Packaging
Solutions Bialystok
...

Temat: layout na jeden ekran

Dzięki wszystkim za cenne wskazówki.
Bardzo przydatne.
Jednak ze względu na parę innych wymagań (ukrywanie, przesuwanie warstw) muszę zaprząc jeszcze javascript, a konkretnie jQuery...

pozdrawiam

konto usunięte

Temat: layout na jeden ekran

Robert C.:
Jednak ze względu na parę innych wymagań (ukrywanie, przesuwanie warstw) muszę zaprząc jeszcze javascript, a konkretnie jQuery...

jeśli chcesz używać jQuery to sformatuj stronę również przy pomocy funkcji css z tego frameworka ;)

konto usunięte

Temat: layout na jeden ekran

Rafał Śmiłowski:
Robert C.:
Jednak ze względu na parę innych wymagań (ukrywanie, przesuwanie warstw) muszę zaprząc jeszcze javascript, a konkretnie jQuery...

jeśli chcesz używać jQuery to sformatuj stronę również przy pomocy funkcji css z tego frameworka ;)

używanie JSa do rzeczy, które da się zrobić gołym CSS to IMHO przerost formy nad treścią... chyba że źle Cię zrozumiałem...

konto usunięte

Temat: layout na jeden ekran

Piotr Lewandowski:
używanie JSa do rzeczy, które da się zrobić gołym CSS to IMHO przerost formy nad treścią... chyba że źle Cię zrozumiałem...

masz rację że czasem to przerost formy nad treścią - ale js pozwala na osiągnięcie efektów, które gołym css czasem sprawiają problemy np. w "starym dobrym IE6"

konto usunięte

Temat: layout na jeden ekran

Rafał Śmiłowski:
Piotr Lewandowski:
używanie JSa do rzeczy, które da się zrobić gołym CSS to IMHO przerost formy nad treścią... chyba że źle Cię zrozumiałem...

masz rację że czasem to przerost formy nad treścią - ale js pozwala na osiągnięcie efektów, które gołym css czasem sprawiają problemy np. w "starym dobrym IE6"

być może... ale to poproszę jakiś konkretny przykład...

konto usunięte

Temat: layout na jeden ekran

Piotr Lewandowski:
być może... ale to poproszę jakiś konkretny przykład...

np. przezroczystość obiektu

konto usunięte

Temat: layout na jeden ekran

Rafał Śmiłowski:
Piotr Lewandowski:
być może... ale to poproszę jakiś konkretny przykład...

np. przezroczystość obiektu

przykład chyba nie do końca właściwy, bo ZTCW brak obsługi przezroczystego PNG (bo o to chodzi) wynika nie z wady CSSa ale złej implementacji w samym IE6... choć owszem, do "naprawy" przezroczystości w IE może służyć mechanizm expressions() czyli nic innego jak JS w CSS...

zresztą popularność IE6 powoli, choć nieustannie spada, więc niedługo ten problem przestanie istnieć...Piotr Lewandowski edytował(a) ten post dnia 10.05.09 o godzinie 18:07

konto usunięte

Temat: layout na jeden ekran

Piotr Lewandowski:
Rafał Śmiłowski:
Piotr Lewandowski:
być może... ale to poproszę jakiś konkretny przykład...

np. przezroczystość obiektu

przykład chyba nie do końca właściwy, bo ZTCW brak obsługi przezroczystego PNG (bo o to chodzi) wynika nie z wady CSSa ale złej implementacji w samym IE6... choć owszem, do "naprawy" przezroczystości w IE może służyć mechanizm expressions() czyli nic innego jak JS w CSS...

miałem na myśli opacity
zresztą popularność IE6 powoli, choć nieustannie spada, więc niedługo ten problem przestanie istnieć...Piotr Lewandowski edytował(a) ten post dnia 10.05.09 o godzinie 18:07

oby jak najszybciej ;)

konto usunięte

Temat: layout na jeden ekran

Rafał Śmiłowski:
Piotr Lewandowski:
Rafał Śmiłowski:
Piotr Lewandowski:
być może... ale to poproszę jakiś konkretny przykład...

np. przezroczystość obiektu

przykład chyba nie do końca właściwy, bo ZTCW brak obsługi przezroczystego PNG (bo o to chodzi) wynika nie z wady CSSa ale złej implementacji w samym IE6... choć owszem, do "naprawy" przezroczystości w IE może służyć mechanizm expressions() czyli nic innego jak JS w CSS...

miałem na myśli opacity
ale to zdaje się w dalszym ciągu wina przestarzałej przeglądarki a nie samego CSSa... zresztą jak pisałem wcześniej - IE6 jest out...
zresztą popularność IE6 powoli, choć nieustannie spada, więc niedługo ten problem przestanie istnieć...Piotr Lewandowski edytował(a) ten post dnia 10.05.09 o godzinie 18:07

oby jak najszybciej ;)

w urządach i korporacjach i tak będą trzymać tego bubla... ale to już inna historia...

Następna dyskusja:

Layout - pytanie




Wyślij zaproszenie do