GoldenLine
Zaloguj się

konto usunięte

Temat: <div> o szerkości 100%

Witam, może ktoś z Was mi wyjaśni dlaczego



<div style="width: 100%; height: 103px; position: absolute; left: 0; background-image: url(images/footer_background.jpg); background-repeat: repeat-x; " ></div>


na FF i Chrome działa, jak powinno, czyli rozciąga diva na całą szerokość <body> (w tym przypadku), a na IE6 nie, tylko po prawej stronie zostawia kawałek pusty?

I co zrobić, żeby i w najpaskudniejszej przeglądarce działało, jak trzeba?
Link do wypowiedziLink

konto usunięte

Temat: <div> o szerkości 100%

Krzysztof P:
tylko po prawej stronie zostawia kawałek pusty?
co masz na myśli zostawia kawałek pusty??? scroll?

bo jeśli o to chodziło to dopisz w css
html, body { overflow: hidden; }Krzysztof J. edytował(a) ten post dnia 10.11.08 o godzinie 00:54
Link do wypowiedziLink

konto usunięte

Temat: <div> o szerkości 100%

Nie, nie scroll.
Po prostu nie dociąga do prawej strony.

Zobacz:
http://itwatch.pl/testpos.html
Link do wypowiedziLink

konto usunięte

Temat: <div> o szerkości 100%

Krzysztof P:
Nie, nie scroll.
Po prostu nie dociąga do prawej strony.

Zobacz:
http://itwatch.pl/testpos.html

aaa :) ok
wstawiaj sobie to co pare linijek niżej do każdego nowego css, załatwi Ci kupe zastanawiania się dlaczego w ie jest inaczej, ja wstawiłem u siebie i u mnie było ok.

Każda przeglądarka ma zdefinowane style, więc w IE np. dodaje sobie jakies marginesy itp.

to do stylu na początku

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: none;
}

a to, aby strona była na całej szerokości w IE
html, body { overflow: hidden; }Krzysztof J. edytował(a) ten post dnia 10.11.08 o godzinie 01:05
Link do wypowiedziLink

konto usunięte

Temat: <div> o szerkości 100%

Dzięki wielkie, wszystko działa:)
Link do wypowiedziLink

konto usunięte

Temat: <div> o szerkości 100%

Resetowanie paddinga i margina dla wszystkich (większości elementów) nie jest dobrym pomysłem...

Pozatym niektóre elementy które podałeś są elementami liniowymi i nie mają domyślnie żadnych marginesów/paddingów

Co do tematu tego postu, to w podanym przypadku nie trzeba pozycjonować za pomocą position: absolute;.
Link do wypowiedziLink
Kasia Polus

Kasia Polus Designer. powiedzmy.

Temat: <div> o szerkości 100%

Marcin Baran:
Resetowanie paddinga i margina dla wszystkich (większości elementów) nie jest dobrym pomysłem...
bo? lepiej dodawać do każdego to samo tyle że osobno? Fakt niektóre elementy są liniowe, ale powiedz to każdej przeglądarce. Teoria sobie, a w pewym momencie zawsze coś się rypnie bo któraś przeglądarka ma takie widzimisie. Jak nie chcą po dobroci to czasem na chamca trzeba.
Link do wypowiedziLink
Sławomir Furgała

Sławomir Furgała Programista

Temat: <div> o szerkości 100%

Kasiu,

zgadzam się z tobą w 100%. Jutro może wyjść nowa przeglądarka która będzie sobie nadawała domyślne wartości "padding" i "margin".

Mimo tego,uważam że taka walka - to walka z wiatrakami. Wszyscy próbujemy wplatać standardy wszędzie tam - gdzie w ogóle ich nie ma. Niemożliwe jest odpalenie strony w pełni zgodnej z xhtml w IE (wystarczy spróbować: index.xhtml). W ogóle nie da się napisać strony zgodnej ze wszystkimi przeglądarkami... można wyłapać tylko te popularne - ale to i tak jest już spory nakład pracy.

Rewolucja narzuciła na nas konieczność klepania w modnych "DIV-ach", a niekiedy taka praca to grzebanie w.. błocie - bo masę rzeczy da się zrobić prościej. Znacznik table również znajduje się w specyfikacji xHTML-a 1.0 (strict, transitional, framset) i xHTML-a 1.1 - dlaczego więc wszyscy chcą mieć DIV-y?

Jedyne co możemy to nie pozwalać żeby przeglądarka uruchamiała: quirks mode. Odsyłam wszystkich zainteresowanych tematem do strony: quirksmode.org.

Pozdrawiam:
Sławek F.
Link do wypowiedziLink
Kasia Polus

Kasia Polus Designer. powiedzmy.

Temat: <div> o szerkości 100%

dlatego ja przerzucam się na strony 100% full screen flash :) wszędzie wygląda tak samo, chyba, że w ogóle nie wygląda przez brak playera. Ale jak już wygląda to tak wygląda...
Link do wypowiedziLink
Michał Sznurawa

Michał Sznurawa Scala Developer

Temat: <div> o szerkości 100%

No to mamy offtop:)
Krzysztof J.:

to do stylu na początku

html, body, (...)
{
margin: 0;
padding: 0;
border: none;
}

ja tam wolę *{margin:0;padding:0;}

A tutaj narzędzie Meyera do resetowania styli http://meyerweb.com/eric/tools/css/reset/

Sławomir Furgała:

Mimo tego,uważam że taka walka - to walka z wiatrakami. (...)

Kontrreformator?;)

Standardów się nie wplata, standardy się stosuje. Nikt nikomu nic nie narzucił, Jedynie się zaleca;) Jeśli się ma pewne doświadczenie, to zsynchronizowanie wyglądów pod ie6,7,firefox,opera i konqueror wcale nie wymaga wcale wielkiego nakładu pracy.
Nie musisz też przecież stosować xhtml, żeby być zgodnym ze standardami;] możesz tworzyć stronki zgodnie z html4.01.
A divy zamiast table to raczej kwestia semantyki, a nie standardów (w sensie "specyfikacji"). No i standardów dobrej pracy.
Link do wypowiedziLink

konto usunięte

Temat: <div> o szerkości 100%

Krzysztof P:
Witam, może ktoś z Was mi wyjaśni dlaczego



<div style="width: 100%; height: 103px; position: absolute; left: 0; background-image: url(images/footer_background.jpg); background-repeat: repeat-x; " ></div>


na FF i Chrome działa, jak powinno, czyli rozciąga diva na całą szerokość <body> (w tym przypadku), a na IE6 nie, tylko po prawej stronie zostawia kawałek pusty?

I co zrobić, żeby i w najpaskudniejszej przeglądarce działało, jak trzeba?

a tak a propo width: 100%; ew. height: 100%;
staraj się omijać tą definicje jak tylko się da :) - w IE 100% to zupełnie coś innego jak w innych przeglądarkach
Michał Sznurawa:
ja tam wolę *{margin:0;padding:0;}
zgadza się można i tak :)
Kasia Mrozek:
Kasiu, można prawie wszystko, a z tymi przeglądarkami ... da się to jakoś okiełznaćKrzysztof J. edytował(a) ten post dnia 10.11.08 o godzinie 10:55
Link do wypowiedziLink
Maciej Derewecki

Maciej Derewecki administracja i
zarządzanie
SharePoint

Temat: <div> o szerkości 100%

Dołączę się do dyskusji i dodam, że ja zamiast wymieniać długaśną listę "zeruję" tylko kilka elementów:

html, body, form, p {margin: 0; padding: 0; border: none;}


Z innymi raczej problemów nie miałem. Jeszcze czasami ul sprawia problemy w różnych przeglądarkach, ale to definiuję indywidualnie na potrzeby danego kontenera.

Poza tym:
w tym konkretnym przypadku position: absolute nie jest konieczne, wystarczy wyzerować marginesy.

Zalecałbym też jak najrzadsze używanie pozycjonowania absolutnego, bo przy różnych rozdzielczościach element znajdzie się w innym miejscu.

Takie coś ma sens jedynie przy stronach "przyklejonych" do lewej krawędzi. Jeżeli są wycentrowane to... kicha.

Jeszcze jedna rzecz:
width: 100%;

Elementy blokowe domyślnie wykorzystują 100% dostępnego im miejsca. W większości przypadków nie trzeba tego dodatkowo definiować.
Link do wypowiedziLink
Kasia Polus

Kasia Polus Designer. powiedzmy.

Temat: <div> o szerkości 100%

Krzysztof J.:
Kasiu, można prawie wszystko, a z tymi przeglądarkami ... da się to jakoś okiełznać
Nie mówiłam, że się nie da :)
Link do wypowiedziLink
Piotr Zimoch

Piotr Zimoch JavaScript Developer

Temat: <div> o szerkości 100%

polecam yahoo css reset
Link do wypowiedziLink
Piotr Zimoch

Piotr Zimoch JavaScript Developer

Temat: <div> o szerkości 100%

Maciej Derewecki:
Takie coś ma sens jedynie przy stronach "przyklejonych" do lewej krawędzi. Jeżeli są wycentrowane to... kicha.


Strony wyśrodkowane to kwestia odpowiedniego użycia mieszanki pozycjonowania absolutnego i relatywnego.
Link do wypowiedziLink
Kasia Polus

Kasia Polus Designer. powiedzmy.

Temat: <div> o szerkości 100%

Piotr Zimoch:
Strony wyśrodkowane to kwestia odpowiedniego użycia mieszanki pozycjonowania absolutnego i relatywnego.

a ja myślałam że wystarczy margin: 0 auto; ...
Link do wypowiedziLink

konto usunięte

Temat: <div> o szerkości 100%

Kasia Mrozek:
dlatego ja przerzucam się na strony 100% full screen flash :) wszędzie wygląda tak samo

To tylko teoria. W praktyce jednak czasem nie wygląda tak samo. Nie mam gotowego przykładu - ale już spotkałem się z tym, że nie jest "tak samo".

Poza koncepcją wdrażania stron flash, które są "piękne" czasem trzeba zwrócić uwagę na inne aspekty istnienia strony. Wiele form reklamy internetowej nie akceptuje flash - przez co klient posiadający taką stronę traci i to dużo.
Link do wypowiedziLink
Piotr Zimoch

Piotr Zimoch JavaScript Developer

Temat: <div> o szerkości 100%

Kasia Mrozek:
Piotr Zimoch:
Strony wyśrodkowane to kwestia odpowiedniego użycia mieszanki pozycjonowania absolutnego i relatywnego.

a ja myślałam że wystarczy margin: 0 auto; ...

Nie wyrazilem sie konkretnie, chodzilo mi o kwestie uzycia position:absolute; przy wysrodkowanych stronach (z użyciem margin:0 auto ;) ).
Link do wypowiedziLink
Kasia Polus

Kasia Polus Designer. powiedzmy.

Temat: <div> o szerkości 100%

Robert B.:
Poza koncepcją wdrażania stron flash, które są "piękne" czasem trzeba zwrócić uwagę na inne aspekty istnienia strony. Wiele form reklamy internetowej nie akceptuje flash - przez co klient posiadający taką stronę traci i to dużo.
Jeśli strona flash nie jest odpowiednia to nie jest proponowana. Wiem, że nie zawsze full flash jest dobrym rozwiązaniem. W większości przypadków nie jest.
Link do wypowiedziLink

konto usunięte

Temat: <div> o szerkości 100%

Takie coś ma sens jedynie przy stronach "przyklejonych" do
lewej krawędzi.

Nie chodziło o całą stronę przyklejoną do lewej krawędzi (bo ona była wyśrodkowana i tam żadnego :absolute nie używałem, ale o przyklejenie do lewej strony i rozciągnięcie na całą szerokość <body> jednego elementu.

Jeszcze raz dzięki za pomoc i całkiem ciekawy offtop:)Krzysztof P edytował(a) ten post dnia 10.11.08 o godzinie 22:25
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj