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

518

    Vastaukset 8

    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. Mitä on mietteissäsi

      Tänään?
      Ikävä
      71
      850
    2. En olis uskonu

      et kuulut tollaseen porukkaan
      Ikävä
      113
      779
    3. Mikä on hulluinta?

      Mitä ikäväsi kohde on tehnyt?
      Ikävä
      37
      722
    4. Meiltä löytyy kyllä älliä

      Vai mitä oot mieltä...
      Ikävä
      140
      715
    5. En haluaisi sanoa tätä

      Mutta olet sokea sille, mitä sinulla jo on! Jos minä olisin sinä, pyrkisin tekemään kaikkeni kohentaakseni nykyistä pari
      Ikävä
      40
      619
    6. Et taida olla ihan varma

      Päätöksestäsi?
      Ikävä
      70
      617
    7. Miltä tuntuu

      olla erossa kaivatustasi?
      Ikävä
      28
      508
    8. Koska Sofia kertoo totuuden, että ovat eroneet miljonääri miehen kanssa?

      Eikö olisi hänelle itselleen helpotus, kun voisi kertoa totuuden. Miksi salata asiaa ja pitkittää sitä harmaan tulevaisu
      Kotimaiset julkkisjuorut
      157
      505
    9. Vasemmiston aloite

      Pyhäjärvellä, ihan hyvä aloite. Toteutus ja puhdistus pitäisi alkaa ihan omasta pesästä. Näkeehän tuon sokeakin mitä ja
      Pyhäjärvi
      58
      493
    10. Onko suhtautuminen kaivattusi

      Fyysiseen vetovoimaan muuttunut? Jos, mihin suuntaan? Tunnetko enemmän vai vähemmän vetoa häneen fyysisesti kuin silloin
      Ikävä
      35
      468
    11. Muistelen lämmöllä

      Se oli vaikein päätös, jonka olen joutunut tekemään. En pidä valehtelusta, mutta näin sait päätöksen asioille. Rakasti
      Ikävä
      46
      463
    12. Tunnistan mun rakkaan

      Kirjoituksen heti kun se on täällä. Mä vaan tiedän sen ja tunnen 🤗
      Ikävä
      69
      455
    13. Ajattelitko ikinä pyytää anteeksi?

      Tiedät kyllä mistä.
      Ikävä
      63
      455
    14. Miksi vihainen

      Miksi olet vihainen mulle?
      Ikävä
      41
      432
    15. Maajussille morsian: Farmiviikon voittajat ja häviäjät - Itkua ja pettymystä ei salattu

      Maajussille morsian -suosikkisarjassa farmiviikolla selviää, onko ilmassa "sitä jotakin". Rakkauden etsintä on täynnä i
      Maajussille morsian
      0
      432
    16. Tyrkytät ittees liian

      tasokkaille :)
      Ikävä
      45
      423
    17. Hei, alettaisko oleen yhdessä?

      Miltä tuntuisi jos joku ihminen josta tykkäät sanoisi haluavansa yhteen asumaan? Ajattelisitko menettäväsi vapauden, pys
      Sinkut
      74
      416
    18. Näyttää siltä ettet edes sinä.

      Kukaan ei uskalla kohdata aitoa ja syvää sielun rakkautta. Hyvin harvat vain. Ihmisten on turha tavoitella sitä oikeaa
      Ikävä
      30
      408
    19. Miten oletkin noin

      osaamaton kaikin tavoin :)
      Ikävä
      35
      408
    20. Jos olen aiheuttanut pahaa, pyydän anteeksi

      Jos olen omalla kirjoittelullani aiheuttanut täällä jollekin pahaa mieltä tai sotkenut asioita, niin pyydän sitä anteeks
      Ikävä
      59
      405
    Aihe