Minulla on seuraava, todennäköisesti aika yksinkertainen ongelma. Yritän tehdä sivun ylälaitaan koko sivun leveyksistä palkkia, jossa olisi tekstiä. Palkin sivuille ja yläreunaan jää kuitenkin ehkä 10 pikselin verran valkoista, vaikka leveys on säädetty 100 prosenttiin. Miksi?
CSS:
#ylapalkki{
width: 100%;
height: 50px;
padding: 10px;
background-color:#A8A8A8;
}HTML:
<head> <link rel="stylesheet" type="text/css" href="tyyli.css"> </head> <div id="ylapalkki">Tekstiä</div>
Ehkäpä siksi, että palkin ulkopuolella eli pakollisessa body-elementissä (joka tosin puuttuu HTML-koodistasi) on sen verran tyhjää. Pääset haluamaasi tulokseen tällä koodilla:
body {
margin: 0;
padding: 0;
}Lisäksi kannattaa lisätä HTML-koodiin sellaiset osat kuin DOCTYPE, html ja body, jos ne vielä jostain syystä puuttuvat.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Otsikko</title> <link rel="stylesheet" type="text/css" href="tyyli.css" /> </head> <body> <div id="ylapalkki">Tekstiä</div> </body> </html>
Kannattaa aina projektin alussa ottaa käyttöön jonkinlaiset ns. css reset -tyylit.
Tässä nyt vaikka yksi luultavasti hyvä esimerkki: http://meyerweb.com/eric/tools/css/reset/
Reset-tyylien tarkoitus on sekä tarjota W3C:n säätämiä oletuksia "järkevämpi" pohja sivujen tyylittämiseen sekä myös eliminoida niiden löyhyydestä johtuva eri selainten tapa määrittää pienet yksityiskohdat hieman toisistaan poikkeavilla tavoilla.
The Alchemist kirjoitti:
Kannattaa aina projektin alussa ottaa käyttöön jonkinlaiset ns. css reset -tyylit.
Käärmeöljyjä kannattaa välttää. ”Reset-tyyleillä” voi ampua itseään jalkaan ja luoda ongelmia, joita ei osannut aavistaakaan.
Tässä tapauksessa riittää mainiosti tehdä ne pari asetusta, jotka vaikuttavat juuri siihen asiaan, johon halutaan vaikuttaa.
lainaus:
Tässä nyt vaikka yksi luultavasti hyvä esimerkki: http://meyerweb.com/eric/tools/css/reset/
Et ole selvästikään lukenut, mitä Eric Meyer itse kirjoittaa asiasta. Eipä ole moni mukaan reset-tyylien suosittelija.
lainaus:
Reset-tyylien tarkoitus on sekä tarjota W3C:n säätämiä oletuksia "järkevämpi" pohja
W3C ei ole säätänyt oletuksia, ja selainten soveltamat oletukset ovat yleisesti paljon järkevämmät kuin reset-tyylien aiheuttama tyylittömyys.
Lisäys:
Metabolix kirjoitti:
Ehkäpä siksi, että palkin ulkopuolella eli pakollisessa body-elementissä (joka tosin puuttuu HTML-koodistasi) on sen verran tyhjää.
Body-elementti on aina mukana. Sen sijaan <body>-tagin ei tarvitse olla (paitsi XHTML:ssä), joten on turha huomauttaa sen puuttumisesta.
Ehdotuksesi, jossa body-elementin margin- ja padding-ominaisuus asetetaan nolliksi, on kyllä oikea. Havaittu ilmiö johtuu juuri siitä, että selainten yleisten oletusarvojen mukaan body-elementillä on 8 pikselin levyiset reunukset (margin). Tarkoitus on mm. estää tekstin meneminen liian lähelle ikkunan reunoja.
Jos halutaan aivan ylös värillinen palkki, niin reunukset on siis syytä nollata. Mutta silloin pitää muistaa huolehtia riittävästä tyhjästä tilasta kaikkialla, missä teksti voisi mennä muuten liian lähelle reunoja – siis käyttää sopivia margin- tai padding-asetuksia muualla.
Eikös tuohon tiedoston alkuun riittäisi tämäkin:
*{
margin: 0;
padding: 0;
}Yucca kirjoitti:
Käärmeöljyjä kannattaa välttää. ”Reset-tyyleillä” voi ampua itseään jalkaan ja luoda ongelmia, joita ei osannut aavistaakaan.
Tätä aina toitotetaan mutta voiko joku selventää näitä mahdollisia ongelmia ihan vaikka käytännön esimerkein? Itse olen resetoinut jo niin kauan että kaikki tarvittavat tyylimäärittelyt tulee automaattisesti kunkin elementin tyylittelyn kohdalla kunhan semmoisen vain eteen tulee.
Joskus tullut vastaan argumentteja ettei voi tietää mitä elementtejä kävijä käyttää sivuilla. Mitä?! Tottakai pitää tietää mitä se voi käyttää/tehdä ja edetä sen mukaan.. Toinen yleinen on se että turhaa kasvatetaan tiedosto kokoa jolloin tekee mieli kysyä että mitä vuotta tässä eletään.
edit,
Pentu kirjoitti:
Eikös tuohon tiedoston alkuun riittäisi tämäkin:
*{ margin: 0; padding: 0; }
No tuo aiheuttaa ongelmia ennemmin kuin Meyerin muokkaamatonkin resetti
edit2, en nopealla googlailulla löytänytkään syitä että taisi sittenkin olla ongelmia vain jos universaalilla nollataan myös borderit..
Kiitos. Tuo auttoi.
Borderien nollaamisessa ongelmana on se, että jotkin selaimet yrittävät käyttää käyttöympäristön natiiveja widgettejä esim. buttoneihin ja select-laatikoihin. Borderin muokkaaminen rikkoo nämä widgetit, jolloin selain fallbackaa rumiin kulmikkaisiin laatikkoelementteihin.
Aihe on jo aika vanha, joten et voi enää vastata siihen.