[CSS][HTML] 3 kolumny Opcje

[Gray]

Hej, chciałbym zrobić z pozoru prosty układ 3 kolumn - lewa środek i prawa. Lewa i prawa mają stałą szerokość a środkowa rozciąga się. Robiłem po swojemu i nie wychodziło, zajrzałem do kultowego poradnika i znalazłem to:

http://www.kurshtml.edu.pl/css/plynny_szablon,szablon.html

no i jest tam jak zrobić 3 kolumny tylko że... nie działa to tak jak powinno, lewa kolumna jest ok, środkowa się rozciąga a prawa ustawia się po prawej stronie tyle, że pod środkową... ktoś orientuje się o co chodzi?

Pozdrawiam.

[!*!]

http://jsfiddle.net/yUDZm/

[MlodyJNTR]

lewa i środkowa kolumna jest za długa zmień width.

[cykcykacz]

Może spróbuj http://www.java2s.com/Code/HTMLCSS/Layout/3column.htm

Nie mniej zasada ja zazwyczaj robię tak że daję na wszystkie 3 kolumny float: left. ablo float right jak kto woli potem ustawiam szerokości.

[skowron-line]

http://jsfiddle.net/R7wc3/

[pedro84]

http://jsfiddle.net/yUDZm/

Warto wspomnieć o wspraciu przeglądarek ;)

[!*!]

Warto wspomnieć o wspraciu przeglądarek (IMG:style_emoticons/default/wink.gif)

Przestań, bo jeszcze ktoś uwierzy.

[Gray]

a da się jakoś z pominieciem display table? i żeby wysokość kolumn była niezależna od pozostałych. Skowron podałeś 3 kolumny float left o % rozmiarach, nie o to mi chodziło. No i nie chcę używać javy...

no i czy ktoś wie dlaczego przykład z mojego 1 posta nie działa? jeden div float left o okreslonej szerokosci, drugi float right też o okreslonej szerokości no i div po środku bez float z ustawionymi margin left i right takimi samymi jak szerokości bocznych DIVów

Ten post edytował Gray 11.04.2013, 14:02:11

[skowron-line]

a da się jakoś z pominieciem display table? i żeby wysokość kolumn była niezależna od pozostałych. Skowron podałeś 3 kolumny float left o % rozmiarach, nie o to mi chodziło. No i nie chcę używać javy...

A kto CI coś w javie napisał (IMG:style_emoticons/default/questionmark.gif)
% na px łatwo zmienić, tylko ze tak się nie robi ze względu na różne rozdzielczości monitorów.

[!*!]

a da się jakoś z pominieciem display table? i żeby wysokość kolumn była niezależna od pozostałych. Skowron podałeś 3 kolumny float left o % rozmiarach, nie o to mi chodziło. No i nie chcę używać javy...

W skrócie, bez js? Nie. Wysokość przy float, jest niezależna. display table tylko to wyrównuje.

[pedro84]

Przestań, bo jeszcze ktoś uwierzy.

http://quirksmode.org/css/css2/display.html

Zdziwiłbyś się, w ilu projektach wsparcie IE6 (bo o IE7 już nie wspomnę), jest wymagane.

a da się jakoś z pominieciem display table? i żeby wysokość kolumn była niezależna od pozostałych. Skowron podałeś 3 kolumny float left o % rozmiarach, nie o to mi chodziło. No i nie chcę używać javy...

Java != Javascript.

Co Ci w rozwiązaniu skowrona nie pasuje, bo nie łapię?

[!*!]

http://quirksmode.org/css/css2/display.html
Zdziwiłbyś się, w ilu projektach wsparcie IE6 (bo o IE7 już nie wspomnę), jest wymagane.

Nie musisz mi tego pisać. Jednak jak w 2013 wspierasz IE6, to już samo mówi za siebie. IE6/7 ledwo jest widziane w rankinach i z miesiąca na miesiąc ich liczba maleje, dla 0,03% nie warto zawracać sobie głowy.
Albo robi się coś dobrze, albo wcale. A autor nie wspomniał że jest wymóg wspierania przeglądarki z 2001.

[Gray]

Skowron ustawił wszystkie kolumny na 33% ja potrzebuję żeby lewa i prawa miały po 200px szerokości a środkowa żeby rozciągała się w zaleznosci od szerokości monitora (IMG:style_emoticons/default/smile.gif)

co do javy chodziło mi o JS i zbyt pochopnie o tym napisałem...

Ten post edytował Gray 11.04.2013, 14:10:45

[!*!]

Skowron ustawił wszystkie kolumny na 33% ja potrzebuję żeby lewa i prawa miały po 200px szerokości a środkowa żeby rozciągała się w zaleznosci od szerokości monitora (IMG:style_emoticons/default/smile.gif)

co do javy chodziło mi o JS i zbyt pochopnie o tym napisałem...

I nie wiesz jak zmienić % na px? Podpowiem że przy "width".

[Gray]

... wiem jak to zamienić ale jak lewą dam na 200px, prawą na 200px to środkowej przecież nie zostawię na 33%...

[skowron-line]

Musisz dla kolumn które mają mieć 200px nadać tą samą klase w której zdefinujesz szerokość, a dla środkowej osobną w której zdefiniujesz szerokość.

Ale jeżeli chcesz żeby szerokość środkowej kolumny była zależna od rozdzielczości to albo
- javascript
- responsive design http://webdesignerwall.com/tutorials/css3-media-queries po chwili zastanowienia chyba jednak nie pasuje

Ten post edytował skowron-line 11.04.2013, 14:23:18

[!*!]

@Gray a co Ci się nie podoba w display:table? Dla IE6/7 użyj obejść np. http://tanalin.com/en/projects/display-table-htc/ lub JS i przestań się pieścić. Zrób to jak trzeba i nie martw się że za którymś razem float się rozjedzie. Poza tym mam dziwne wrażenie że float przy 100% jednej kolumny nie zadziała, tu by było trzeba pomyśleć nad position, ale po co jak jest display:table.

[Gray]

@!*! widziałeś przykład który podałem w 1 poście? Byłby idealny i teoretycznie powinno działać tyle, że nie działa ale dlaczego? (IMG:style_emoticons/default/biggrin.gif)

Ten post edytował Gray 11.04.2013, 14:31:30

[!*!]

@!*! widziałeś przykład który podałem w 1 poście? Byłby idealny i teoretycznie powinno działać tyle, że nie działa ale dlaczego? (IMG:style_emoticons/default/biggrin.gif)

Nie działa, bo jest źle zrobiony (po staremu).

[Gray]

po staremu, aha... wierzyć mi się nie chce, że na pozór coś tak prostego wymaga takich kombinacji...

[!*!]

Bo to jest proste. Patrz tu http://jsfiddle.net/xC7uZ/11/ tylko ze to Ci się rozleci.

Ten post edytował !*! 11.04.2013, 14:46:47

[Gray]

W jakim przypadku się rozleci? swoją drogą to jest jak w moim przykładzie z 1 postu... tylko inna kolejność DIVów, oj ja niewiedziący (IMG:style_emoticons/default/wink.gif)

[!*!]

W jakim przypadku się rozleci? swoją drogą to jest jak w moim przykładzie z 1 postu... tylko inna kolejność DIVów, oj ja niewiedziący (IMG:style_emoticons/default/wink.gif)

W każdym jeśli ekran będzie mniejszy niż zawartość bloku środkowego. I nie wiem jak patrzysz, ale ja tam nie widzę position czy overflow.

[Gray]

Nie no jasne, że się rozleci jesli zawartość będzie większa ale to by był problem przy każdym kodowaniu moze w innych przypadkach wyglądało by to ładniej ale nadal źle. Ja nie planuję w środku dawać dużych elementów stałych, ewentualnie skalujące się DIVy i tekst. Position do FF i chrome zbędne a overflow można dodać (IMG:style_emoticons/default/smile.gif)

[pedro84]

Nie musisz mi tego pisać. Jednak jak w 2013 wspierasz IE6, to już samo mówi za siebie. IE6/7 ledwo jest widziane w rankinach i z miesiąca na miesiąc ich liczba maleje, dla 0,03% nie warto zawracać sobie głowy.
Albo robi się coś dobrze, albo wcale. A autor nie wspomniał że jest wymóg wspierania przeglądarki z 2001.

Broń Boże, nie wspieram (domyślnie). Ale skoro mówisz 0,03% to naprawdę masz specyficzne projekty, albo małe rozeznanie rynku. Czasem zdarza się w firmie klient, dla którego wsparcie IE7 czy IE6 to podstawa, a w statystykach mają ca 10%-15%. Nawet u mnie na firmówce IE7 - 11%, IE6 2%.

[!*!]

Czasem zdarza się w firmie klient, dla którego wsparcie IE7 czy IE6 to podstawa, a w statystykach mają ca 10%-15%. Nawet u mnie na firmówce IE7 - 11%, IE6 2%.

Wtedy składam mu/im propozycję nie do odrzucenia i problem wsparcia produktu z 2001 znika. Kwestia podejścia do klienta, a nie sztuczne podtrzymywanie "standardu".

[pedro84]

Wtedy składam mu/im propozycję nie do odrzucenia i problem wsparcia produktu z 2001 znika. Kwestia podejścia do klienta, a nie sztuczne podtrzymywanie "standardu".

Ale bzdury gadasz. Wszystko jeszcze zależy od targetu, do którego dany serwis jest adresowany. Tu nie o żadne standardy chodzi, tylko o to, żeby klientowi dostarczyć to, czego oczekuje. Jeśli jego targetem jest grupa klientów z Texasu, wiek 50+, często używająca Windows 98 (ale za to mająca sporo $ przez co jest dla niego ważna), to dlaczego nie warto dorobić? Faktycznie, kwestia podejścia do klienta i samego klienta (ile Ci może $ zostawić).
Z mojej strony EOT, bośmy syf zrobili.