Tekstin pituinen taustaväritys

Thanksss

Muistaakseni jollain css-määrityksellä sai tekstiin tulevan taustavärin määriteltyä niin, että se on ainoastaan tekstin (esim. otsikon) pituinen eli ei väritä koko palstan/sivun pituudelle. Saisihan tuolle tekstille määriteltyä pituuden, mutta aika hankalaa ruuvata pituus erikseen kuhunkin otsikkoon.

style="background-color: #ccc; ... joku: jotain..."

8

496

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • gdfgdhgfjhghjhk

      jos kyseessä on teksti (p) niin

      p.sini
      {backraound-color: blue;}

      sitten siellä tekstissä:

      < p class="sini">teksti

      ja noissa ekassa ja vikassa < merkissä ei oo välilyöntiä ennen p kirjainat eikä p kirjaimen jälkeen, mutta tämä s24 sotkee koodin...

      • j

        Vaikka oikeinkirjoitus on pilkun viilausta, niin html ja css tageissa se pitää olla oikein, ei backraound-color vaan background


        h1 {
        background: #ccc;
        display: inline-block;
        }

        p {
        background: #ccc;
        display: inline-block;
        }


        otsikko
        tekstiä

        Osaat sitten lisätä tohon tarvittavat html jne... jutut


      • gdfgdhgfjhghjhk
        j kirjoitti:

        Vaikka oikeinkirjoitus on pilkun viilausta, niin html ja css tageissa se pitää olla oikein, ei backraound-color vaan background


        h1 {
        background: #ccc;
        display: inline-block;
        }

        p {
        background: #ccc;
        display: inline-block;
        }


        otsikko
        tekstiä

        Osaat sitten lisätä tohon tarvittavat html jne... jutut

        herra on hyvä vaan ja kokeilee toimiiko tuo css koodillansa...

        Tässä oikea malli:

        h1 {background-color:#6495ed;}
        p {background-color:#e0ffff;}
        div {background-color:#b0c4de;}

        ohjeet löytyy http://www.w3schools.com/css/css_background.asp asiantuntevalta sivulta... Jota kannattaisi lukea jos englanti taipuu kielenpäässä....


      • j
        gdfgdhgfjhghjhk kirjoitti:

        herra on hyvä vaan ja kokeilee toimiiko tuo css koodillansa...

        Tässä oikea malli:

        h1 {background-color:#6495ed;}
        p {background-color:#e0ffff;}
        div {background-color:#b0c4de;}

        ohjeet löytyy http://www.w3schools.com/css/css_background.asp asiantuntevalta sivulta... Jota kannattaisi lukea jos englanti taipuu kielenpäässä....

        Niin minun kirjoittama toimii juuri niinkuin kysyjä halusi. background-color:#6495ed; voidaan kirjoittaa lyhemmin background: #6495ed; lue linkittämältäsi sivulta kohta Background - Shorthand property, kannattaa lukea sivu jota linkittää ;)))

        Saatoin kirjoittaa ehkä hivenen epäselvästi, tarkoitin nimenomaan tekemääsi kirjoitusvirhettä.
        Laitan ne allekkain jotta huomaat mistä kyse. Ylemmästä selaimen css-tulkki antaa virheilmoituksen, eikä värjää taustaa.
        backraound-color
        background-color

        Sekä h1, p ja div ovat lohko elementtejä, jolloin sinun koodillasi tausta värittyy koko selainikkunan leveydeltä, sitä kysyjä ei halunnut. Vaan tekstin pituinen taustaväritys, jolloin pitää asettaa inline tai inline-block kumpa sopii tarkoitukseen paremmin. Tämänkin olisit huomannut jos olit totellut ohjeitasi jo kokeillut koodiasi ;)


      • Thanksss
        j kirjoitti:

        Niin minun kirjoittama toimii juuri niinkuin kysyjä halusi. background-color:#6495ed; voidaan kirjoittaa lyhemmin background: #6495ed; lue linkittämältäsi sivulta kohta Background - Shorthand property, kannattaa lukea sivu jota linkittää ;)))

        Saatoin kirjoittaa ehkä hivenen epäselvästi, tarkoitin nimenomaan tekemääsi kirjoitusvirhettä.
        Laitan ne allekkain jotta huomaat mistä kyse. Ylemmästä selaimen css-tulkki antaa virheilmoituksen, eikä värjää taustaa.
        backraound-color
        background-color

        Sekä h1, p ja div ovat lohko elementtejä, jolloin sinun koodillasi tausta värittyy koko selainikkunan leveydeltä, sitä kysyjä ei halunnut. Vaan tekstin pituinen taustaväritys, jolloin pitää asettaa inline tai inline-block kumpa sopii tarkoitukseen paremmin. Tämänkin olisit huomannut jos olit totellut ohjeitasi jo kokeillut koodiasi ;)

        Tuota "display: inline" hain ja toimii. Yksi erikoinen piirre siinä on nimittäin se poisti h3-tason otsikosta oletuksena olevat ylä- ja alamarginaalit, eikä vaikuta vaikka ne lisäisi erikseen (Selain: IE8). Sivumarginaalit toimii. Tällä kuitenkin pärjäillään.

        ... Thanksss ...


      • j
        Thanksss kirjoitti:

        Tuota "display: inline" hain ja toimii. Yksi erikoinen piirre siinä on nimittäin se poisti h3-tason otsikosta oletuksena olevat ylä- ja alamarginaalit, eikä vaikuta vaikka ne lisäisi erikseen (Selain: IE8). Sivumarginaalit toimii. Tällä kuitenkin pärjäillään.

        ... Thanksss ...

        Muuta inline -> inline-block niin toimii ylä ja ala marginaalitkin. Vain lohko elementeille voi määrittää ylä ja ala marginaalit, http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm tuolla on hieman teksti ja lohko elementtien eroista. inline-blockin huonopuoli on se, että se vaatii vähintään IE 8 jotta toimii, muilla selaimilla toimii ongelmitta. Tosin jos huvittaa kikkailla niin http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ saa toimimaan vanhemmilla IE versioillakin.

        "oletuksena olevat ylä- ja alamarginaalit"
        Oletuksissa on se huonopuoli, että ne ovat eri selaimilla erillaiset. Siksi kannattaa käyttää esim http://meyerweb.com/eric/tools/css/reset/reset.css ja määritellä itse tarvitsemansa. Tähtikikkaa ei kannata käyttää vaikka onkin suosittu, koska se nollaa kaikki vaikka siihen ei ole tarvetta ja se teettää lisää työtä.


      • Anonyymi
        j kirjoitti:

        Muuta inline -> inline-block niin toimii ylä ja ala marginaalitkin. Vain lohko elementeille voi määrittää ylä ja ala marginaalit, http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm tuolla on hieman teksti ja lohko elementtien eroista. inline-blockin huonopuoli on se, että se vaatii vähintään IE 8 jotta toimii, muilla selaimilla toimii ongelmitta. Tosin jos huvittaa kikkailla niin http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ saa toimimaan vanhemmilla IE versioillakin.

        "oletuksena olevat ylä- ja alamarginaalit"
        Oletuksissa on se huonopuoli, että ne ovat eri selaimilla erillaiset. Siksi kannattaa käyttää esim http://meyerweb.com/eric/tools/css/reset/reset.css ja määritellä itse tarvitsemansa. Tähtikikkaa ei kannata käyttää vaikka onkin suosittu, koska se nollaa kaikki vaikka siihen ei ole tarvetta ja se teettää lisää työtä.

        Käytä span-elementtiä


      • j
        Anonyymi kirjoitti:

        Käytä span-elementtiä

        Otsikot ovat h1 - h6 eivätkä mitään spaneja.


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Sanna Marin kysyi hämmästyneenä: Onko Suomessa jäänmurtajia?

      Nettilehden toimittaja kysyi Sanna Marinilta suoraan, että sovittiinko nuo jäänmurtajien kaupat jo 2019, jolloin Marin k
      Maailman menoa
      128
      4496
    2. Voiko normaali ihminen ryhtyä vasemmistolaiseksi?

      Tätä jäin pohdiskelemaan.
      Maailman menoa
      155
      3769
    3. SDP haluaa 40 000 nettomaahanmuuttajaa

      SDP:n Suunnanmuutos-vaihtoehtobudjetissa, käy ilmi, että demarit itse asiassa vaativat räjähdysmäistä ”työperäisen” maah
      Maailman menoa
      103
      3506
    4. Mikä tuota vasemmistolaisista jankkaavaa vaivaa?

      Pahasti on ihon alle, siis korvien väliin, päässeet kummittelemaan. Ei ole terveen ihmisen merkki jankata yhdestä asia
      Maailman menoa
      41
      2859
    5. Mitä ajattelit kun näit

      kaivattusi ensimmäisen kerran? xd
      Ikävä
      136
      1806
    6. Nyt meni lopulliset lämmöt.

      Alan käyttäytymään yhtä kylmästi miehiä kohtaan kuin mua kohtaan on käyttäydytty ja vain käytetty viimeiset pari vuotta
      Sinkut
      38
      1602
    7. Orpo loukkaantui fasismiin viittaavasta sanavalinnasta

      Mutta miksi loukkaantui? Orpohan on tehnyt yhteistyötä fasistien kanssa jo vuonna 2019, siis jo neljä vuotta ennen loukk
      Maailman menoa
      25
      1258
    8. Sulla on avaimet ja keinot

      Jos haluat jatkaa tutustumista. Itse olen niin jäässä etten pysty tekemään enää mitään. Pidempi keppi johon on helpompi
      Ikävä
      21
      1231
    9. Meitä ei tule

      Koska periaatteemme ovat rakkautta vahvempia. Tämä on siis koettelemus, jonka tarkoitus on vahvistaa meitä yksilöinä 😌
      Ikävä
      23
      1173
    10. Onko erityinen paikka jossa haluaisit nyt olla

      Onko joku spesiaali lempipaikka missä mieluiten olisit?
      Ikävä
      42
      1165
    Aihe