[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

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ł
% 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

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

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?

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?

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