[CSS] DIV - dlaczego wychodzi poza obszar ?

0

dlaczego dzialanie tego kodu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>New Document</title> </head> <body>
poziomy
1
2
</body> </html> ```

wyglada tak:
user image
a nie tak:
user image

dlaczego DIVy z float wychodza poza glowny ? przeciez sa wewnatrz niego ??
jak to poprawic ??

0

może tak:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>New Document</title>
</head>
<body>
<div style="background-color: #F5F5E6; border: solid 1px #00f; height : 100%">
<div style="background-color: #ECF6FF; width: 90%; margin: 0 auto;">poziomy</div>
<div style="float: left; background-color: #ECF6FF; width: 45%; margin: 0px 10px;">1</div>
<div style="float: right; background-color: #ECF6FF; width: 45%; margin: 0px 10px;">2</div>
</div>
</body>
</html>
0

Niestety to rozwiazanie (height: 100%) działa tylko pod IE a pod FF dalej jest nie tak...
jakies inne sugestie ?

0 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>New Document</title>
</head>
<body>
<div style="background-color: #F5F5E6; border: solid 1px #00f;">
<div style="background-color: #ECF6FF; width: 90%; margin: 0 auto;">poziomy</div>
<div style="float: left; background-color: #ECF6FF; width: 45%; margin: 0px 10px;">1</div>
<div style="float: right; background-color: #ECF6FF; width: 45%; margin: 0px 10px;">2</div>
<div style="clear: both"></div>
</div>
</body>
</html>

Brzydkie rozwiązanie, ale taka jest specyfikacja (bo rodzic posiadający pływające dzieci dostosowuje sie do ich rozmiaru). Być może jeszcze trzeba ustawić wysokość dla tych pływających divów, ale nie sprawdzałem.

0
Dryobates napisał(a)

....Być może jeszcze trzeba ustawić wysokość dla tych pływających divów, ale nie sprawdzałem.

nie wysokosci juz nie trzeba ustalac...
teraz dziala wszedzie: IE, FF i Opera - wielkie dzieki [browar]

0

dodatkowo ustal dla kazdego elementu jakiemu dajesz float display:inline to usunie blad w IE ktory dodaje dodatkowe odstepy dla innych przegladarek nie wplynie to na wyswietlanie poniewaz element float automatycznie jest elementem blokowym

0

ciekawy temat :) to mam kolejne pytanie dlaczego jak usune border z glownego DIVa to ponownie pojawia sie problem...
czyli:

<div style="background-color: #F5F5E6;">
<div style="background-color: #ECF6FF; width: 90%; margin: 0 auto;">poziomy</div>
<div style="float: left; background-color: #ECF6FF; width: 45%; margin: 0px 10px;">1</div>
<div style="float: right; background-color: #ECF6FF; width: 45%; margin: 0px 10px;">2</div>
<div style="clear: both"></div>
</div>

czyli nie widzi tla background-color: #F5F5E6; z DIVa rodzica miedzy DIVami z float

0
ssnake napisał(a)

ciekawy temat :) to mam kolejne pytanie dlaczego jak usune border z glownego DIVa to ponownie pojawia sie problem...
(...)
czyli nie widzi tla background-color: #F5F5E6; z DIVa rodzica miedzy DIVami z float

To nie wiem skąd się bierze, ale rozwiązanie też jest. Zamiast tego zwykłego clear: both dać:
<div style="clear: both; height: 0.01em"></div>

0

mam pytanie OT - ten DIV'owy trend to wymyślił chociaż jakiś twórca przeglądarki jakiejś ? albo czy ta metoda ma jakieś wsparcie od twórców przeglądarek (bynajmniej nie chodzi mi o to czy wprowadzają w przeglądarki ich obsługę tylko że potwierdzili w jakimś wywiadzie czy czymś że są lepsze) bo coś mi się to strasznie prowizoryczne wszystko wydaje - nie mówiąc o tym że na większości stron zrobionych na divach przestawienie układu strony z "z lewej do prawej" na "z prawej do lewej" powoduje wyjechanie zawartości strony poza ekran

0

wystarczy wejsc chociazby na w3schools tam masz przyklad jak zbudowac uklad strony za pomoca DIV'ow uzywajac float jesli takei potwierdzenie Ciebie usatysfakcjonuje a BTW u mnie wyswietla sie dobrze ;] i jesli chodzi o Twoje pytanie sa lepsze poniewaz uklad stronki masz w CSS zrobiony a DIV'y sa troszke wydajniejsze od tabel tym bardziej jak tabela jest dosc skomplikowanie podzielona lub posiada jakies glupioe zagniezdzenia wtedy rozwiazanie za pooca DIV'ow sie sprawdza najlepij no i jak ktos wspomnial gdzies taki uklad jest bardziej przyjazny dl aprzegladarek tekstowych ktore tabel nie interpretuja w ogole

0
Adamo napisał(a)

bynajmniej nie chodzi mi o to czy wprowadzają w przeglądarki ich obsługę tylko że potwierdzili w jakimś wywiadzie czy czymś że są lepsze

To nie jest jakiś tam "tręd" tylko oddzielenie warstwy prezentacji od treści (albo jak wolisz formy od treści :)) które jest samo w sobie tematem rzeką.

Taki sposób projektowania strony można docenić między innymi gdy potrzebujesz całkowicie zmienić layout - możesz dokonać tego nie zaglądając w ogóle do kodu html'a, a jedynie zmieniając arkusz styli. Polecam obejrzenie:

http://www.csszengarden.com/ - wszystkie strony oparte są na jednym, nie zmienianym pliku html
http://incsspiracje.k12.one.pl/linki.html

Co do prowizoryczności - cóż.. nie od razu Kraków zbudowano, na razie te wszystkie standardy nie są w 100% dopracowane.

A jeśli żadne argumenty Cie nie przekonują to droga wolna - nikt Cie nie zmusza do div?ów ;)

0
Maker napisał(a)

a DIV'y sa troszke wydajniejsze od tabel

Jeżeli wydajność rozumiesz przez szybsze wyświetlanie w przeglądarkach, to niestety tutaj większość przeglądarek szybciej wyświetla tabelki, bo tabelki były wcześniej i pod nie było optymalizowane.
Gdzieś test widziałem. Chyba tylko safari lepiej wypadała przy divach niż przy tabelkach (ale mogę się mylić).

0
Dryobates napisał(a)

To nie wiem skąd się bierze, ale rozwiązanie też jest. Zamiast tego zwykłego clear: both dać:
<div style="clear: both; height: 0.01em"></div>

tak ale to dziala pieknie pod FF a pod IE zmienia wysokosc tego div'a o domyslna wysokosc czcionki, a jak sie dopiesze font-size: 0px; lub font-size: 0.01em; to znowu nie dziala pod FF :/
jakies inne rozwiazanie ??

0
Dryobates napisał(a)

Jeżeli wydajność rozumiesz przez szybsze wyświetlanie w przeglądarkach, to niestety tutaj większość przeglądarek szybciej wyświetla tabelki, bo tabelki były wcześniej i pod nie było optymalizowane.

ale wez pod uwage to ze tabela wyswietla sie dopiero kiedy zostana wczytane wszystkie wiersze i kolumny, wiec jesli zrobi sie layout na tabeli to mamy jakies sekundowe opoznienie w stosunku do divow...

0

konetener(div) ktory zaiwera da pozostale div'y uczyn tez jako float a problem z wysokosc bediesz mial rozwiazany

0
piechnat napisał(a)

ale wez pod uwage to ze tabela wyswietla sie dopiero kiedy zostana wczytane wszystkie wiersze i kolumny(...).
Bzdura! Tabele moga być i są wyswietlane na bieżąco!

0
Qyon napisał(a)
piechnat napisał(a)

ale wez pod uwage to ze tabela wyswietla sie dopiero kiedy zostana wczytane wszystkie wiersze i kolumny(...).
Bzdura! Tabele moga być i są wyswietlane na bieżąco!

w IE do wersji 6.0 włącznie tabele są pokazywane fucktycznie dopiero po załadowaniu wszystkich wierszy, ale to nie problem, bo można to ominąć, nie można całej strony dać w jedną tabelkę bo jeśli jest duża to będzie się ładowała godzinę i dopiero po tym się pokaże cała jednocześnie.

0
Qyon napisał(a)
piechnat napisał(a)

ale wez pod uwage to ze tabela wyswietla sie dopiero kiedy zostana wczytane wszystkie wiersze i kolumny(...).
Bzdura! Tabele moga być i są wyswietlane na bieżąco!

moze to troche rozswietli Twoj umysl co do ladowania tabel:
http://www.evolt.org/article/10_new_ways_to_speed_up_download_time/20/60294/

0

Wiesz mało mnie obchodzi teoria w tym akurat wypadku: widzę jak jest.

0
Qyon napisał(a)

Wiesz mało mnie obchodzi teoria w tym akurat wypadku: widzę jak jest.

to zobacz to pod IE:

<?
    for ($i = 0; $i < 8192; $i++) $s .= '#';
    echo '<!-- ' . $s . '-->';
?>
<table>
  <tr>
    <td>Pierwszy wiersz</td>
  </tr>
<?  
    flush();
    sleep(5);   
?>
  <tr>
    <td>Drugi wiersz</td>
  </tr>
</table>

1 użytkowników online, w tym zalogowanych: 0, gości: 1