Autor | Zpráva | ||
---|---|---|---|
Darja Profil |
#1 · Zasláno: 30. 1. 2011, 10:35:27
Ahoj,
mám obrázek na pozadí u pravého okraje, ale text přes to pozadí není moc dobře čitelný. Potřebovala bych tedy na tomto místě vytvořit "prázdný obdélník" se zadanou výškou, šířkou, bez textu, bez pozadí. Zkoušela jsem vytvořit div, zadat top, left, height, width, float: right, ale zadané rozměry top a left to ignoruje. Prosím o radu, co s tím. |
||
Railbot Profil |
#2 · Zasláno: 30. 1. 2011, 10:53:08
Top a left nedefinuje rozměry, ale pozici. A aby něco takového fungovalo musí mít div position:relative nebo absolute. Každopádně dotaz úplně nechápu a přimlouval bych se za živou ukázku.
|
||
Darja Profil |
#3 · Zasláno: 30. 1. 2011, 11:16:52
Omlouvám se, u top a left jsem měla na mysli samozřejmě pozici.
Živá ukázka: mám http://darja.own.cz/yoga/ a chci: http://darja.own.cz/yoga/obd.png = abych ten text neměla v té kytce. |
||
Bubák Profil |
#4 · Zasláno: 30. 1. 2011, 12:10:02
Zkus se inspirovat tímto, třeba půjde přizpůsobit tvému požadavku:
http://interval.cz/clanky/objekt-mezi-odstavci/ |
||
Darja Profil |
#5 · Zasláno: 30. 1. 2011, 12:59:56 · Upravil/a: Darja
to Bubák
No nevím, jestli to dobře chápu... Ale tohle mi vnoří objekt mezi určitý odstavec... A já chci, aby objekt byl odsazen 80 px od shora a byl úplně vpravo; tak, abych dala na začátek obsahové části <div class="empty_right"></div> Toto .empty_right { position: relative; float: right; left: 0px; top: 80px; width: 80px; height: 130px; border: 1px solid red; } mi způsobí, že prázné místo o velikosti 80x130 je nahoře v pravém rohu, ale ten červený rámeček je posunut o 80px dolů a zasahuje do textu. Tomu nerozumím. Snad jsem to teď formulovala o kousek líp. přidávám obrázek: http://darja.own.cz/yoga/obd2.png |
||
Petr ZZZ Profil |
#6 · Zasláno: 30. 1. 2011, 16:56:59
Bubák:
„Zkus se inspirovat tímto…“ Přinejmenším v IE6 se to rozpadá zvětšováním i zmenšováním písma. Zkusil jsem něco sesmolit, vycházeje z Medvídkova příkladu floatovaných spanů. Díval jsem se na to jen v IE6 a FF; nevím jak jiné prohlížeče a určitě to chce ještě vyřešit různé chápání paddingu různými prohlížeči. (Nemá někdo chuť to dopilovat? :) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> p { width: 500px; text-align: justify; padding-right:70px; background-color:#0f0;} .aa { background: url("cakrasana.jpg"); float:right; height:80px; width:120px; margin: 6px -50px 6px 6px; border:none;} </style> </head> <body> <p> That´s it! A Bullshit Generator in English! In an immaculate, clear and clean English! A wonderful thing! That´s it! A Bullshit Generator! <span class="aa"></span> To je ono! Stroj na nesmysly v češtině! Ano, pravý český generátor nesmyslů! Nádherná věc! To je ono! Stroj na nesmysly! </p> </body> </html> Základní myšlenka je větší pravý padding u odstavce a záporný pravý margin u obtékaného span u s obrázkem na pozadí. (Oba výplňové texty je třeba namnožit, aby bylo vidět, jak se to chová; tady to nechci plevelit.)
|
||
Bubák Profil |
#7 · Zasláno: 30. 1. 2011, 17:17:47 · Upravil/a: Bubák
Petr ZZZ:
„Díval jsem se na to jen v IE6 a FF; nevím jak jiné prohlížeče a určitě to chce ještě vyřešit různé chápání paddingu různými prohlížeči.“ Darja s boxmodelem nebude mít problém, používá standardní vykreslovací režim. |
||
Petr ZZZ Profil |
#8 · Zasláno: 30. 1. 2011, 22:04:22
Bubák:
Tisíc díků, máš pravdu! Doplnil jsem do hlavičky adresu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
||
Darja Profil |
#9 · Zasláno: 31. 1. 2011, 09:18:35
Petr ZZZ:
Je to fajn, ale pořád to není to, co chci. Potřebuju něco přizpůsobivějšího, vzhledem k tomu, že budu mít více stránek. Takhle bych musela u každé stránky přepočítávat počet slov, abych věděla, kam to dát :( No, vidím jedinou variantu v tom, že prostě nebudu mít obtékání shora, ale jen zleva a zespoda. |
||
Petr ZZZ Profil |
#10 · Zasláno: 31. 1. 2011, 10:31:38
Darja:
Obávám se, že na to, o co se snažíš, se hodí výraz, který jsem se naučil ve Vídni: die Eier legende Wollmilchsau, čili zviřátko, které nám dává vajíčka, vlnu, mlíčko i řízečky – zkrátka takový vajíčkový huňatý vlnomlíkovepř. Napozicovat obrázek samozřejmě lze, ale potom do něj poleze text. Mnou navržené řešení pomocí obtékání reaguje podle potřeby na zvětšování písma, ovšem za cenu toho, že pozice obrázku se mění (vůči obrazovce – vůči textu zůstává). Ještě mě napadá zkombinovat obě řešení: Obrázek na fixní pozici a pod ním (→ z-index) obtékaný bílý obdélník, který bude dostatečně veliký na to, aby byl vždy pod obrázkem, i když se bude jeho pozice měnit. To ale půjde udělat jen za cenu spíše jemného odstupňování nabízených změn velikosti písma, čímž utrpí přístupnost, nebo ten bílý obdélník bude muset být hodně veliký, což zas nebude hezké. Podotýkám ale, že kódovat moc dobře neumím, třeba na to nějaké elegantní řešení existuje. |
||
Darja Profil |
#11 · Zasláno: 31. 1. 2011, 13:27:18
Petr ZZZ:
Když jsem dotaz zadávala, myslela jsem, že bude chtít jen jinak zadat float nebo tak nějak; netušila jsem, že to bude takový problém. Mimochodem, výraz je to hezký, uložím si ho do své slovní zásoby :))) Tvůj návrh ozkouším, aber jetzt muss ich studieren - takže tak za dva dny;) Zdravím do Vídně (z Grazu ;)) |
||
Časová prodleva: 13 let
|
0