Olen vasta aloittanut opetella css:ää. Tein perus sivupohjan, jossa on omissa diveissään otsikko, sen alla main menu, sitten vierekkäin sidemenu ja text -alue ja alimpana footeri.
Sivu näyttää muuten suht ok:lta, mutta tuossa main menussa olevat linkit näkyvät ie:llä keskellä mainmenu divin taustakuvaa, mutta firefoxilla taustakuvan alalaidassa ja operalla alalaidan alareunan päällä...
Toinen ongelma on textialueen leveys, miten se määritellään?
Voisiko joku kertoa missä mättää?
Tässä pätkät koodia, ensin css, sitten html:
#frame
{background:url(grafiikat/frame.jpg);
margin:0 auto;
width:80%;
background-repeat:repeat-y;}
#header
{background:url(grafiikat/header.jpg);
height:180px;}
#mainmenu
{background:url(grafiikat/mainmenu.jpg);
height:30px;
background-repeat:no-repeat;}
#mainmenu ul
{list-style:none;
word-spacing:20px;
float:right;}
#mainmenu li
{display:inline;
font-weight:bold;}
#text
{width:auto;}
#sidemenu
{float:left;
width:200px;
height:500px;
border-right-style:dashed;
border-right-width:1px;
border-right-color:#003300;}
#sidemenu ul
{list-style:outside none;
line-height:2.0;}
#footer
{background:url(grafiikat/footer.jpg);
height:20px;
clear:both;
text-align:center;}
LINKKI
LINKKI
LINKKI
LINKKI
LINKKI
LINKKI
LINKKI
Linkki
Likki
Linkki
Otsikko!
Tähän tulee tekstiä.....p>
Tekstiä
Sivu näyttää muuten suht ok:lta, mutta tuossa main menussa olevat linkit näkyvät ie:llä keskellä mainmenu divin taustakuvaa, mutta firefoxilla taustakuvan alalaidassa ja operalla alalaidan alareunan päällä...
Toinen ongelma on textialueen leveys, miten se määritellään?
Voisiko joku kertoa missä mättää?
Tässä pätkät koodia, ensin css, sitten html:
#frame
{background:url(grafiikat/frame.jpg);
margin:0 auto;
width:80%;
background-repeat:repeat-y;}
#header
{background:url(grafiikat/header.jpg);
height:180px;}
#mainmenu
{background:url(grafiikat/mainmenu.jpg);
height:30px;
background-repeat:no-repeat;}
#mainmenu ul
{list-style:none;
word-spacing:20px;
float:right;}
#mainmenu li
{display:inline;
font-weight:bold;}
#text
{width:auto;}
#sidemenu
{float:left;
width:200px;
height:500px;
border-right-style:dashed;
border-right-width:1px;
border-right-color:#003300;}
#sidemenu ul
{list-style:outside none;
line-height:2.0;}
#footer
{background:url(grafiikat/footer.jpg);
height:20px;
clear:both;
text-align:center;}
LINKKI
LINKKI
LINKKI
LINKKI
LINKKI
LINKKI
LINKKI
Linkki
Likki
Linkki
Otsikko!
Tähän tulee tekstiä.....p>
Tekstiä
Vastaukset 5
Vanhimmat
Et saa valmista vastausta mutta pari vinkkiä silti.
Ensinnäkin, mikä dtd sinulla on ilmoitettu sivulla. Ainakin IE näyttää sivut eri tavalla riippuen siitä ilmoitetaanko dokumenttityypiksi html4.01 Transitional vai 4.01 Strict.
Ilman määrittelyä taitaa näkyä kuten Transitionalissa.
Kun alkaa noita elementtien määrittelyjä tekemään tolleen tarkemmalla kädellä, niin voi olla ihan hyvä idea nollata selainten oletusmarginaalit ja täytteet heti alkuunsa:
* { margin:0; padding:0;}
Voi olla hyvä idea myös asettaa elementeille jokin reunus niin on helpompi tarkkailla mihin ne asettuvat:
* { border: 1px solid Red }
Itse käytän aina joko reunuksia tai taustavärejä (tai molempia) silloin kun vasta asettelen sivun elementtejä kohdalleen.
Korjaa myös html-koodissa olevat virheet. Ei niitä montaa ollut, ja nekin ilmeisesti ihan huolimattomuudesta johtuvia (suljetaan tageja joita ei ole avattukaan joku puuttuva < -merkki ). Silti kannattaa ekaksi tarkistaa ettei mitään tuollaista virhettä ole olemassa. Nekin saattavat toisinaan aiheuttaa ties mitä. Tästä ei kyllä tällä kertaa ole kyse.
Kiitos vinkeistä. Tuo reunaviiva tosiaan auttaa hirveästi hahmottamisen kanssa!
Dokumenttityyppi on:
Mutta nyt siis sitten pitäisi sen avulla osata asemoida elementit oikeisiin paikkoihin. Osaat varmasti, mutta haluaisitko vinkata, mitä kaikkea määrityksiä tuonne stylesheetiin pitäisi tehdä?
Nyt kun poistin nuo marginit ja paddingit, niin kaikilla selaimilla mainmenun ja footerin teksti näkyy divin ylälaidassa. Se pitäisi saada keskelle diviä (pystysuunnassa).
Lisäksi pitäisi saada tyhjää tilaa tekstin vasemmalle puolelle ja tekstin yläpuolelle (ettei teksti ala heti mainmenun jälkeen), samoin sidemenuun tyhjää yläpuolelle. Sidemenun tulisi olla irti vasemmasta reunasta.
Näitä yritin tehdä paddingeilla, mutta se siis näytti eri selaimissa erilaiselle.
Muitakin hyviä vinkkejä/kommentteja saa laittaa! :-)
Korjasin muuten nuo virheet html-koodissa. Testasin sekä css:n että htlm:n niillä W3C:n validaattoreilla. Muuten oli molemmat oikein, mutta css:ssä antoi seuraavan warningin:
Line : 28 (Level : 1) You have no background-color with your color : a:visited
Line : 28 (Level : 1) You have no background-color with your color : a:visited
Line : 33 (Level : 1) You have no background-color with your color : a:active
Line : 38 (Level : 1) You have no background-color with your color : a:hover
Pitäisikö tuolle tehdä jotain??
niille mitään tarvi tehdä... Nehän on vain varoituksia.
Mutta yleensä teksti/taustavärin kanssa on niin, että jos määrittelee toisen, niin pitäisi määritellä se toinenkin. Ettei tule 'mustaa tekstiä mustalla taustalla'. Jotain aiheesta:
http://www.jamesshuggins.com/h/web1/background_colors.htm
Suosittelen käyttämään mieluummin Strictimääritystä:
(huomaa että tämä foorumi muuttelee toisinaan koodia. nyt taitaa tulla ylimääräinen puolipiste (eli ; -merkki) tuohon koodiin)
Nimittäin tuolloin jopa InternetExplorer osaa vähän enemmän kuin loosella. Tosin sitten koodin pitäisi myös olla strictiä. Se taas ei tunnu sinulle olevan mikään iso ongelma.
»..Mutta nyt siis sitten pitäisi sen avulla osata asemoida elementit oikeisiin paikkoihin...»
Miten olisi yksinkertainen
padding-top: 10px;
tai jotain vastaavaa..
»Lisäksi pitäisi saada tyhjää tilaa tekstin vasemmalle puolelle ja tekstin yläpuolelle (ettei teksti ala heti mainmenun jälkeen), samoin sidemenuun tyhjää yläpuolelle. Sidemenun tulisi olla irti vasemmasta reunasta.»
Kuten viimeksi mainitsin, myös taustavärit ovat käteviä tässä vaiheessa.
Koitappa vaikka:
#text {background-color: Silver;}
Tuo kertoo jotain. Sen jälkeen asetat #textille vaikka marginaaleja. Testatessani 13em vaikutti jotensakin siedettävältä:
#text {
background-color: Silver;
margin-left:13em;
}
Tietysti voi tarkemminkin testata missä ne elementit todella sijaitsee, esim:
#text p {background-color: Aqua;}
taikka jotain vastaavaa.
Voi muuten olla ihan hyvä idea pistää sinne css-tiedostoon kommentit perään kun kyse on myöhemmin poistettavista määrityksistä. Testausta varten kertyy roskaa. Ehkä sen siivoaminen on sitten helpompaa, css-sivuista kun tulee helposti varsin pitkiä rimpsuja.
#text {
width: auto;
background-color: Silver; /* ----testausta varten */
margin-left:13em;
}
»Line : 38 (Level : 1) You have no background-color with your color : a:hover
Pitäisikö tuolle tehdä jotain??»
Kyseessä on varoitukset, ei varsinaiset virheet. Jotkin selaimet eivät ymmärrä kunnolla css:n elementtien periytyvyyttä. Usein noissa kohdissa käytetäänkin varmuuden vuoksi taustavärina transparenttia (eli läpinäkyvää, eli ei-taustaväriä):
a:hover {
color: Red;
background-color: transparent;
}
Nyt on varmaan jo tullut koodiin sen verran muutoksia, että seuraavaan kysymykseesi voisit liittää tämänhetkisen koodin..