Zakałdka ulubione w XP a marginesy

[Sanchez Spinoza]

Otóż dlaczego tak się dzieje że na jakiejś stornie która wyświetla się prawodłowo przy włączeniu w IE na XP zakładki ULUBIONE ( ta gwiazdka) lub HISTORIA strona się zwęża i elementy div się nakłądają na siebie lub ukłądają się pod sobą. Jak tego uniknąć? czy to normalne zjawosko? Mam klienta który na to naciska i nie wiem co mu powiedzieć. Da się tak zrobić żeby po wcinięnięciu np HISTORIA storona się nie zawijała i została taka sama?

U mnie wyświetla się to źle. Zupełnie przykładowa strtona:

https://www.md.rufus.pl

Proszę wejść i kliknąć HISTORIA lub ULUBIONE lub MULITIMEDIA w menu na górze.

[mrtn]

to nie problem z zakładką a szerokścią strony

[kava]

strona się zwęża i elementy div się nakłądają na siebie lub ukłądają się pod sobą. Jak tego uniknąć?

Ustawiać divy w procentach, zamiast w px, i używać overflow i emów

Tym sposobem strona będzie wyglądać dobrze przy wszystkich rozdzielczościach.

[Sanchez Spinoza]

No ok, mam stronę ustawianą tylko relatywnie width:100%.

Niektóre divy mam float left 80% i float right 20% ale to ciągle jest 100% relative.

Co jescze mogę zrobić?

Jak podeprzeć się overflow? skoro zawartość diva nie przekracza przecież jego wytycznych (100%) ?

Szczerze mówiąć jescze nie korzystałem z overflow. Czy to jest recepta na ten problem?

Aha, CSS wygląda dokładnie tak:

body {margin:0; font-family:trebuchet MS; }

a:link, a:visited, a:active{text-decoration:none; color:#000;}
a:hover{text-decoration:underline; color:#c00000;}


.witaj {font-style:italic; margin:0; font-weight:bold;}
.content { font-size:9pt; }



#top {background:#c0c0c0; height:30px; width:100%;}
#top div { padding:10px; font-size:20pt; font-weight:bold; font-style:italic; color:#000;width:100%; }

#baner { margin-top:2px; text-align:right; background:#414040 url(images/banermain.gif) no-repeat; height:150px; width:100%;}
#baner div { text-align:right; padding:10px; font-size:15pt; color:#fff; width:100%;}

#navtop {background:#c00000; height:2px; font-size:5px; color:#000; width:100%; margin-top:2px;}
#nav {background:#c00000; height:2px; font-size:5px; color:#000; width:100%; margin-top:2px;}

#menu {background:url(images/tlo.gif) x-repeat; height:20px; }
#menu div { padding:10px; font-size:8pt; color:#000;}


#okno { padding:10px; width:100%; background:#eee;}

#lewa { background:#fff url(images/tlo2.gif); float:left; width:20%; }
#lewa div { padding:10px;}

#prawa { background:url(images/hf.gif) no-repeat; background-position:right bottom; float:left; width:80%; height:470px;}
#prawa div { padding:10px; }


#bottom { background:#c00000; clear:both; width:100%; height:20px; }
#bottom div {padding:10px; text-align:center; color:#fff; font-size:8pt; }

[yavaho]

Z góry zakładasz że wszyscy ogladają stronę w takiej samej rozdzielczości co Ty i w dodatku w pełnym oknie?

Usuń z prawej całkowicie width i height

Może daj dla prawej float:right

Ale przy bardzo małym okienku dalej przeskoczy

[edit]

Zainstaluj klientowi IE7. Tam ulubione wyswietlają sie inaczej

[kava]

Wybacz, nie zajrzałam w kod i założyłam, że nie masz procentowych divów. W Twoim przypadku dzieje się tak ze względu na obrazki z lewej kolumny. Po prostu wraz ze zmniejszaniem okna w pewnym momencie ich width jest większy, niż width lewej kolumny. FF sobie z tym radzi, ale IE nie. Możesz to obejść np. wrzucając

#lewa {

overflow:hidden;}

Choć trochę brzydko wychodzi.

[Sanchez Spinoza]

Dzięki za zainteresowanie moim problemem ale nic z tego.

#Kavo overflow mnie nie zadawala w tym przypadku. :/ Klient wymagający. nie może się to chować w ten sposób.

#yavaho dla prawej float:right nic nie zmienia w tym przypadku. :/

Przypadkiem zastosowałem otwarcie ULUBIONE w XP na tym forum i zauważyłem że w świetny sposób dostosowywuje się do zmniejszenia okna z lewej strony. Płaszczyzny poprostu dopasowały się do mniejszego okna. Chodzi mi o takie własnie coś.

Pozatym jak się zmniejsza okno przeglądarki LEWYM dolnym "zwężaczem " okna to divy się w sposób przykry zwężają a nie zostają na swoim miejscu. Łaj?

Kurcze a myślałem że CSS mam już w 30% opanowany a tu taki numer z wieczora no!

Help.

Do poniedziałku mam oddać projekt.

Stawiam piwo

[yavaho]

Cos mi sie wydaje że dalej nie sprawdziłeś jak to bedzie wygladać jeżeli usuniesz całkiem styl:

width:80% dla prawej kolumny.

Po usunięciu tej wartości prawa kolumna powinna się zmniejszać aż do wielkości najdłuższego słowa.

[kava]

Jeśli te obrazki tam muszą być i nie możesz ich zmniejszyć, nie widzę rozwiązania na pogodzenie ich obecności i procentowych widthów dla obu kolumn, min-width (niedziałający zresztą w IE) się tu nie nadaje. A może by tak stała szerokość lewego w emach i dopasowująca się elastyczna prawa?

Cos mi sie wydaje że dalej nie sprawdziłeś jak to bedzie wygladać jeżeli usuniesz całkiem styl:

width:80% dla prawej kolumny.

Wtedy trzeba wywalić float:left; dla #prawa, żeby działało w FF. Problem znikających kawałków obrazków jednak pozostaje, a dodatkowo jeśli tekst z prawej strony będzie dłuższy od lewej kolumny, to zjedzie do lewej krawędzi okna (obleje kolumnę).

[yavaho]

#lewa {
float:left; width:180px;
}
#prawa {
margin-left:180px;
}

[Sanchez Spinoza]

No to ostatnie rozwiązanie działa poprawnie.

Ale co z relatywnością strony i divów w takim rozwiązaniu? Zawsze czytałem że należy dawać divy w % a nie w px.

[yavaho]

W divie poziom wyżej masz ustawione padding w px (mieszanie px z % też może nieźle namieszać)

I każda przeglądarka inaczej sobie interpretuje jaka w końcu została wolna powierzchia do użycia z tych 100% (po dodaniu czy odjęciu tego padding? - bo to znowu zależy od zastosowanego doctype)

[kava]

...

Co racja to racja ;-)

Zawsze czytałem że należy dawać divy w % a nie w px.

Bo warto, masz wtedy pewność uniwersalności laya. Kiedyś panowało przekonanie, że robiąc design należy go zrobić tak, by dobrze wyglądał pod 800x600 (i słuszie) - tym sposobem powstała kupa layów o stałej długości 800 - tylko że jak to potem wygląda na 1600×1200 czy 1280×1024? Z lupą?

Rozdzielczości mniejsze niż 800x600 zdarzają się naprawdę rzadko. Zdroworozsądkowo, jeśli twoja lewa kolumna służy jako holder dla obrazków (których wielkość nie zmieni się w różnych rozdzielczościach), to nie widzę przeciwwskazań, żeby nie nadać jej stałej szerokości w pikselach - 180px w 800x600 jest OK, a na 1600x1200 wielka kolumna zajmująca 20% szerokości, z małymi obrazkami wyglądałaby pusto.

[Sanchez Spinoza]

dzięki.

Pozdrawiam.