Ongelmia kotisivuston kanssa

[Nemes]

Olen tässä jo muutaman tunnin pähkäillyt seuraavanlaisen ongelman kanssa: Miten saisin kuvan siirtymään tekstiosion mukana?

Eli haluan että sama kuva toistuu kaikilla sivuilla ja että se olisi samassa kohtaa alakulmassa. Jotta tuota ongelmaa olisi helpompi ymmärtää sivut ovat tässä: Pihlaja ja se ongelma kuva on tuo kettu. Etusivulla kettu on melko hyvässä kohdassa eli sen korvat tulevat hieman tuon valkoisen teksti-ikkunan päälle. Muilla sivuilla se taas jää tyhmästi jumittamaan tekstin päälle, haluaisin että se olisi niilläkin tekstin lopussa korvat samalla tavoin teksti-ikkunan päällä, muuten ulkopuolella.

[Gift of Death]

#left-cluster { background: transparent url(theme/fox_valmis.gif?904045) no-repeat center top; position: relative; display: block; z-index:1; position:absolute; width:270px; height:340px; left:20px; padding:4px; top:300px; }

Mitä nyt lähdekoodia tutkimalla voin sanoa niin vastaus löytyy tuolta main_style.css tiedostosta, tuosta yllämainitusta rivistä. Kokeile vaihtaa tuossa background kohdassa top -> bottom.
Muuta en tähän hätään keksi.

[Nemes]

Ei auttanut :/

[Gift of Death]

Voit myös kokeilla vaihtaa tuolta samalta riviltä tuon "height:340px;" -> "height:98%;". Ja background kohdassa pitää tietenkin olla se bottom.

Sitten loppuu tältä pojalta ideat kesken.

[Nemes]

Ei toiminut :/ Tuon height:340px; kohdan muuttaminen height:98%; aiheutti kuvan katoamisen.

[Gift of Death]

Noniin, nyt ihan aikuisten oikeesti viimonen kerta kun yritän ottaa selvää siitä miten tuo toimii. Divejä en ole itse juuri käyttänyt niin ongelma on minullekkin uusi.

Elikkäs, kokeile vaihtaa tuo jo edellämainitty rivi tähän:

#left-cluster { background: transparent url(theme/fox_valmis.gif?904045) no-repeat center bottom; position: relative; display: block; z-index:1; position:fixed; width:270px; height:340px; left:20px; padding:4px; bottom:0px; }

Ja nyt virallisesti out of ideas.

[Nemes]

Kiitos todella paljon! Nyt se liikkuu scrollatessa mukana eli on jo huomattavasti parempi mitä ennen :) Tykkäisin kuitenkin jos sen saisi pysymään aloillaan tuolla alareunassa. Noh, pitää kokeilla ja kehitellä.

[Gift of Death]

Hei hei hei hei! Sain taas idean. Muuntele tuota leftin arvoa kunnes on mieleinen. Tuo on vain kylmä arvio. ^^

#left-cluster { background: transparent url(theme/fox_valmis.gif?904045) no-repeat center bottom; display: block; z-index:1; position:absolute; width:270px; height:340px; padding:4px; bottom:10px; left:20%; }

On muuten hemmetin vaikeaa yrittää keksiä mitään kun ei ole omatekoista tavaraa, tai pysty varsinaisesti kokeilemaan miten toimii.

[The_Sipi]

Heissan, minulla on blogi, johon haluan saada kuvan laitettua näköjään vaikeammin kuin muut. Kas tässä kuva blogistani:



Oikeasti blogiteksteissäni ei (vielä) ole tuota kuvaa, mutta kysymys kuuluukin, onko tuota kuvaa mahdollista saada tuohon paikkaan (eli noiden elokuvien perustietojen viereen) ilman vippaskonsteja ja niin, ettei se hajottaisi tuon perustietokappaleen rakennetta? Tuossa aikani kokeilin noita middle, center, vertical middle -temppuja, mutta niissä kaikissa tuo kuva säilyi vain vasemmassa reunassa noiden perustietojen joukossa. Oikeaan reunaan kuvan kyllä sain, mutta jostain syystä kuvan keskelle laittaminen ei onnistu niin, että se oli samassa tasossa noiden perustietojen kanssa. Missä vika? Kyllä mä sen kuvan saisin laitettua perustietojen yläpuolelle keskelle, mutta en siis samalle tasolle.

Yksi vippaskonsti mitä kokeilin oli sellainen, että pistin sen kuvan oikeaan reunaan, mutta jätin sinne oikeaan reunaan niin paljon valkoista, että näytti siltä kuin kuva olisi ollut keskellä, mutta ei se nyt ihan oikea tapa tätä ratkaista ole... varsinkin kun ihmisillä on erikokoisia näyttöjä/laitteita, joten eri ruuduilla se näyttäisi vaan pöhköltä.

Auttakee!

[Shokun]

Heissan, minulla on blogi, johon haluan saada kuvan laitettua näköjään vaikeammin kuin muut.

Auttakee!

Helppo tapa tuohon on tehdä se (x)html:n taulukolla (<table>), mikäli on mahdollista käyttää. Laittamalla taulukon leveydeksi 100% tms mukautuva leveys, vasempaan leffan tiedot ja oikeaan kuvan, ja css:llä määrittää taulukon solujen sisällön aligniksi middle left saadaan lähes täsmälleen tuollainen asettelu. Niin, ja reunukset tietenkin pois.

//Googlasin sivut ja vilkaisin toteutustapaa, välttämättä mukautuva leveys ei olekaan se paras keino. Ei nimittäin ole kokemusta, miten 100% leveys suhtautuisi tuohon sivupalkkiin, joka on toteutettu div:llä.

Taulukkoa kuitenkin suosittelisin, ehkä sitten pienemmällä prosentilla tai kiinteästi määritelty (jälkimmäinen on huono pieniä resoluutioita ajatellen), tai ei leveyttä lainkaan määritelty, jolloin tilaa varataan sen verran mitä sisältö vie, tosin silloin kuva on lähes kiinni tekstissä (css:n paddingilla tämäkin korjaantuu, sillä määritetään siis, kuinka kaukana solun reunuksesta teksti on.).