Autor Zpráva
spicoli
Profil *
Zdravím vás, potřeboval bych poradit, jak zvětšit - oddálit kruh od centrálního obrázku. Jde to nějak jednoduše?
IdemeNaHavaj
Profil
spicoli:
margin/padding
spicoli
Profil *
mno, stím už jsem si hrál, ale vždy se mi to šouplo někam mimo.
http://cannaskin.wz.sk/
peta
Profil
to je desive, to bych na tabletu nechtel klikat

w1 = 88, h1=88
w2 = 64, h2=64
(w1-w2) / 2 = (88-64) / 2 = 24 / 2 = 12
Ty mas left:-8px;

Nechce se mi ted dopocitavat vsechno, ale resil bych to asi takhle nejak, obrazek jsem zmensil na 182. Navic ten had neni symetricky kruh!
<style>
ul, li {display:block; list-style:none;margin:0; padding:0;}
ul    {position:relative; background:url("had.gif") no-repeat; left:200px; top:200px; width:182px;height:182px;}
ul li    {position:absolute;}
ul li img    {width:88px; height:88px; position:relative;}
li.p1 {left:16px; top:-16px;}
li.p2 {left:80px; top:-16px;}
li.p3 {left:144px; top:16px;}
li.p4 {left:144px; top:48px;}
li.p5 {left:80px; top:48px;}
li.p6 {left:16px; top:48px;}
li.p7 {left:-48px; top:48px;}
li.p8 {left:-48px; top:48px;}
ul li:hover img    {width:64px; height:64px; left:12px; top:12px;}
</style>

        <ul>
            <li class="p1"><a href="#url"><img src="had.gif" alt="" /></a></li>
            <li class="p2"><a href="#url"><img src="had.gif" alt="" /></a></li>
            <li class="p3"><a href="#url"><img src="had.gif" alt="" /></a></li>
            <li class="p4"><a href="#url"><img src="had.gif" alt="" /></a></li>
            <li class="p5"><a href="#url"><img src="had.gif" alt="" /></a></li>
            <li class="p6"><a href="#url"><img src="had.gif" alt="" /></a></li>
            <li class="p7"><a href="#url"><img src="had.gif" alt="" /></a></li>
            <li class="p8"><a href="#url"><img src="had.gif" alt="" /></a></li>
        </ul>
Spicoli
Profil
Nejde mi tak ani o symetrii, ale spíš, jak s těma obrázkama hejbat. Mohl by jsi mi prosím vysvětlit, co zamýšlíš tím:
w1 = 88, h1=88
w2 = 64, h2=64
(w1-w2) / 2 = (88-64) / 2 = 24 / 2 = 12
Ty mas left:-8px;

podle toho mám zmenšovat nebo zvětšovat vzdálenosti, aby to bylo v kruhu?
Díky moc za trpělivost
peta
Profil
To bude chtit obrazek... 1 je velky obrazek, 2 je obrazek po zmenseni, w = width, h = height, rozmery obrazku
<-----------------> w1
...................
:   <--------->   : w2
.<->...........<->: delta, delta
:   :    +    :   :
.   ...........   :
:                 :
...................
w1 - w2 je rozdil sirky maleho a velkeho obrazku
delta je vzdalenost obrazku 2 od leveho okraje obrazku 1, ktera musi byt stejna pri centrovani obrazku zleva i zprava, cili rozdil w1 - w2 je 2 * delta, coz vychazi pri tebou zvolenych sirkach 88 a 64 prave 12, jenze ty mas napsano v kodu 8.

V tom kodu, co jsem ti poslal staci doplnit jen spravne hodnoty. Slo mi jen ukazat o to, ze to ty obrazky spravne centruje.
Jak to delam?
ul - nastavim na position relative, blok, od ktereho bude pocitat souradnice
li - napozicuji do prostoru pomoci absolute
img - nastavim opet position relative, kde ziskaji pozici tam, kde jsou a s nimi pak pri hoveru budu hybat doleva prave o rozdil delta. Takze LI zustava porad na stejnem miste, menim jen pozici obrazku IMG uvnitr LI. Ve tvem pripade mozna spis lepe menit pozici elementu A.
Protoze velikost obrazku nijak nemenis, tak posun bude pro vsechny obrazky stejny.
Pozici LI.p1 - p6 si vypocitas podle vzorce podle poctu stran. mas p1-p8, to je 8 bodu rozmistit po kruznici, kruznice ma uhel 360°, takze 360/8, coz je rozmistovani po 45°, sinem, kosinem si dopocitas souradnice pro kazdy uhel x=sx+ r*sin(uhel), y=sy+ r*cos(uhel). A nebo to rozmistis od oka.
Ale predpokladam, ze zakladni logiku znas, protoze je to ve tvem kodu vsechno. Jen jsem to zjednodusil, protoze se mi nechtelo probirat tvoje css a napsal vlastni. Jen jsem se divil, proc mi vychazi 12 a ty mas 8.
---
hm, koukam, ze s obrazkem to nebude jednoduche, editace pouziva jiny font nez zobrazeni zpravy :)
Spicoli
Profil
díky za vysvětlení, tož tak jsem to nějak (nakonec ručně) na zkoušku rozházel. Ted mám problém s tím, že mi jde najet na čtvrtý kvadrant, ale zbylé tři při pokusu najetí na ně, zmzí.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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