HTML ja CSS

[jhh]

Olen tehnyt leiskan, joka on 900px leveä. Miten sainkaan määriteltyä taustakuvan siten, että kun laitan tarpeeksi tekstiä, niin taustaväri laskee automaattisesti niin alas kun tekstiä riittää?
Jotain clear: both? (mutta minne se kirjoitetaan ja mitä muuta pitää vielä muualle kirjoittaa)?

[Juhani L]

Puhut tuossa sekä taustaväristä että taustakuvasta. Onko kumpikin käytössä? Teet sivut varmaan nykyaikaisella tavalla lohkoista (DIV), joiden käytöstä komennetaan CSS:llä? Määrittele lohkolle taustaväri vaikka näin CSS:ssä:

Koodi: Valitse kaikki

.mukavaboksi {
   margin: 2px;
....
    background-color: #ddd; }

CSS-oppaita on pilvin pimein. Niistä löytyy hyvät neuvot taustavärien ja -kuvien hallintaan.

P.S. Miksi teet vakioleveyksisen leiskan? Mulla on 1680 pikselin levyinen näyttö ja haluan nauttia siitä täysin siemauksin? Naapurin Villellä on 1920 pikseliä leveä näyttö ja hänelle tulee vielä kurjempaa. Broidilla on taas iPhone, joka ei sekään ole parhaimmillaan 900 pikselin jäykillä nettisivuilla. Ole joustava!

[jhh]

Kiitos. Miten tehdään leiska, mikä ei ole vakioleveyksinen? :-0

[morbusg]

Kiitos. Miten tehdään leiska, mikä ei ole vakioleveyksinen? :-0

Määrittämällä leveyden(/leveydet) suhteellisessa mittayksikössä (esim. %, em).

[Juhani L]

Kiitos. Miten tehdään leiska, mikä ei ole vakioleveyksinen? :-0

Lue tämä erään austraalialaisen juttu ja tule nirvanaan. Myös tuolla vähäpätöisiä neuvoja.

[MiniMe]

Juhanilta ihan hyvä pointti, että sivut voi tehdä myös skaalautuviksi. Kannattaa kuitenkin pohtia tapauskohtaisesti, että sopiiko tähän tarkoitukseen paremmin skaalautuva, vähän skaalautuva vai vakiolevyinen malli. Yleensä skaalautuvilla sivustoilla joudutaan tinkimään ulkoasuratkaisuissa, mutta vastavuoroisesti ne sitten toimivat paremmin erikokoisilla ruuduilla. Mikäli haluat lähteä suunnittelemaan skaalautuvaa sivustoa, kannattanee tuolloin perehtyä myös css:n min-width ja max-width -ominaisuuksiin.

Esimerkiksi sivu: http://matthewjamestaylor.com/blog/holy ... s-mode.htm näyttää ruudullani aivan naurettavalta, jos venytän nettiselaimen kokoruudun levyiseksi. Kokonainen tekstikappale mahtuu tuolloin yhdelle rivillen ja kuvien viereen jää tolkuttomasti valkoista aluetta (tämän vuoksi pidänkin selainikkunaa aika kapeana). Onhan se skaalautuva, mutta tuossa tapauksessa katselisin mieluummin vaikka vakioleveyteen taitettua sivua, missä kuvat ja teksti menevät sopusuhtaisesti. Ulkopuolelle jäävä tila saa puolestani jäädä sitten omaan arvoonsa...

[morbusg]

kannattanee tuolloin perehtyä myös css:n min-width ja max-width -ominaisuuksiin.

Ja ennenkaikkea siihen miten IE ei tue niitä.

[Juhani L]

Yleensä skaalautuvilla sivustoilla joudutaan tinkimään ulkoasuratkaisuissa.

No, ainahan sekä skaalautuvilla että jäykillä sivuilla joutuu tinkimään ulkoasuratkaisuista. Ensin on mietittävä, mitä haluaa sivuilla olevan. Sitten on mietittävä, miten se esitetään. Usein skaalautuva sivu toimii hyvin. Mutta jos sivun tekijän mielestä sisällön on oltava vaikka 780 pikseliä leveä, sitten me laajaa selainikkunaa käyttävät katselemme sivun sisällön vieressä jotain hilpeää täytekuvaa tai taustaväriä.

[jhh]

Puhut tuossa sekä taustaväristä että taustakuvasta. Onko kumpikin käytössä? Teet sivut varmaan nykyaikaisella tavalla lohkoista (DIV), joiden käytöstä komennetaan CSS:llä? Määrittele lohkolle taustaväri vaikka näin CSS:ssä:

Koodi: Valitse kaikki

.mukavaboksi {
   margin: 2px;
....
    background-color: #ddd; }

CSS-oppaita on pilvin pimein. Niistä löytyy hyvät neuvot taustavärien ja -kuvien hallintaan.

P.S. Miksi teet vakioleveyksisen leiskan? Mulla on 1680 pikselin levyinen näyttö ja haluan nauttia siitä täysin siemauksin? Naapurin Villellä on 1920 pikseliä leveä näyttö ja hänelle tulee vielä kurjempaa. Broidilla on taas iPhone, joka ei sekään ole parhaimmillaan 900 pikselin jäykillä nettisivuilla. Ole joustava!

Eli mulla on InDesignellä tehty tausta(pohja), joka on 900x500px ja siinä keskellä kuva joka on 200px korkea.
Siihen taustavärin päälle (kuvan alle) sitten haluan kirjoittaa tekstiä ja haluaisin että taustaväri jatkuisi taustalla niin pitkälle kun tekstiä on...
Sivut on tehty DIVeillä ja niitä komennetaan CSS:llä.

- taustaväri on määritelty noin kun olet opastanut, ongelma vaan on, että miten saan sen jatkumaan automaattisesti oikean korkuisesksi tekstin mukaan?
- olen pilkkonut palan siitä taustavärialueesta ja nimennyt sen "jatkosisalto" ja sen alla alatunniste "footer"

Koodi: Valitse kaikki

#jatkosisalto {
	width:900px;
	background:#CCCCCC repeat-y;
}

#footer {
	clear:both;
	height: 20px;
	margin: auto;
	text-align:center;
} 

Mitähän mahtaa olla väärin?

[Juhani L]

Sun täytyy kertoa vähän tarkemmin sivun layoutin html- ja css-sisällöstä. Mikä on sivun lohkorakenne? Jos sulla on määritelty esimerkiksi keskipalstalle tai pääpalstalle leipislohko, laittaisin taustavärin tälle.

Pieni nyanssi: koska käytät onneksi nettiturvallisia värejä, ne voit esittää lyhyesti kolmella heksakoodilla, vaikkapa näin: background:#ccc. Ei tartte pitkästi ja huutaen: background:#CCCCCC

[avpn]

Eikös tämä aihe kuuluisi ennemmin tuonne ohjelmointipuolelle?

Ihan vain vinkkinä, kannattaa tutustua niihin virallisiin ohjeisiin mm. tuon laatikkomallin toiminnasta. Sisällön pitäisi kyllä venyttää laatikon korkeutta automaattisesti ellei jonnekin ole määritelty "overflow:hidden" tai "overflow:auto" -arvoa. Ja taustan väristä voi ylimääräisten kirjainten lisäksi tiputtaa pois sen repeat-y:n. Se väri määrää kyllä koko laatikon värin.

Clear määrää vain sen, tuleeko kyseisen elementin viereen leijuvia (float) elementtejä. Eli "clear:both" sanoo, että leijuvia elementtejä ei tule tämän elementin kummallekaan puolelle. Sitä ei tarvitse, jos floateja ei ole määritelty.

http://www.w3schools.com/css/ antaa aika hyvät perusesimerkit css:n käytöstä. Jos et ole vielä katsonut, kannattaa lukaista läpi.

[Perduel]

Jos sivuilla on paljonkin tekstisisältöä niin ei missään nimessä kannata tehdä täysin skaalautuvaa sivustoa, koska siinä on tietty raja josta eteenpäin elementin leveys on liian suuri ja luettavuus (käyttökokemus) kärsii rankasti.

[Juhani L]

Jos sivuilla on paljonkin tekstisisältöä niin ei missään nimessä kannata tehdä täysin skaalautuvaa sivustoa, koska siinä on tietty raja josta eteenpäin elementin leveys on liian suuri ja luettavuus (käyttökokemus) kärsii rankasti.

Toki pitkissä yhtenäisissä teksteissä pitkät rivit ovat rasittavia. Skaalautuvilla sivuilla voidaan käyttää muutamaa temppua: kappaleiden väliä suurennetaan, mikä parantaa luettavuutta; jos sivulla on kuvia, ne laitetaan vuoroin oikealle ja vasemmalle, jolloin tekstirivit eivät ole niin pitkiä ja sivun layout kestää hyvin varsin erilaiset selainikkunoiden leveydet. Tuolla ja tuolla on sivuja, joissa tekstin joustavuutta voi kokeilla kovin kapeilla ja leveillä selainikkunoilla.