Autor Zpráva
MilanJ
Profil
#1 · Zasláno: 16. 8. 2006, 19:30:42 · Upravil/a: MilanJ
Odpovědět Citovat
Na stránkách css.interval.cz/priklady/priklad-9-1.htm jsem našel velmi zajímavý layout s pružnou šířkou stránky.
Chtěl jsem si ho upravit tak, aby stránka byla vždy roztažená na celou šířku okna prohlížeče, tj. od kraje ke kraji.
IE nepodporuje max-width a min-width, a tak nezbylo než ošetřit minimální a maximální šířku stránky, viz kód:


<!--[if IE ]>
<style>
/* Styly pouze pro MSIE */

#strankaobal
{
width: 800px; /* pro MSIE s vypnutym JS */
width: expression(document.body.clientWidth<800? "800px" : (document.body.clientWidth>900 ? "900px" : "auto" ) );
}
</style>
<![endif]-->


Pokud zruším v CSS stylu max-width a šířka je nastavena na auto, bude ve FF šířka roztažená na max. Min.šířka je nastavená min-width.
V IE to ošetřuje řádek width: expression(document.body.clientWidth<800? "800px" : (document.body.clientWidth>900 ? "900px" : "auto" ) );

Problém: jak tento výraz upravit, aby i v IE fungovalo roztažení na maximální šířku stránky, a zároveň aby minimální možná šířka byla 800px ?

Zkoušel jsem nastavit document.body.clientWidth>900 ? "auto" : "auto" ) );, ale při změně velikosti okna se IE "kousne" a spadne.

Poradí někdo jak na to?
habendorf
Profil
#2 · Zasláno: 16. 8. 2006, 22:56:01
Odpovědět Citovat
No asi bys nám měl říct, co vlastně chceš.
Protože jednou to vypadá že chceš 800px až 900px, pak zas že chceš 800px až 100%.
MilanJ
Profil
#3 · Zasláno: 16. 8. 2006, 23:09:17
Odpovědět Citovat
habendorf
Máš pravdu, vplížila se chybka... minimální šířka má být 800px, maximální 100%
habendorf
Profil
#4 · Zasláno: 16. 8. 2006, 23:19:19
Odpovědět Citovat
V tom případě tam pro IE bude jen

width: expression(document.body.clientWidth<800? "800px" : "auto");
habendorf
Profil
#5 · Zasláno: 16. 8. 2006, 23:26:49
Odpovědět Citovat
Jo a pozor, IE musíš mít v quirku.
MilanJ
Profil
#6 · Zasláno: 16. 8. 2006, 23:41:14
Odpovědět Citovat
Mám nastaveno <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, je to OK?
habendorf
Profil
#7 · Zasláno: 16. 8. 2006, 23:46:06
Odpovědět Citovat
Myslím že ne, viz http://wellstyled.com/html-doctype-and-browser-mode.html

Ale pokud IE nekolabuje, tak to nech.
MilanJ
Profil
#8 · Zasláno: 16. 8. 2006, 23:53:29
Odpovědět Citovat
Kolabuje, vypadá to děsně...rozhozený celý.
jozob
Profil
#9 · Zasláno: 17. 8. 2006, 00:07:24
Odpovědět Citovat
MilanJ
Daj pred DOCTYPE komentár. (nezáleží na obsahu)
habendorf
Profil
#10 · Zasláno: 17. 8. 2006, 00:33:54
Odpovědět Citovat
Nebo vyhodit URL z doctype.
MilanJ
Profil
#11 · Zasláno: 17. 8. 2006, 00:52:13
Odpovědět Citovat
DOCTYPE jsem zakomentoval a už to vypadá, že to drží pohromadě.

Přesto se potýkám s problémy...
Stránka je ve fázi návrhu layoutu, proto mě nekamenujte za tagy <div align="center">, <br> apod. (mimochodem...jaký tak pro vložení prázdného řádu když ne <br>?).... www.sweb.cz/milanovawww/.

1. Při zmenšování okna prohlížeče střední část s textem "odteče" dolů - dělá jen v IE, FF je OK.
2. DIV s menu v levé horní části je užší než celý sloupec ve FF, v IE je širší.
3. DIV s menu v levé horní části není v IE "doraženo" až k hornímu banneru, je tam mezera.
4. Banner RECTANGLE 180x150 na levé straně pod oranžovým ADVERTISMENT je oddělený mezerou jen v IE, FF prázdný řádek ignoruje?!

Už nemám sílu, jdu spát. Kdyby ji někdo měl a poradil co a jak, bylo by to fajn.

Díky, Milan
MilanJ
Profil
#12 · Zasláno: 17. 8. 2006, 07:57:23
Odpovědět Citovat
Určitě bude někde chyba, nemůžu přijít na to kde. Velký zkušennosti s CSS nemám...
vladecek
Profil *
#13 · Zasláno: 17. 8. 2006, 08:51:00
Odpovědět Citovat
mal som podobný problém s pružnou šírkou od - do. Ak zadáš pre IE pomocou expression aj minimálnu aj maximálnu šírku, berie iba posledný z tých dvoch zadaných. Neberie súčasne obidve. Nakoniec som to vyriešil tak, že dal som pomocou expression iba maximálnu šírku a minimálnu som vyriešil pomocou hlavičky, dal som do nej obrázok o šírke 760 px a je pokoj, pod tú šírku sa si už zobrazí lišta. Pre ostatné prehliadače fungujú súčasne aj max-width aj min-width.
MilanJ
Profil
#14 · Zasláno: 17. 8. 2006, 10:38:31
Odpovědět Citovat
Není jiné řešení?
Plaváček
Profil
#15 · Zasláno: 17. 8. 2006, 11:55:34 · Upravil/a: Plaváček
Odpovědět Citovat
MilanJ

Není jiné řešení?

Zkus tohle:

CSS

#bodyvnitrek {
max-width: 900px;
width: expression(document.body.clientWidth > 900?"900px": "auto" );
}

#strankaobal {
min-width: 770px;
width: expression(document.body.clientWidth < 770?"770px": "auto" )
}

HTML

<div id="bodyvnitrek">
<div id="strankaobal">
...
</div>
</div>

Bylo to tu také zmíněno a já to připomínám - IE musí běžet v quirk módu, ve standardním módu dochází k zatuhnutí prohlížeče.

Expressions mají ještě jednu nepěknou vlastnost a to tu, že pokud takto definuješ min a max šířku, chytrý IE tyto definice použije i pro tiskový styl a tak se stane, že se ti řádky nevejdou na stránku. Do tiskového stylu je nutné na první řádku přidat tento zápis:

#bodyvnitrek, #stankaobal {
width: 100% !important;
}

Je to jedno z možných řešení, existují i jiná (kupříkladu pro min-width lze použít nějaký prázdný vnořený DIV s nastavenou pevnou šířkou) a podobně.
MilanJ
Profil
#16 · Zasláno: 17. 8. 2006, 12:20:54
Odpovědět Citovat
Plaváček
Díky, maličko jsem to upravil..použil jsem jen #strankaobal pro minimální šířku stránky.

Zvláštní je, že FF funguje přesně tak jak očekávám, že by stránka fungovat měla a v IE se celý pravý panel posune až do prostřední části, nevíte čím by to mohlo být?

link je tady
Časová prodleva: 3 dny
karbon
Profil *
#17 · Zasláno: 20. 8. 2006, 21:41:11
Odpovědět Citovat
A co tak tam narvat nějaký prvek, který nebude vidět (popř. bude mít výšku třeba 1px), ale bude mít šířku, která bude plnit úlohu minimální šířky? Možná to je prasárna, ale funguje to a to je hlavní... A ještě - je to jednoduché
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0