Kirjautuminen

Haku

Tehtävät

Kilpailu

Ohjelmoi tekoäly!
Aikaa on 14.6. saakka.

Keskustelu: Nettisivujen teko: iPhone ja button elementti

Sivu 1 / 1

pistemies [19.03.2020 15:18:56]

Lainaa #

Tässä on tullut eteen eräs harvinaisempi pulma, joka liittyy iPhonen tapaan tulkita html- elemetttejä. Miten seuraavan skriptin saa toimimaan iPhonessa:

<button><img style="width:100%" title="" src="kuva.png"/></button>

Tässä kuvan korkeus siis asettuu automaattisesti sen mukaan, mikä on sen leveys, yleensä suunnilleen 60 px.
Iphone ei ymmärrä suurentaa tätä buttonin korkeutta mitenkään, vaan näyttää buttonin normaalina kapeana painikkeena ikään kuin olettaen buttonin sisältävän lyhyen yhden rivin tesktin.

vesikuusi [19.03.2020 17:09:57]

Lainaa #

Buttonin korkeus saattaa olla määritelty oletustyyleissä. Oletko kokeillut esim. asettaa buttonille jonkun oman tyylin? Mieleen tulee jotain tällaista.

<button class='btn-wrap-img'><img style="width:100%" title="" src="kuva.png"/></button>
.btn-wrap-img {
    height: auto;
    overflow: hidden;
    display: inline-block;
}

pistemies [19.03.2020 18:30:02]

Lainaa #

Kiitos ehdotuksesta. Sain tämän toimimaan ilman, että yrittää tunnistaa selainta. Muutin buttonille leveyden ja korkuden arvoon 100% ja lisäsin kuvalle korkeuden 'auto'.

The Alchemist [20.03.2020 05:39:03]

Lainaa #

On huonoa käytöstä olla antamatta kuvalle eksplisiittisesti leveys- ja korkeusarvoja. Ota title-attribuutti kokonaan pois äläkä määritä sitä tyhjäksi merkkijonoksi. Alt-attribuutti on pakollinen, laita sille tyhjä merkkijono arvoksi. Napilla pitäisi myös olla tekstisisältö, jotta ihmiset tietäisivät, mitä se tekee.

pistemies [20.03.2020 12:10:35]

Lainaa #

Kiitos The. Tässä on kyseessä maksutapa sovellus, joka listaa eri pankkien logoja pienen pienen lomakkeen kanssa. On minulla tekstiä tuossa titlessä, vaikka tuossa esimerkissä se puuttuu. Se on hyvä olla, sillä pankin logo ei kaikille aina välttämättä nopeasti kerro, mistä pankista on kyse.
Tähän liittyvässä palvelunatarjoajan esimerkki-skriptissä ei ole minkäänlaista muotoiluja näille elementeille, lisään tuon Altin.

Metabolix [20.03.2020 12:39:57]

Lainaa #

Jos tarkoitus on tehdä kuva lomakkeen lähettämiseen, hyvä vaihtoehto voi olla <input type="image">, jolloin button jätetään kokonaan pois.

Vastaus

Muista lukea kirjoitusohjeet.
Tietoa sivustosta