Moi!
Ensimmäinen ongelma on se että kun laitan content osiossa tohon bottom kohtaan 0 niin katoaa sivun yläosasta toi header osio kokonaan. Jos taas otan poies ton bottom määrittelyn kokonaan, content osio jatkuu sitten vielä footerin alapuolelle. Miten saisin niin että toi bottom olisi 0 ja hederkin näkyisi?
Toinen ongelma on taustakuvan kanssa, kun zoomaa sivua, taustakuva pitäisi pysyä vakiona koko ajan, eikä muuttua sivun mukana, mahdollista? miten?
http://sarjankylankeskusta.dy.fi/
#body {
margin: auto;
width: 100%;
height: 100%;
position: absolute;
background-image: url('kuvat/tausta.png');
padding-top: 0px;
}
#header{
width:100%;
height: 136px;
background-image:url('kuvat/body.png');
font-color: white;
}
#content{
width: 964px;
height: 100%;
background-color: white;
text-align: left;
position:absolute;
background-image:url('kuvat/body.png');
bottom:0px;
}
#footer{
width:100%;
height:200px;
background-color: 7A7566;
color:white;
position:absolute;
bottom:0;
}Mod. vaihtoi oikeat kooditagit, CSS ei ole PHP!
CSS-validointi löysi 28 erroria. Ehkä kannattaa korjata nuo ihan ensin, ja yrittää sitten uudestaan. Headerin saa kyllä helposti näkyville, mutta tyylitiedosto on tällä hetkellä niin rikki, ettei pelkästään headerin näkyminen paljon hyödytä. Html:ssä on validoinnin suhteen vain muutama korjattava kohta.
Taustakuvaan liittyvää kysymystä en tajunnut ollenkaan.
Joo no toi css tiedostoo on nyt muokkailut ton viestin jälkeen, ja täytyy ne errorit korjata. Niin siitä taustasta, kun siinä on kuva jossa on kaksi väriä vierekkäin, tarkoitus olisi niin että keskellä on valkoinen osio, contetn ja sen toisella puolella näkyisi toinen väri ja toisella toinen väri. Mutta nyt kun zoomaa näyttöä pienemmäksi (ctrl + hiiren rulla) niin toiselle puolle tulostuu molempia värejä, eli siis se toistuu se kuva siellä. Onko siis mahdollista ko. zoomausta käyttäessä mahdollista pitää silti tausta vakio kokoisena?
Edit.
Mitenkäs tälläinen korjattaisiin/kirjoitettaisiin toisin?
margin-right: 50%px;
En tiedä miten tausta pysyisi koossa 100% samalla kun muu sisältö näytetään vaikkapa koossa 10%. Koska et määrittele tyylitiedostossa kuvan toistumista, niin se toistetaan x- ja y-suunnissa niin usein kuin se näytölle mahtuu. Ja zoomaamalla sivua pienemmäksi kuva mahtuu siis toistumaan useammin.
Ehkä helpointa olisi tehdä taustakuvasta leveämpi. Nyt mitat on näköjään 2012x98 pikseliä. Jos tuosta tekis vaikka 7000x1 pikselin kokoisen, niin tiedostokoko pysyisi silti kohtuullisena (jopa pienempänä kuin nyt). Jotkin uusimmat selaimet toisaalta osaavat näyttää yhdessä elementissä kaksi erillistä taustakuvaa.
Okei, eiköhän tolla ratkee se taustakuva ongelma.
Mutta tunnistaako toi css-validointi css3-koodia? Koska mielestäni seuraavassa ei ole mitään virheitä, toki voin olla väärässä:
-webkit-transform: skew(-40deg,0deg);
edit.
Jaa tuolla lukeekin että css 2.1... mutta miten toi margin juttu korjataan?
dartvaneri kirjoitti:
Okei, eiköhän tolla ratkee se taustakuva ongelma.
Mutta tunnistaako toi css-validointi css3-koodia? Koska mielestäni seuraavassa ei ole mitään virheitä, toki voin olla väärässä:-webkit-transform: skew(-40deg,0deg);edit.
Jaa tuolla lukeekin että css 2.1... mutta miten toi margin juttu korjataan?
Tuo ei ole validia CSS:ää millään mittarilla. Kyse on - kuten nimikin kertoo - Webkitin omasta, standardiin kuulumattomasta määrittelystä.
Mutta käsittääkseni jos otan ton webkit höskän pois, ei toimi ko. koodi chormella ja safarilla.
Edit. Ja lisäksi toinen ongelmistani kaipaisi apua
dartvaneri kirjoitti:
Mitenkäs tälläinen korjattaisiin/kirjoitettaisiin toisin?
margin-right: 50%px;
Ainakin minulle "%px" on tuntematon yksikkö. Valitse joko % tai px (tai vaikka em), mutta ei molempia sekaisin. Tuon ohjeen toki varmaan jo löysit jollain hakukoneella, joista tulee tuloksia aika paljon myös suomeksi.
dartvaneri kirjoitti:
Mutta käsittääkseni jos otan ton webkit höskän pois, ei toimi ko. koodi chormella ja safarilla.
Sinulla on nyt määritelty transform ilmeisesti vain webkitille. Onko ajatuksenasi siis se, että efekti näkyy vain noilla selaimilla, vai oletko unohtanut jotain? Eipä se kyllä kaikilla selaimilla tulisi toimimaan, mutta sen varmaan tiesitkin.
Käyttämäsi CSS on minusta kokonaisuutena edelleen niin sekavaa, että itse aloittaisin kokonaan ihan alusta.
jaketsu kirjoitti:
Ainakin minulle "%px" on tuntematon yksikkö. Valitse joko % tai px (tai vaikka em), mutta ei molempia sekaisin.
%px = 0.01 px eli 800%px olisi 8px. Mutta toki selaimet ei noin hienoon viritykseen taivu, joten pakko käyttää vaan toista.
Jos dartvanerilla tosiaan on tarkoitus laittaa puolen pikselin marginaali, niin 0.5px saattaisi toimia. En tosin osaa sanoa miten selaimet toimii vajailla pikseleillä.
Joo sori, mulla tullu joskus pieni kämmi, kun esim tollanen määrittely joka alla on. kun otan ton px pois perästä, se heittää jompaan kumpaan laita ton bodyn sisällön. Mutta nyt kun oikein tarkemmin tarkastalin huomasin että mulla on automaatti määritys, että määhän voin huoleta ottaa poies noi leftin ja rightin :)
#body {
margin: auto;
margin-left: 50%px;
margin-right: 50%px;
width: 964px;
height: 100%;
text-align: center;
background-color:gray;
padding-top: 0px;
}Mutta mulla ois vielä toi alkuperäinen ongelma ratkaisematta, että miksi se header katoaa sinne ylös?
edit. tai siis syyhän tiedetään, mutta siis miten korjata se?
edit2. Joo mää tiedän ton että toi ei toimi kuin chormella ja safarilla, mutta kun lisään -moz- , -ms- ja -o- alut ton webkitin tilalle.
#content
{
height: 100%;
text-align: left;
background: #fff;
}Tuolla pääset alkuun, vaikka sivu ei näytä pelkästään tällä muutoksella mitenkään hyvältä millään selaimella (joo, on makuasia). Tyylitiedostossasi on aika paljon ihan turhaa, eikä tuo pikku korjaus paljon pelasta, mutta sillä saat sen headerin näkyville. Sulla oli contentille säädetty musta taustaväri, jonka päällä valkoinen kuva. Kai siihen on joku peruste, mutta otin silti esimerkistä kuvan pois ja vaihdoin taustan suoraan valkoiseksi.
Jos yrittäisit selittää millaisen ulkoasun oikeastaan haluaisit, niin ehkä joku kertoisi miten kannattaa edetä.
Ja edittiä jo ennen lähetystä: teit näköjään koodiin juuri tätä kirjoittaessani muutoksia, ja header näkyy nyt, mutta footer on poistunut näkyvistä.
Kokeilepa tätä:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sadan prosentin sivu</title>
<style type="text/css">
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
margin: 0 auto;
}
#content {
padding-bottom: 3em; /* Footerin verran tilaa. */
}
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3em;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</body>
</html>Toinen (minusta parempi) vaihtoehto on hankkiutua eroon tuosta sadan prosentin pakkomielteestä ja ottaa absoluuttinen sijoittelu ja korkeuskikkailut pois. Sivu loppuu, kun sivu loppuu; jos se on sinusta liian lyhyt, keksi lisää sisältöä.
Ja jos sisällön keksiminen tuottaa tuskaa niin http://fi.lipsum.com/
ongelma on ratkastu. ei sisällön kanssa ole ongelmia.
dartvaneri kirjoitti:
ongelma on ratkastu. ei sisällön kanssa ole ongelmia.
Hyvä jos ratkesi. En nyt halua mitenkään masentaa tai aukoa päätäni, mutta kannattaa katsoa sivua myös Internet Explorerilla. Versiosta 7 alkaen taaksepäin sivu näkyy ilmeisesti aika väärin. Tuohan ei tietysti haittaa, jos olet varma, että kaikilla sivulla kävijöillä on tuota uudempi selain, tai jos ulkoasulla ei ole väliä.
jaketsu kirjoitti:
Versiosta 7 alkaen taaksepäin sivu näkyy ilmeisesti aika väärin.
Onko tämä suomeksi ilmaistuna "Versiolla 7 ja sitä vanhemmilla..." ?
Itse en kyllä stressaisi tippaakaan jos IE6:lla joku sivu näkyy väärin. Ko. selaimen käyttäjät mitä ilmeisimmin haluavat katsella omituisen näköisiä nettisivuja.
Myös IE8:ssa se näyttää melkein täsmälleen samalta kuin IE7:ssa, eli hyvin erilaiselta kuin esim. Chromessa.
Grez kirjoitti:
Onko tämä suomeksi ilmaistuna "Versiolla 7 ja sitä vanhemmilla..." ?
Kyllä. Tarkemmin sanoen IE9 näyttää sivun väärin, kun selaintilana ja asiakirjan tilana on IE7. Oikealla vanhalla selaimella en pääse testaamaan. IETester näyttää sivun vähintään yhtä väärin, kun laittaa sen leikkimään IE6- tai vanhempaa versiota. Uusimmat Opera, Chrome, Firefox ja IE näyttävät sivun juuri tällä hetkellä ehkä siten kuin on tarkoitus.
IE6 on vielä tänä syksynä teettänyt minulla aika paljon ylimääräistä hommaa, kun tein pari sivustoa aluksi toimimaan tarkoitetulla tavalla vain vähän uudemmilla selaimilla. Sivujen tilaajat antoivat sitten ymmärtää, että pitäisi näkyä oikein myös vanhemmillakin (heillä käytössä IE6).
jaketsu kirjoitti:
Tarkemmin sanoen IE9 näyttää sivun väärin, kun selaintilana ja asiakirjan tilana on IE7. Oikealla vanhalla selaimella en pääse testaamaan.
Itse testaan IE6-IE8 virtuaalikoneissa. Mikkisoftalta voi ladata imaget juuri tähän tarkoitukseen: http://www.microsoft.com/download/en/details.
jaketsu kirjoitti:
Sivujen tilaajat antoivat sitten ymmärtää, että pitäisi näkyä oikein myös vanhemmillakin (heillä käytössä IE6).
No olettaen että sivut nyt ei suorastaan käyttökelvottomat olleet IE6:lla, niin olisit vaan sanonut niille, että sinulla on sen verran korkea ammattietiikka, että et suostu tekemään sivuja, jotka kannustavat käyttämään tietoturvareikää nimeltä IE6.
jlaire kirjoitti:
Itse testaan IE6-IE8 virtuaalikoneissa. Mikkisoftalta voi ladata imaget juuri tähän tarkoitukseen: http://www.microsoft.com/download/en/details.
aspx?id=11575
Kiitos vinkistä. Olenkin joskus miettinyt VirtualBoxin asennusta, mutta ei ole vielä tullut asennettua. Tuolla linkkaamallasi sivulla lukee XP:n kohdalla:
lainaus:
Expires: This image will shutdown and become completely unusable on November 17, 2011.
XP on ainoa tuolla tarjolla olevista, joissa on mukana IE6, muissa on 7-9.
Grez kirjoitti:
No olettaen että sivut nyt ei suorastaan käyttökelvottomat olleet IE6:lla, niin olisit vaan sanonut niille, että sinulla on sen verran korkea ammattietiikka, että et suostu tekemään sivuja, jotka kannustavat käyttämään tietoturvareikää nimeltä IE6.
Suosittelin toki molemmissa tapauksissa lämpimästi päivittämään selaimen johonkin parempaan. Lisäksi laitoin jokaiselle sivulle näkymään sopivasti korostettuna:
<!--[if lt IE 7]> <p class="selain">Käytät näköjään todella vanhaa selainta. Kannattaa vaihtaa se välittömästi uuteen esim. jostain seuraavista linkeistä: <a href="http://www.mozilla.org/fi/firefox/new/">Firefox</a>, <a href="http://windows.microsoft.com/fi-FI/internet-explorer/products/ie/home">Internet Explorer</a> tai <a href="http://www.opera.com/download/">Opera</a>. Vanha selain on tietoturvariski, eivätkä nykyaikaiset sivut aina näy tai toimi sillä niin kuin on tarkoitettu.</p> <![endif]-->
Tuo sitten ehkä näkyy IE6:n käyttäjällä tai sitten ei näy, mutta ainakin yritin antaa käyttäjälle palautetta.
jaketsu kirjoitti:
Tuolla linkkaamallasi sivulla lukee XP:n kohdalla:
lainaus:
Expires: This image will shutdown and become completely unusable on November 17, 2011.
Nyt sitten vaan arvaamaan, onko MS:llä unohdettu laittaa uusi image tuonne vai unohdettu vaan päivittää toi vanhenemisteksti.
Veikkaan että unohtunut kokonaan päivittää. Asiasta voisi tietty pistää viestiä mikkisoftalle.
jaketsu kirjoitti:
Olenkin joskus miettinyt VirtualBoxin asennusta, mutta ei ole vielä tullut asennettua.
Yritin joskus saaja noita imageja toimimaan VirtualBoxilla ja totesin, että ei maksa vaivaa.
Joo, noihan toimii suoraan heittämällä jos niitä käyttää siinä mille ne on tehty eli VirtualPC:ssä eli Microftin virtualisointisysteemissä.
Kuvallesi kuvaavampi tiedostonimi olisi this_is_oracle
Grez kirjoitti:
Kuvallesi kuvaavampi tiedostonimi olisi this_is_oracle
Windowshan siinä kaatuu. Eräillä muilla käyttöjärjestelmillä käynnistäminen mahdollisesti onnistuisi laitteiston vaihtuessakin.
Blaze: Olet varmaan napsutellut kaikki mahdolliset asetukset VirtualBoxista läpi? Entä onko VMwaresta kokemusta tässä? Levykuvaa voisi myös yrittää modata jollain Live CD:llä VirtualBoxin migraatio-ohjeita epämääräisesti soveltaen, jos tilaaja maksaa työajan. ;)
Toimisikohan VirtualPC jo ReactOS:ssä? :P
Metabolix kirjoitti:
Windowshan siinä kaatuu. Eräillä muilla käyttöjärjestelmillä käynnistäminen mahdollisesti onnistuisi laitteiston vaihtuessakin.
Mahdollisesti. Mutta oman kokemuksen mukaan Linuxikin kyllä kaatuu jos vaihtaa rautaa lennossa.
Sitä paitsi tuossa on mahdollisesti asennettuna VirtualPC:lle tehty virtualisointiajuri, joka myös voi aiheuttaa kaatumisen muussa virtuaalikoneessa.
No okei, ehkä kuvaavin nimi kuvalle olisi this_is_virtualpc_image_on_virtualbox
Nuista selaimista sen verta, että tarkoitus on tehdä IE7 -->, opera, safari, chrome ja firefox toimivat. Mutta aattelin ensin tehdä ton chrome loppuun, jotta sitten näkee tarkalleen minkälainen ulkoasu tulee. Sitten vasta lähtee muokkaa niitä IE yms. yhteensopiviksi.
Edit. Ootte oikeessa, siitä, että tuola tiedostossa on paljon turhaa, niitä jo äsken yritin hieman karsia. Mää oon käyttänyt tuota samaa pohjaa, tosin pienillä muutoksilla monessa omassa sivu projussa. Enkä sitten ole hoksannut katsoa, että miten turhia noi kaikki on. Ehkä pitää tästä lähtien tehdä alusta kaikki css tiedostot, niin tulee sitten mahdollisesti parempaa jälkeä.
Miten saan tossa ie:ssä ton palkin keskelle, kun se käy chromessa ja firefox:sissa komennolla margin:auto; ?
Eipä taida kuvauskielessä juuri olla komentoja.
Eikö margin: auto tosiaan toimi IE:ssä? Voit kokeilla vanhaa purkkaratkaisua:
#palkki {
position: relative;
left: 50%;
margin-left: -123px; /* puolet leveydestä */
}Kyllä IE:ssäkin toimii "margin: auto". On toiminut jo ainakin kutosversiosta alkaen. Teet vain virheellistä HTML:ää. Kova on tavoite hyvästä selainriippumattomuudesta, mikäli et edes aio validoida merkkaustasi.
hmm. Okei, tolla oli muutama moka ton html validoinnin suhteen, niitä ei enää ole, mutta eipä se siltikään toimi. Joten ainakaan ton validaattorin antamien errorien korjaaminen ei auttanut.
Aihe on jo aika vanha, joten et voi enää vastata siihen.