Rakennan kotisivua, jonka sivun vas. laidassa on pystypalkki, ja varsinainen teksti on toisella rajatulla alueella palkin oikealla puolella.
Ongelmani on, että kun katson sivua Internet Explorerilla (6), tekstikentässä oleva teksti sisentyy juuri niin kuin haluan, mutta Netscapessa (7.1) teksti ei sisenny lainkaan, vaan kulkee tiukasti sivupalkin rajaa vasten. Olen kokeillut erilaisia css-yhdistelmiä saamatta kohtaa toimimaan. Jos joku osaisi sanoa, mikä hommassa mättää, tässä on tämänhetkinen css-pätkä, jossa vika ilmeisesti on:
Ensin kenttä, jossa teksti sijaitsee:
div.teksti {
background:white;
background-image:none;
margin-top:8%;
margin-left:0%;
width:100%;
border:thin solid #003333;
}
Ja sitten tekstikappaleen määritteet (tämä pitäisi saada sisentymään ed. boxin sisällä ilman, että ed. boxi sisentyy):
p.asia {
color:#003333;
font-size:14px;
text-align:left;
text-indent:10px;
padding-left:5%;
margin-left:5%;
}
Toivottavasti joku nyt tästä ymmärtäisi, mitä yritin kysyä...
Ongelmani on, että kun katson sivua Internet Explorerilla (6), tekstikentässä oleva teksti sisentyy juuri niin kuin haluan, mutta Netscapessa (7.1) teksti ei sisenny lainkaan, vaan kulkee tiukasti sivupalkin rajaa vasten. Olen kokeillut erilaisia css-yhdistelmiä saamatta kohtaa toimimaan. Jos joku osaisi sanoa, mikä hommassa mättää, tässä on tämänhetkinen css-pätkä, jossa vika ilmeisesti on:
Ensin kenttä, jossa teksti sijaitsee:
div.teksti {
background:white;
background-image:none;
margin-top:8%;
margin-left:0%;
width:100%;
border:thin solid #003333;
}
Ja sitten tekstikappaleen määritteet (tämä pitäisi saada sisentymään ed. boxin sisällä ilman, että ed. boxi sisentyy):
p.asia {
color:#003333;
font-size:14px;
text-align:left;
text-indent:10px;
padding-left:5%;
margin-left:5%;
}
Toivottavasti joku nyt tästä ymmärtäisi, mitä yritin kysyä...
Vastaukset 4
Vanhimmat
" Rakennan kotisivua, jonka sivun vas. laidassa on pystypalkki, ja varsinainen teksti on toisella rajatulla alueella palkin oikealla puolella. "
Et kertonut kuinka olet sen toteuttanut. CSS-lohkoilla vai taulukolla/taulukoilla(jos taulukoilla, kuinka montaa sisäkkäistä sellaista jne).
"Ongelmani on, että kun katson sivua Internet Explorerilla (6), tekstikentässä oleva teksti sisentyy juuri niin kuin haluan"
Ongelma(mikäli sellaista varsinaisesti on) kuulostaa siltä, kuin nojaisit IEn "vikasietotilaan". Käytännössä siis doctypeä ei joko ole tai se on väärä. Varsinkin CSS:ää käytettäessä, siihen tulisi kiinnittää huomiota. IEn "vikasietotila" simuloi 5.xx versioiden käytöstä, ja tekee marginaalien/paddingin käytöstä väliin aika omituista kikkailua.
Tämä näytti sisentävän ihan kiltisti niin Firebirdillä kuin WinIE:llä(5.01) tekstin lohkonsisään. Muokkaa omia tarpeitasi vastaaviksi:
http://yojih.net/ - Feedback
body {
background: white;
color: #000;
margin: 0;
padding: 0;
}
div.teksti {
background: #fff;
color: #000;
border: 1px solid #003333;
margin: 1em;
padding: 1em;
}
p.asia {
background: transparent;
color: #003333;
font-size: 14px;
margin: 0;
padding: 0;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed faucibus scelerisque mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec purus nibh, tempor sit amet, feugiat vitae, venenatis et, nisl. Ut quis lacus. Nulla rutrum orci id elit. Aenean sit amet arcu. Sed consequat wisi ut ipsum. Nunc vulputate porttitor sapien. Sed id nisl. Etiam lorem. In in urna eget ipsum imperdiet accumsan. Aenean a lectus eu libero congue faucibus. In hac habitasse platea dictumst. Nullam porta tortor quis felis.
Jotkut editorit saattavat lisätä xml-deklaraation dokumentin ensimmäiseksi riviksi. Se kannattaa poistaa, koska se laukaisee IEn "vikasietotilan".
Huomaa, että p-luokalle on asetettu 0-arvo sekä marginaalille, että paddingille. Yleensä kannataakin asettaa noita paddingeja(varsinkin) ylemmän tason kautta.
Koitin tuota antamaasi koodia, mutta oma rakennelmani on sen verran monimutkainen, etten oikein osannut soveltaa koodia omaan tekeleeseeni. Ainoa, minkä sain irti, oli se, että minun editorini (ACE Html 5 Freeware) lisää juuri sen mainitsemasi xml-lauseen, joten otin sen pois, mutta nyt sivu näyttää aika oudolta... Sisennys kyllä alkoi toimia, mutta moni muu asia meni sekaisin.
No joo, tässä on linkki sivulle, jonka olen väsännyt tuon css:n kanssa, jos joku viitsisi katsoa, mikä siinä mättää, olisin erittäin kiitollinen. Sivulta on linkki siihen css-tiedostoonkin:
http://www.kopteri.net/koti/leena.pentti/koe1.html
Joo, kirjoitinkin sen pikaisesti vain malliksi, koska mulla ei ollut haisuakaan käyttämästäsi leiskasta.
Kun nyt opettelet CSS:n käyttöä, niin muutama vinkki, jotka helpottavat elämää sen kanssa huomattavasti:
- pyri pitämään css:n ja html:n rakenne yhtäläisenä
- käytä lyhenteitä aina kun mahdollista. Esim:
background: white url(kuva.jpg) no-repeat top center;
margin:/padding: 0 0 2em 1em(luetaan TRouBLe, Top-Right-Bottom-Left)
- Pyri organisoimaan määrittelyt esim aakkos-järjestykseen(tai muuten itsellesei sopivaan järjestykseen). Itse kirjoitan ensimmäisenä backgroundin ja sen mukana _aina_ colorin, samoin kun kirjoitan marginaalin, sen mukana tulee _aina_ padding. Ajanmyötä sitä kehittyy oma tyyli.
- Opi tuntemaan yleisimmät ongelmien aiheuttajat(esim juuri tuo margin/padding yhdessä, IEn rikkinäinen box-model, IEn quirks-tila jne)
- Kirjoita dokumentti jollain kunnon selaimella, kun kaikki toimii niinkuin haluat, ala debuggaamaan IEllä(IE-factor). Mitä monimutkaisempaa, sitä todennäköisemmin joudut alkuun tekemään kompromisseja, mutta ajan myötä se kannattaa.
- Testaa dokumentti toimivaksi mahdollisimman monella selaimella.
Parempi lista(sekä ratkaisuja ongelmiin) löytyy osoitteesta http://www.mezzoblue.com/css/cribsheet/
Kiitos, kun jaksat aina antaa vinkkejä meille aloittelijoille! Menen tutkimaan antamaasi linkkiä seuraavaksi. :)