Autor Zpráva
Darja
Profil
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
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
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
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
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>
a text automaticky ten objekt celý obteče, zeshora, zleva, zespoda.

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
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 spanu 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
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
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">
… a už se to vykresluje totožně!
Darja
Profil
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
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
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 ;))

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0