[CSS] Float...

[Yano]

Kurcze, albo mam jakąś blokadę albo czegoś nie rozumiem...

Mam taki CSS (kolorki dla ułatwienia):

Kod: Zaznacz cały

#main{width:600px;border:1px solid #f16}
#left{width:200px;background-color:#1f6;float:left}
#right{width:300px;background-color:#16f}

i taki html:

Kod: Zaznacz cały

<div id="main">
 <div id="left">lewy</div>
 <div id="right">prawy<br />Czemu tak?</div>
</div>

Czemu #right jest dociągnięty do lewej strony? Wydawało mi się, że powinien być obok #left. Do tego zawartość #right "oblewa" mi #left.
Jeśli dla #right dam float:right; to owszem, działa, ale za to #main nagle przestaje mieć jakąkolwiek wysokość i jakiekolwiek dalsze warstwy poza #main są przykrywane przez #left i #right.
Wydawało mi się, że skoro #left i #right są w #main, to #main powinien dopasować wysokość do wysokości elementów w środku. A one jakby "wyłażą" z niego

[quiris]

Czemu #right jest dociągnięty do lewej strony? Wydawało mi się, że powinien być obok #left. Do tego zawartość #right "oblewa" mi #left.

Wszystko jest poprawnie. Kazałeś #left pływać przy lewej stronie no to pływa, #right oblewa pływający element tak jak powinno to być.

Jeśli dla #right dam float:right; to owszem, działa, ale za to #main nagle przestaje mieć jakąkolwiek wysokość i jakiekolwiek dalsze warstwy poza #main są przykrywane przez #left i #right.

Ponieważ elementy którym nakazujesz pływać są wyjmowane z układu dokumentu, dlatego w #main tak naprawdę nic nie ma i dlatego #main ma zerową wysokość. Możesz nadać #main własność height i będzie ok.
Żeby zapobiec przykrywaniu dalszych warstw przez pływające elementy nadaj pierwszej z nich własność clear: both

[Yano]

Wszystko jest poprawnie. Kazałeś #left pływać przy lewej stronie no to pływa, #right oblewa pływający element tak jak powinno to być.

No w sumie tak. Tylko że #right jako element blokowy chyba jednak powinien znaleźć się po prawej stronie elementu z float:left. Chyba muszę się zagłębić w W3C, bo mi się już plącze wszystko...

Ponieważ elementy którym nakazujesz pływać są wyjmowane z układu dokumentu, dlatego w #main tak naprawdę nic nie ma i dlatego #main ma zerową wysokość. Możesz nadać #main własność height i będzie ok.

To w takim razie Opera źle robi, bo w takim wypadku jak opisałem czerwony border pojawia się wokół obszaru wyznaczanego przez oba elementy sformatowane przez float. Identycznie jest w IE. Tylko Mozilla zamiast prostokąta wyświetla czerwoną kreskę na górze dokumentu. Czemu tak?

Żeby zapobiec przykrywaniu dalszych warstw przez pływające elementy nadaj pierwszej z nich własność clear: both

Do tego już doszedłem. Po prostu chyba za długo siedzę nad jedną rzeczą i mi już się plącze wszystko. Chyba jednak rozwiążę tą sprawkę inaczej...

[quiris]

Ponieważ elementy którym nakazujesz pływać są wyjmowane z układu dokumentu, dlatego w #main tak naprawdę nic nie ma i dlatego #main ma zerową wysokość. Możesz nadać #main własność height i będzie ok.

To w takim razie Opera źle robi, bo w takim wypadku jak opisałem czerwony border pojawia się wokół obszaru wyznaczanego przez oba elementy sformatowane przez float. Identycznie jest w IE. Tylko Mozilla zamiast prostokąta wyświetla czerwoną kreskę na górze dokumentu.

Masz rację Opera źle to wyświetla. To znany błąd

[Domel]

Tak CSS 2 ma skromne mozliwosci w kontekwscie "srednio" skomplikowanych lajaltow. Ale w CSS 3 bedzie wiele nowych wlasnosci bardziej automatyzujacych prace np w Twoim wypadku column-*. BTW kiedys w Netscape 4 myl znacznik multicol (czy jakos tak), ktory dawal takie mozliwosci.

[Yano]

Tak CSS 2 ma skromne mozliwosci w kontekwscie "srednio" skomplikowanych lajaltow. Ale w CSS 3 bedzie wiele nowych wlasnosci

Qrde, to niech ten CSS3 w końcu zrobią a z roadmapy wynika, że jeszcze hu hu.. kawał czasu
Nic to. kombinuję teraz z drugiej strony - może uda mi się ominąć braki CSS2.

[Domel]

Qrde, to niech ten CSS3 w końcu zrobią a z roadmapy wynika, że jeszcze hu hu.. kawał czasu

Ide o zaklad, ze implementacja CSS 3 w przegladarkach bedzie dluzej trwala

[Yano]

Ide o zaklad, ze implementacja CSS 3 w przegladarkach bedzie dluzej trwala

Nie zakładam się z Tobą
Ale zastanawia mnie jedno - czy nowy IE (hehe.. brzmi jak oksymoron ) będzie obsługiwał chociaż część CSS3, bo to mniej więcej jakoś w podobnym okresie mają wyjść...

[Gandalf]

Jassne... Nowy IE z tego co widac w alphach Longhorna nie rozni sie praktycznie niczym w obsludze standardow od IE6.

[Yano]

Może jeszcze go nie napisali od nowa, tak jak systemu i narazie korzystają z IE6? Przecież to jeszcze 2 lata zanim wyjdzie system...

[quiris]

Może jeszcze go nie napisali od nowa, tak jak systemu i narazie korzystają z IE6? Przecież to jeszcze 2 lata zanim wyjdzie system...

Tia. A Świstak siedzi i zawija... Ja w to nie wierzę. Po co mają ulepszać coś co zajmuje 95% rynku? Musieliby mieć ważny powód marketingowy, by tak zrobić. Teraz mają inne zmartwienia. Linux jest dla nich solą w oku...

[Yano]

Linuxa na początku lekceważyli, potem się wyśmiewali z niego a teraz mają z nim kłopot. My obecnie jesteśmy na etapie lekceważenia.
Jeśli nie zrobią nic z IE, to za te 2 lata się może okazać, że już nie ma 95% rynku. A Europa już się opowiedziała za OpenSource. W Azji MS też nie ma lekko. Więc ja uważam, że idzie ku lepszemu. Powoli, ale jednak do przodu.

[marcoos]

Może jeszcze go nie napisali od nowa, tak jak systemu i narazie korzystają z IE6? Przecież to jeszcze 2 lata zanim wyjdzie system...

Engine Trident, na którym opiera się IE6 osiągnął już kres swoich możliwości. To, że w wyciekłych buildach Longhorna IE wykorzystuje Tridenta to IMHO sytuacja przejściowa. Microsoft ma już gotowy znacznie lepszy engine - Tasman, na którym opierał się IE for Mac. Samo IE dla Maka to przeszłość, ale ten engine został znacznie ulepszony od czasów MacIE 5.2 i wszedł w skład aplikacji klienckiej MSN for Mac. Tasman ma być obecnie portowany na Windows, myślę że do 2006 roku zdążą go przenieść i IE 7 będzie się do czegoś nadawać...

[quiris]

Tasman ma być obecnie portowany na Windows, myślę że do 2006 roku zdążą go przenieść i IE 7 będzie się do czegoś nadawać...

To bardzo ciekawe. Proszę o źródła tych rewelacji .

[Yano]

Wyguglałem jedynie tyle, że Tasman to silnik wykorzystany w IE na Makówce i że został usprawniony mocno do Tridenta, który to jest w windowsowym IE.
Natomiast nic nt. portowania nie znalazłem

Można tutaj brać na zdrowy rozsądek - skoro engine MacIE się sprawdził i był lepszy od WinIE to lepiej rozwinąć ten lepszy. IMO dlatego MS zaprzestało supportu IE na Maca, bo obecnie pewnie siedzą nad przystosowaniem go do potrzeb Windowsa.
Nie zmienia to jednak faktu, że od czasów MacIE się trochę zmieniło w standardach, a zanim zostanie wypuszczony IE7 zmieni się jeszcze więcej. Tak czy inaczej mają chłopcy trochę roboty jeśli chcą dogonić lepsze przeglądarki...

[quiris]

Nie zmienia to jednak faktu, że od czasów MacIE się trochę zmieniło w standardach, a zanim zostanie wypuszczony IE7 zmieni się jeszcze więcej. Tak czy inaczej mają chłopcy trochę roboty jeśli chcą dogonić lepsze przeglądarki...

W niektórych obszarach Tasman (MSN dla Mac OS X) przegonił Mozillę, Operę i Safari:
http://www.macedition.com/cb/resources/ ... ctors.html

A tutaj jeszcze wsparcie dla CSS2, które w Tasmanie jest znakomite:
http://www.macedition.com/cb/resources/ ... pport.html

[marcoos]

Tasman ma być obecnie portowany na Windows, myślę że do 2006 roku zdążą go przenieść i IE 7 będzie się do czegoś nadawać...

To bardzo ciekawe. Proszę o źródła tych rewelacji .

Tantek Celik (autor Tasmana) ciągle go rozwija, mimo zaprzestania MacIE.

O portowaniu Tasmana na Windowsa plotki krążą od dłuższego czasu. Ponieważ są to _plotki_, napisałem "ma być" a nie "jest"...

Plotki te wydają się jednak o tyle prawdopodobne, że Trident naprawdę do dalszej rozbudowy się już nie nadaje (przy zachowaniu jakiej-takiej jakości i przejrzystości - sposób, w jaki się wymusza przezroczystość PNG jest tu najlepszym przykładem), więc MS tak czy siak musi stworzyć nowy endżin dla IE/Win.