Tekstin pituinen taustaväritys

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

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

Lue lisää

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ä....

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ä....

Lue lisää

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 ;)

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 ;)

Lue lisää

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 ...

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 ...

Lue lisää

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ä.

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ä.

Lue lisää

Käytä span-elementtiä

Anonyymi kirjoitti:

Käytä span-elementtiä

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