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
460
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
Ja taas ammuttu kokkolassa
Kokkolaisilta pitäisi kerätä pois kaikki ampumaset, keittiöveitset ja kaikki mikä vähänkään paukku ja on terävä.605697- 1024821
Helena Koivu on äiti
Mitä hyötyä on Mikko Koivulla kohdella LASTENSA äitiä huonosti . Vie lapset tutuista ympyröistä pois . Lasten kodista.3902842Ovatko naiset lopettaneet sen vähäisenkin vaivannäön Tinderissa?
Meinaan vaan profiileja selatessa nykyään valtaosalla ei ole minkäänlaista kirjoitettua tekstiä siellä. Juuri ja juuri s891345Suomi vietiin Natoon väärin perustein. Viides artikla on hölynpölyä. Yksin jäämme.
Kuka vielä uskoo, että viides artikla takaa Suomelle avun, jos Suomeen hyökätään. Liikuttavasti täällä on uskottu ja ved3391110- 65951
- 29928
Sydämeni on sinun luona
Koko ajan. Oli ympärilläni ketä oli niin sinä olet vain ajatuksissa ja tunteissa. En halua muiden kosketusta kuin sinun46876Trump ja Venäjä
Huomasitteko muuten... Käytännössä ainoat valtiot, joille Trump EI eilen asettanut typeriä tariffejaan, olivat Venäjä ja108856Jatkuva stressitila
On sinun vuoksesi kun en tiedä missä mennään mutta tunteeni tiedän ainoastaan52829