vBulletin 4 -kehitystyö ja palaute

[DSQ]

Hah, vikahan on siinä, jos pitää selaimen koko ruutua pienemmällä. En yleensä pidä selainta koko ruudun levyisenä, joten kuvat katkeavat siksi.

 

[WebSlave]

Mikään ei voita testiä

EDIT: epä tämä nyt ainakaan leikkautunut vaan pieneni.

Juu siis se rajaa näkymään sen verran kuin mahtuu, mutta jos valitsee "näytä kuva", niin ei sieltä mitään ole leikkautunut. Minulla näkyy norminäytössä vain Merry Christ.

 

[FW08]

Merry Christ.

Olisit itsekin jos pystyisit valmistamaan omat juomat käden käänteessä.

 

[OoPee]

Juu siis se rajaa näkymään sen verran kuin mahtuu, mutta jos valitsee "näytä kuva", niin ei sieltä mitään ole leikkautunut. Minulla näkyy norminäytössä vain Merry Christ.

Siis mulla näkyy ihan "normikäytössä" firefoxilla ja chromella (ei kokoruutunäytöllä vaan ikkunana) koko kuva ilman mitään "näytä kuva" sun muita kikkailuja. On siis kutistettu. Tietenkin jos selainikkuna on liian pieni, ei toi kuva mahdu siihen ja silloin kyllä leikkautuu, ilmeisesti tästä on sun tapauksessa kyse?

Kuvan koko siis ei muutu ikkunan koon mukaan vaan on staattinen. Eikö tuo sitten ollut aiemmin noin vai?

 

[WebSlave]

Siis mulla näkyy ihan "normikäytössä" firefoxilla ja chromella (ei kokoruutunäytöllä vaan ikkunana) koko kuva ilman mitään "näytä kuva" sun muita kikkailuja. On siis kutistettu. Tietenkin jos selainikkuna on liian pieni, ei toi kuva mahdu siihen ja silloin kyllä leikkautuu, ilmeisesti tästä on sun tapauksessa kyse?

Siitä. Minulla ikkunan leveys on 1152 px ja leikkautuu noin kuten sanoin. Ilman vasemman laidan postaajatietoja mahtuisi kokonaan, niiden kanssa ei.

Kuvan koko siis ei muutu ikkunan koon mukaan vaan on staattinen. Eikö tuo sitten ollut aiemmin noin vai?

Edellisessä versiossa, pienennyksestä tiedotettiin kuvan yläpuolisessa palkissa, mutta pienennettykin kuva pakotti foorumille minimileveyden. Nyt siis kuvan näkyvää aluetta kavennetaan oikealta tarpeen mukaan, eikä se enää pakota foorumia ikkunaa leveämmäksi.

 

[Formulanomi]

Tuo kuvan "piennenys" tapahtuu css-filessa max-width:llä. Tämähän tarkoittaa sitä, että kuva esim. näytä kuvalla näkyy normaalisti. Kuvia ei siis pienennetä "oikeasti".

IMG:n määrityksistä:
max-width: 900px;

Edit: Ja sitten on selaimesta + viewportista (käytännössä selaimen koko) kiinni miten se tuon kuvan näyttää.
css -tiedoston nimi on css.php eli se saattaa tarkoittaa, että tuossa on jotain ylimääräistä logiikkaa. (ts. css muodostetaan käyttäjä-kohtaisesti riippuen selaimesta + muista tekijöistä "lennossa".)

ps. Oliskohan tohon jotain järkevämpää määritystä, kuin 900px? Millä tavalla Antti määrittelit tuon..laitoitko suoraan css:n vai miten tuo määriteltiin?

Mitkä selaimet Webbarilla ja Kuikalla on?

 

[WebSlave]

Tuo kuvan "piennenys" tapahtuu css-filessa max-width:llä. Tämähän tarkoittaa sitä, että kuva esim. näytä kuvalla näkyy normaalisti. Kuvia ei siis pienennetä "oikeasti".

Eipä tietenkään, koska max-width määrittää img-elementin maksimileveyden, johon kuvatiedosto on upotettu. Ei se itse kuvaaan millään tavalla vaikuta.

Edit: Ja sitten on selaimesta + viewportista (käytännössä selaimen koko) kiinni miten se tuon kuvan näyttää.
css -tiedoston nimi on css.php eli se saattaa tarkoittaa, että tuossa on jotain ylimääräistä logiikkaa. (ts. css muodostetaan käyttäjä-kohtaisesti riippuen selaimesta + muista tekijöistä "lennossa".)

Oletus lienee, että elementti rajaa nimenomaan oikealta ja alhaalta. Vaikuttaako jokin asemointi tai tasaus sitten asiaan on jäänyt kokeilematta.

Firefox siis toimii niin kuin pitääkin. Enpä ole itse vain muistaakseni max-widthiä img-elementissä käyttänyt. Mutta ei minun ole tarvinnutkaan toimiakaan sellaisten kuvien kanssa joihin minulla ei ole lainkaan vaikutusvaltaa.

 

[Formulanomi]

Periaatteessa yleisimmät selaimet (testasin chromella 31.0.1650.63 , operalla 12.14, ie11,ff26 --> ja nämä pienentää eli eivät katkaise) tukee tuota max-width:iä, ellei käytössä IE6 tai aikaisempi IE.
Voi tietty olla joissain muissakin selaimissa ongelmia.

http://www.w3schools.com/cssref/pr_dim_max-width.asp
The max-width property is supported in all major browsers.

Note: The value "inherit" is supported in IE8 if a !DOCTYPE is specified. IE9 supports "inherit".

Note: IE6 and earlier versions do not support the max-width property.

The max-width property is used to set the maximum width of an element.

This prevents the value of the width property from becoming larger than max-width.

Eiköhän tuon pitäisi liittyä yksinomaan ko. kuvaan.

 

[WebSlave]

Eiköhän tuon pitäisi liittyä yksinomaan ko. kuvaan.

Selvennän vielä uudestaan: Max-width ei määritä kuvan maksimileveyttä, vaan IMG-elementin (jossa kuva sijaitsee) maksimileveyden. IMG on vain "laatikko", johon sijoitetaan sisältöä (kuva). Ihan niin kuin P on "laatikko", johon sijoitetaan tekstiä. Noiden laatikoiden (elementtien) dimensioita voi sitten määrittää css:llä ja miksei html:lläkin.

 

[Formulanomi]

Selvennän vielä uudestaan: Max-width ei määritä kuvan maksimileveyttä, vaan IMG-elementin (jossa kuva sijaitsee) maksimileveyden. IMG on vain "laatikko", johon sijoitetaan sisältöä (kuva). Ihan niin kuin P on "laatikko", johon sijoitetaan tekstiä.

Niin vain IMG -elementti. Ei siihen vaikuta silloin muiden elementtien koko tai asemointi?!

---
Niin nämä ongelmat johtunevat suurimmaksi osaksi vanhemmista selaimista. Ja varmaan puhe-elimissä olevia selaimia ei olla viitsitty tai osattu päivittää. Tuohan on tietoturva-asia, joten kannattaisi päivittää. En oikein usko, että tähän kannattaisi keksiä kaikille vanhoillekin selaimille sopivaa ratkaisua. (jos sitä edes löytyykään) Tuo imagehan voi viitata ulkoisiin tiedostoihin, joita ei kannata omalle palvelimille ladata (ja "oikeasti" pienentää")

Edit: Jotta tuo max-width toimisi "oikein" sen pitäisi tukea viewport:ia eli jos selaimen koko on esim. 480
max-width pitäisi olla esim. 300px jne. Mitenköhän mahtaisi käydä prosenteilla? Tämä vbulletin on muuten responsatiivinen, mutta staattinen max-width 900px ei ole sitä..

 

[WebSlave]

Niin vain IMG -elementti. Ei siihen vaikuta silloin muiden elementtien koko tai asemointi?!

Välillisesti voi vaikuttaa. Max-width saattaa olla yhdentekevä määritys, jos img-elementti sijaitsee toisen elementin sisällä, jolla on pienempi ja kiinteästi fiksattu koko. Silloin img-elementti ei pääse venymään maksimileveyteensä. (Joissain tapauksissa kyllä saattaa tehdä sen silti, vaikkei pitäisi.) Toisaalta muita elementtejä voidaan asemoida img-elementin päälle siten, että se jää (osin) piiloon.

 

[Formulanomi]

Välillisesti voi vaikuttaa. Max-width saattaa olla yhdentekevä määritys, jos img-elementti sijaitsee toisen elementin sisällä, jolla on pienempi ja kiinteästi fiksattu koko. Silloin img-elementti ei pääse venymään maksimileveyteensä. (Joissain tapauksissa kyllä saattaa tehdä sen silti, vaikkei pitäisi.) Toisaalta muita elementtejä voidaan asemoida img-elementin päälle siten, että se jää (osin) piiloon.

No tässä tapauksessa se max-width 900px toimii (useimmilla selaimilla), eikä päälle tule muita elementtejä jne.

Tulin siihen tulokseen (tuo jälkimmäinen lisäys), että viewport:ia ei huomioida tässä eli max-width pitäisi muuttaa sen mukaan. Jos Antti on itse tehnyt tuon muotoilu komennon, niin sitä monipuolistamalla saisi ehkä toimimaan. Pitäisi siis tehdä ko. css-määritys responsitiiviseksi.

 

[Antti]

VB:ssä on oma asetus "Image Maximum Size". Muutin sen nyt 700 pikseliin, 900 taisi olla liian iso. Toimii myös vanhalla IE 9:llä. Jos ikkuna on kapea, niin kuvan oikea laita menee piiloon.

 

[Formulanomi]

VB:ssä on oma asetus "Image Maximum Size". Muutin sen nyt 700 pikseliin, 900 taisi olla liian iso. Toimii myös vanhalla IE 9:llä. Jos ikkuna on kapea, niin kuvan oikea laita menee piiloon.

Okei. Veikkaan, että ei toimi jos pienentää ruutu enämpi. (tai niinhän sie kirjoititkin...)

Responsiivisesti tuo menisi jotenkin näin.

IMG {
max-width: 900px;
}
@media screen and (max-width: 960px) {
IMG {
max-width: 600px;
}
}
...ja lisäksi vielä pienempiä ruutuja jne.

Tuohon ei oikeastaan auta minkään arvon laittaminen, mutta pienempi arvo vähentää niitä tapauksia että kuva leikkaantuu. Arvo (max-width) on varmaan sitten ihan eri (paljon pienempi) jos mobiiliteema käytössä?

 

[WebSlave]

No tässä tapauksessa se max-width 900px toimii (useimmilla selaimilla), eikä päälle tule muita elementtejä jne.

Toimii juu, mutta tosiaan muuttuu epärelevantiksi, jos selainikkuna (viewport) on niin kapea, ettei max-widthiin päästä. Ja hyvä niin.

Tulin siihen tulokseen (tuo jälkimmäinen lisäys), että viewport:ia ei huomioida tässä eli max-width pitäisi muuttaa sen mukaan. Jos Antti on itse tehnyt tuon muotoilu komennon, niin sitä monipuolistamalla saisi ehkä toimimaan. Pitäisi siis tehdä ko. css-määritys responsitiiviseksi.

Tätä en oikein ymmärtänyt. Jos viewport tosiaan on niin kapea, ettei max-widthiin ylletä, näytetään kapeampi width (kuten pitääkin). Kyllä tuo minusta kuulostaa "responsiiviselta". Ei max-width-arvon tarvitse mukautua, sehän itsessään on css:ään luotu mukautumismääritys. Kapeudelle ei ole rajaa, mutta tiettyä määrää leveämmäksi ei mennä.

Tuohon ei oikeastaan auta minkään arvon laittaminen, mutta pienempi arvo vähentää niitä tapauksia että kuva leikkaantuu. Arvo (max-width) on varmaan sitten ihan eri (paljon pienempi) jos mobiiliteema käytössä?

max-width-arvo kyllä leikkaa kuvaa, jos kuva on isompi kuin arvo. Antti voi VB:ssä määrittää kuinka isoksi näyttökuva skaalataan, mutta max-width ei kuvaa skaalaa.

 

[Formulanomi]

Toimii juu, mutta tosiaan muuttuu epärelevantiksi, jos selainikkuna (viewport) on niin kapea, ettei max-widthiin päästä. Ja hyvä niin.

Tätä en oikein ymmärtänyt. Jos viewport tosiaan on niin kapea, ettei max-widthiin ylletä, näytetään kapeampi width (kuten pitääkin). Kyllä tuo minusta kuulostaa "responsiiviselta". Ei max-width-arvon tarvitse mukautua, sehän itsessään on css:ään luotu mukautumismääritys. Kapeudelle ei ole rajaa, mutta tiettyä määrää leveämmäksi ei mennä.

max-width-arvo kyllä leikkaa kuvaa, jos kuva on isompi kuin arvo. Antti voi VB:ssä määrittää kuinka isoksi näyttökuva skaalataan, mutta max-width ei kuvaa skaalaa.

Siis kyllähän tuo max-width skaalaa kuvan (Oopeen laittaman Kuvan ominaisuudet -> 1 920px × 1 201px (pienennetty kokoon 700px × 438px), mutta vain näytöllä.

http://mattkersley.com/responsive/ --> Tuolla voi kokeilla toimiiko sivu responsatiivisesti. (ts. kaikki kuvat + tekstit näkyvät eri kokoisessa selaimessa ts. viewportin mukaan) Tai ylipäätään edes 1024 tai 768) Ja kyllähän vastaus on, että ei toimi. Ja nimenomaan kuvien staattinen määritys max-width (oli sitten 700 px tai 900px) tekee sen, että tämä sivusto ei toimi täysin responsatiivisesti.

 

[burb]

ok

 

[WebSlave]

Siis kyllähän tuo max-width skaalaa kuvan (Oopeen laittaman Kuvan ominaisuudet -> 1 920px × 1 201px (pienennetty kokoon 700px × 438px), mutta vain näytöllä.

Oopee vain upotti foorumille ison kuvan. Antin määritys sen skaalasi. Ensin se oli 900px leveä, mutta Antti muutti määrityksen 700px leveäksi, jolloin skaalauskin muuttui. Se määritys tehdään VB:ssä, ei css:llä

-Edit- No perhana, nyt kun testasin sitä omalla koneellani, niin max-width todella skaalasi kuvan. Ei sen pitäisi toimia niin.

 

[Formulanomi]

Oopee vain upotti foorumille ison kuvan. Antin määritys sen skaalasi. Ensin se oli 900px leveä, mutta Antti muutti määrityksen 700px leveäksi, jolloin skaalauskin muuttui. Se määritys tehdään VB:ssä, ei css:llä

VB generoi css:ää eli Antti antoi arvon, jonka css.php muutti css määritykseksi. Edit: Kahdesta ensimmäistä lauseesta olen siis samaa mieltä. Viimeinen on väärin, nimenomaan css:llä tuo kuvien maksimileveys määritellään. Jos vb tukisi resposatiivisuutta arvoja pitäisi voida antaa yhtä monta kuin on oletettuja viewportteja. (useita max-width arvoja). Staattisuus "pilaa tän"...ja niin itseasiassa Oopee jo kirjoittelikin.)

Muutin itse max-width:iä FF:llä ---> 300px, jolloinka kuva näkyy pienempänä --> 1 920px × 1 201px (pienennetty kokoon 300px × 188px)

 

[Formulanomi]

Huom! max-width: 100% toimisi!

Edit: Jos Antti voisi antaa ko. arvon, niin toimisi kaikilla viewporteilla. Kaikista selaimista en menisi takuuteen.