| Autor | Zpráva | ||
|---|---|---|---|
| aa007 Profil * |
#1 · Zasláno: 24. 12. 2007, 02:50:30
Zdravim, mam 2 sloupce z toho jeden je plovouci v pravo (sloupec "a"), a ten co je v levo (sloupec "b"), tak je take deleny na 2 sloupce (ten vlevo - sloupec "e" a v pravo sloupec "c"). Doted je vse v poradku, problem nastane, kdyz chci za slopci "e" a "c" vlozit horizontalni sloupec "d" ... aby se ve Firefoxu nevclenil do sloupce c, tak musim nastavit sloupci "d" vlastnost clear: both, ale to firefox pochopi tak, ze ho ma hodit az za sloupec "a", takze mi vznikne naprosto nesmyslna mezera a ja nevim co s tim ... IE to chape presne jak sem zamyslel...
pro ilustraci meho problemu davam priklad: http://www.aa007.ic.cz/problem.html diky |
||
| Miloš Profil |
#2 · Zasláno: 24. 12. 2007, 12:38:51
IE to chape presne jak sem zamyslel...
Osvědčilo se mi uvažování v tomto smyslu: Jestliže něco podle mé představy vykreslí jen explorer, mám tam chybu. Jestliže naopak FF a Opera zobrazí vše správně, ale explorer ne, je chyba v exploreru. vlastnost clear: both, ale to firefox pochopi tak, ze ho ma hodit az za sloupec "a" což je naprosto logické, poněvadž both = oba, obojí, neboli ruší platnost jak float:left, tak i float:right a musí se vykreslit až pod tím. Oprav si to takhle: body {width: 900px;}
.a {float: right;}
.b {width: 500px; border: 1px black solid; float: left;}
.c {float: right; border: 1px red solid;}
.e {border: 1px red solid;}
.d {clear: right; border: 1px green solid;} |
||
| aa007 Profil * |
#3 · Zasláno: 24. 12. 2007, 13:44:49
Diky moc, ale jak si oramoval i ten blok "e", tak ted se objevil dalsi problem ... kdyz mam blok "e" jako informace s textem a spodni okraj bloku ma prave nastaven border a blok "c" je napriklad nejaka fotografie, tak ten blok "e" se roztahne vlastne i pod ten blok c, ale jen oramovanim ... de s tim neco delat?
|
||
| aa007 Profil * |
#4 · Zasláno: 24. 12. 2007, 18:18:50
Tak sem si s tim hral, az sem dosel k vysledku, ale sem zpatky u meho problemu s clear ...
udelal sem priklad http://www.aa007.ic.cz/float.html ten zeleny ram s textem "Info o clanku a dalsi kraviny" ... pred nim je blok s clear: both, protoze resi situaci, kdyz mam v clanku fotku, ktera konci az po textu, takze by se ten zeleny blok zakousl do te fotky ... , ale nastava mi problem s blokem Menu 2 ktere se porad rozrusta a za 2 roky by si musel cterar hodne dlouho scrolovat, nez by dosel k dalsimu clanku ... takze moje otazka je, jak ten zelenej blok donutit, aby se radil az za fotky, krere maji float ale ignoroval ten blok Menu 2, ktery ma taky float. Diky moc, uz sem z toho na prasky ... |
||
| aa007 Profil * |
#5 · Zasláno: 25. 12. 2007, 17:46:50
To nikdo nevi? :o
Nerikejte mi ze sem nasel vec co nejde pomoci CSS udelat, tomu se mi fakt nechce verit :/ |
||
| Manq Profil |
#6 · Zasláno: 25. 12. 2007, 17:59:59
aa007
Posunout ho v HTML kódu někam jinam - za plaváčka, za kterým se má vykreslovat. |
||
| aa007 Profil * |
#7 · Zasláno: 25. 12. 2007, 19:17:20
Vse je v HTML kodu za sebou tak jak se to ma vykreslovat, akorat ta vlastnost clear:both zpusobi to, ze se to vykresli az za tim menu a ne jen za tou fotografii ...
|
||
| Plaváček Profil |
#8 · Zasláno: 25. 12. 2007, 19:36:24
aa007
Zkusil sis něco o float a clear prostudovat? http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082 |
||
| aa007 Profil * |
#9 · Zasláno: 25. 12. 2007, 23:14:33
Tak se mi to povedlo utvorit do tohohle: http://img180.imageshack.us/my.php?image=88026096rk2.png
a co sem teda pochopil, tak tohle proste nepujde: http://img180.imageshack.us/my.php?image=70834944aq9.png chapu to konecne uz dobre, nebo sem porad vedle? |
||
| Miloš Profil |
#10 · Zasláno: 26. 12. 2007, 00:40:20
aa007
Řešení by tu bylo, například kesolim.sweb.cz/TMP/aa007/ (soubor se stylem je kesolim.sweb.cz/TMP/aa007/styl.css). |
||
| Miloš Profil |
#11 · Zasláno: 26. 12. 2007, 00:57:51
Ještě dodávám, že jsem to před odesláním předchozího příspěvku zapomněl po sobě zkontrolovat ve FF a v IE (ladil jsem to pod Operou) a zjišťuju s potěšením, že se mi osvědčily dobré kodérské návyky – ve FF je to stejné jako v Opeře, v IE 6 a 7 je sice lehce jinak hlavička a patička, ale to by se jako detail odladilo v podmíněných komentářích. Použitelné je to dokonce i v IE 5.01 a 5.55, což jsem ani nečekal ;-)
A ještě snad tolik, že bych normálně zřejmě nepoužil tolik divů, ale tady jsem je nechal kvůli snadné srozumitelnosti, aby bylo vidět, co uvažuji jako jeden blok a co ne. |
||
| aa007 Profil * |
#12 · Zasláno: 26. 12. 2007, 01:16:09
Jo kdyby byl u mejch clanku vzdy text delsi nez fotografie, tak to ani neresim, ale kdyz nastane situace, ze fotografie konci az treba o 4 radky dal nez text, tak ani vase eseni nepomuze...
http://www.aa007.ic.cz/css/milos.html sem ve vasem prikladu u 2. clanku zkratil text a infolajna se zakousla do obrazku (tedy presneji pod obrazek) ale tim se prave nadpis 3. clanku dostal take vedle toho obrazku, coz prave resim pomoci toho clear: both, ale to odsadi vse az za to menu... mno snad do CSS 3 pridaji i funkci vyjimek, ze by slo napsat pro ktere bloky nejaky predpis neplati, jine reseni nevidim :/ |
||
| Miloš Profil |
#13 · Zasláno: 26. 12. 2007, 01:35:54
Blok, pro který něco neplatí, stačí pojmenovat – id="jedinecne_jmeno" nebo class="obecna_trida" a tomuto ID nebo třídě vlastnost předefinovat.
V tomto případě by to bylo takto: Přidat třídu clr <p class="info clr">Info o tomto článku</p> a této třídě zrušit obtékání: .clr {clear: left;} ------------- Aby tam nevznikla taková díra mezi odstavci, stačilo by ten rámeček dát ne jako border-bottom, ale border-top (+ padding-top, aby nebyl rámeček nalepený na text). ------------- Nebo lze namísto clear zvětšit spodní padding, aby se ocitl pod obrázkem border: .clr {padding-bottom: 35px;} |
||
| Miloš Profil |
#14 · Zasláno: 26. 12. 2007, 01:37:32
Teď mě ještě napadlo – http://css.interval.cz/layouty/ znáš?
|
||
| aa007 Profil * |
#15 · Zasláno: 26. 12. 2007, 03:03:03
jasne ... ale ja mam php skript, kterej vzdy nacte jeden clanek z databaze a vlozi to do jednoho typu bloku ... tzn. predem nevim, jak ten text bude vypadat ... v tomto pripade dam clear left, ale za tyden mi muze nejaky autor vlozit text, kterej misto obrazku vlevo bude mit obrazek v pravo a tam by musel byt clear: right a to uz by zase zapricinilo to odsazeni toho infobaru az za to menu 2 ... a o tom vlastne celej ten topic je...
k tem layoutum .. tohle neni normalni menu, ktere by tvorilo samostatny sloupec, ale v tom bude vypis mesicu s clankama, kde az skonci se roztahne stredovej sloupec ... proste klasicky obtekani... Takze mam asi 2 moznosti .. nejak to vypocitat prez php popr. javascript, nebo se spokojit s timhle: http://img180.imageshack.us/my.php?image=88026096rk2.png (dalsi clanek uz bude prez celou plochu tj. stred + to co zabiral Menu 2) popr. je v tech layoutech neco pouzitelnyho? ja sem teda nic nenasel, ale uz je dost pozde, tak sem mozna neco prehlid :x |
||
| Miloš Profil |
#16 · Zasláno: 26. 12. 2007, 22:09:10 · Upravil/a: Miloš
Ještě mě něco napadlo:
vyjděme z toho, že v mém návrhu plave jen jedno menu, to vpravo; to vlevo je přeci position:absolute. Pokud by případné miniatury v textu byly všechny float:left, stačilo by všej p.info nastavit clear:left – v případě nutnosti se vykreslí až pod obrázkem, stejně pak jako ten border-bottom obalového divu. Pokud bys chtěl, aby p.info byl těsně pod textem, ale rámeček by byl v případě potřeby od něho dál, stačí dát ten rámeček nahoru (border-top), prvnímu divu přidat třídu a rámeček mu zrušit, no a konečně ještě přidat padding-top:5px, aby ten border nebyl nalepený na text. A clear-left dát buď h3, nebo celému divu. A ještě by tu bylo jedno řešení – zrušit ty bordery vůbec a nahradit je větším margin-bottom (při stávající velikosti písma tak 3em) – zcela bezbolestné, bez potřeby cokoli clearovat. Pak mohou obrázky v textu plavat i vlevo, i vpravo. |
||
| aa007 Profil * |
#17 · Zasláno: 27. 12. 2007, 01:56:33
no ten obrazek vpravo se prave bohuzel nekdy objevit muze :/ takze spolihat na to ze bude jen v levo radsi ani nechci...
No asi nakonec necham tuto variantu: http://img180.imageshack.us/my.php?image=88026096rk2.png aspon to tomu menu prida trochu "vaznosti" ale urcite az bude vic casu zkusim zrealizovat ten tvuj posledni napad s tim margin-bottom (jestli se mi to teda povede :D ) Diky vsem co mi pomohli a omlouvam se ze sem takhle prudil o Vanocich :) |
||
|
Časová prodleva: 16 let
|
|||
0