Autor | Zpráva | ||
---|---|---|---|
mata Profil * |
#1 · Zasláno: 18. 1. 2006, 12:28:24
Tak tedy mám nasledující problém:
obalový DIV dané šířky levý sloupec neznámé šířky (je v něm obrázek) | pravý sloupec neznámé šířky (tak aby doplnil šířku obalového DIVU) konec obalového DIVu oba sloupce mají nastavený float:left, díky čemuž pravý sloupec neukončí obtékání hned na konci obrázku ale je i nadále odsazen problém je, že ve FF a Opeře při dlouhém textu skočí pravý sloupec pod levý poradíte někdo? díky
|
||
peta Profil * |
#2 · Zasláno: 19. 1. 2006, 11:06:25
nemas nastavene clear
nemas nastavene margin nemas uvedene sirky floatovaneh bloku Muzes zacit znova s lepsi literaturou o floatovani. Dekujeme, nashledanou. :) http://www.volny.cz/peter.mlich/www.htm#www60 zkus 3 sloupce, ale tam je polovina prikladu take spatne napsana |
||
Plaváček Profil |
#3 · Zasláno: 19. 1. 2006, 12:50:10
Obávám se, že chceš něco, co udělat nejde. Velmi pěkně vysvětlený princip plovoucích prvků najdeš zde http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082
|
||
mata Profil * |
#4 · Zasláno: 19. 1. 2006, 13:20:35
2 peta:
na co clear? čistit obtékání bych musel až za contentem margin - a jaký ho nastavit když neznám šířku levého sloupce (ta se určí až podle vloženého obrázku do DIVu image - tenhle zdroják je pro šablonu a obrázek může být pokaždé jiný). šířka floatovaného bloku - tu právě neznám tudíž ji nemůžu uvést... a jelikož neznám rozměry tak bude mít asi pravdu Plaváček ... kterému děkuji za článek nakonec jsem to vyřešil tabulkou, přestože to není úplně sémanticky správné, neb do tabulky nevkládám tabulková data :-( ale někdy účel světí prostředky |
||
peta Profil * |
#5 · Zasláno: 19. 1. 2006, 16:17:38
mata
- Floatovat bez sirky se da take, protoze se bere aktualni jako inline, ale neni to uplne spravne - Sirku obrazku predem znas a kdyby sis poradne precet kapitolu obrazky, tak se dozvis, ze ji musis do obrazku zadavat z mnoha duvodu. - Mno, a pak taby mame schazenici vlastnosti margin, clear,inline-block, position:relative k tomu nema smysl nic psat, najdi si nekde solidni clanek o floatovani ne ty na jakpsatweb. Treba na intervalu nebo googlem. Ja tim rozhodne cas ztracet nehodlam jako 20x pred tebou. |
||
habendorf Profil |
#6 · Zasláno: 19. 1. 2006, 16:31:18 · Upravil/a: habendorf
A co je tedy účelem? Pokud je text delší než obrázek, má být stále odsazen?
... pravý sloupec neukončí obtékání hned na konci obrázku ale je i nadále odsazen ... při dlouhém textu skočí pravý sloupec pod levý Já z těchto dvou vět cítím jakýsi rozpor (?). Jinak řešitelné by to samozřejmě bylo i bez tabulek. |
||
mata Profil * |
#7 · Zasláno: 19. 1. 2006, 20:54:08
Ale já tu šířku obrázku nemůžu zadat do CSS - ano do html se vloží - tam jí vygeneruje PHP, ale do CSS ne!
margin, clear,inline-block, position:relative - absolutně nechápu na co by v tom příkladu byly - margin - ano možná tak odsadit pravý blok, ale nelezl pod levý, ale nevím o kolik neboť předem neznám šířku obrázku clear - viz výše, dle mě není potřeba inline-block - nechápu k čemu position:relative - ?? tak to taky nevím k čemu kdybys třeba naznačil tak se od něčeho odpíchnu, ale jen vychrlit hesla a neporadit - to je pak těžké |
||
mata Profil * |
#8 · Zasláno: 19. 1. 2006, 21:03:23
2 habendorf:
snad to lépe vyplyne z obrázku: |
||
habendorf Profil |
#9 · Zasláno: 20. 1. 2006, 10:44:28
mata: Jo, zadání už mi je jasné.
Řešení: Levý div je zbytečný, tam může být pouze img, ten bude float:left. U pravého divu zruš float a nastav mu levý margin. To je celé. Teď asi namítneš, že nevíš jaký nastavit margin, když neznáš šířku obrázku. Ale uvědom si, že prohlížeč šířku toho obrázku už zná, tak toho využij. Kdybys nevěděl, ještě se ozvi. |
||
Plaváček Profil |
#10 · Zasláno: 20. 1. 2006, 11:04:45
Bez klientského skriptování se to ale neobejde, prostě čisté CSS řešení uvedeného problému, pokud vím, neexistuje.
|
||
habendorf Profil |
#11 · Zasláno: 20. 1. 2006, 11:19:57
Plaváček má samozřejmě pravdu. Jen jsem chtěl říct, že řešitelné je to i bez tabulek, ale je to spíš teoretická záležitost. K vidění je to zde: http://habendorf.plavacek.net/pokusy/odsazeni/
Samozřejmě že závislost na klientském skriptování činí toto řešení v reálném světě prakticky nepoužitelným. Ovšem: Ale já tu šířku obrázku nemůžu zadat do CSS - ano do html se vloží - tam jí vygeneruje PHP, ale do CSS ne! Toto není pravda, klidně phpkem vygeneruj pár řádků css. Bude to bez tabulek, nezávislé na klientských skriptech a bude to běhat jak fík. |
||
habendorf Profil |
#12 · Zasláno: 20. 1. 2006, 12:36:31
Tak mi to nedalo a ještě jsem v tom šťoural.
Řešení bez skriptů a tabulek, pouze v čistém css EXISTUJE! Funkční v IE, FF i Opeře. |
||
mata Profil * |
#13 · Zasláno: 20. 1. 2006, 12:44:09
Řešení bez skriptů a tabulek, pouze v čistém css EXISTUJE! Funkční v IE, FF i Opeře
a bylo by možné ho blíže popsat? Byl bych vám za to velmi vděčný. Na výše uvedené adrese je příklad využívající skriptování. Ještě jen upřesním zadání - v levém DIVu může být pod obrázkem i krátký popisek, proto nelze float nastavit jen obrázku. Každopádně díky - rozhodně jste mi pomohl víc než peta. PS: Vkládat phpkem se mi šířky nechce, neboť se jedná o šablonu pro smarty a musel bych uhánět programátora, aby mi pro smarty udělal proměnné atd. |
||
habendorf Profil |
#14 · Zasláno: 20. 1. 2006, 13:42:15 · Upravil/a: habendorf
mata: Já bych rozhodně řešení přes php nezavrhoval. Je to velmi jednoduché - zjistíš si šířku obrázku a pak jen v kódu stránky napíšeš pro pravý div toto:
<div class="right" style="margin-left:<?php echo $sirkaObrazku + případná mezera; ?>px">cokoliv</div> Tak bych to udělal já. Protože mě ale problém zaujal (čistě z cvičných důvodů) svou zdánlivou neřešitelností, nedalo mi to a vyřešil jsem to. Rád bych ale dal příležitost ke cvičení i ostatním, takže zde vyhlašuji soutěž . Proto zde zatím nechci uveřejnit řešení. Dej sem svou adresu, pošlu ti to mailem |
||
Časová prodleva: 18 let
|
Toto téma je uzamčeno. Odpověď nelze zaslat.
0