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ä
Tekstin/linkkien sijainti mättää eri selaimilla
5
486
Vastaukset
- Höpö
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.- Noviisi
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! :-) - Noviisi
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?? - kai _
Noviisi kirjoitti:
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 - Höpö
Noviisi kirjoitti:
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! :-)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..
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Sanna Marin kysyi hämmästyneenä: Onko Suomessa jäänmurtajia?
Nettilehden toimittaja kysyi Sanna Marinilta suoraan, että sovittiinko nuo jäänmurtajien kaupat jo 2019, jolloin Marin k1364704- 1753867
SDP haluaa 40 000 nettomaahanmuuttajaa
SDP:n Suunnanmuutos-vaihtoehtobudjetissa, käy ilmi, että demarit itse asiassa vaativat räjähdysmäistä ”työperäisen” maah1153576Mikä tuota vasemmistolaisista jankkaavaa vaivaa?
Pahasti on ihon alle, siis korvien väliin, päässeet kummittelemaan. Ei ole terveen ihmisen merkki jankata yhdestä asia432891- 1361826
Nyt meni lopulliset lämmöt.
Alan käyttäytymään yhtä kylmästi miehiä kohtaan kuin mua kohtaan on käyttäydytty ja vain käytetty viimeiset pari vuotta401648Orpo loukkaantui fasismiin viittaavasta sanavalinnasta
Mutta miksi loukkaantui? Orpohan on tehnyt yhteistyötä fasistien kanssa jo vuonna 2019, siis jo neljä vuotta ennen loukk261279Onko erityinen paikka jossa haluaisit nyt olla
Onko joku spesiaali lempipaikka missä mieluiten olisit?501257Sulla on avaimet ja keinot
Jos haluat jatkaa tutustumista. Itse olen niin jäässä etten pysty tekemään enää mitään. Pidempi keppi johon on helpompi211251Meitä ei tule
Koska periaatteemme ovat rakkautta vahvempia. Tämä on siis koettelemus, jonka tarkoitus on vahvistaa meitä yksilöinä 😌231193