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
483
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
Persujen VigeIius noIasi taas itsensä
Kun uhriutui vuonna 2024 (siis persujen "vahtivuorolla") Tampereella aloittaneen perheryhmäkodin toiminnasta. ”Leviää k1633518Työeläkkeen saamiseksi olisi tehtävä töitä
Meillä on Suomessa iso joukko ihmisiä, joilla olisi vielä työkykyä jäljellä, mutta joilta puuttuu arjesta mielekäs tekem482586Oli kiva nähdä sut
vaikkakin kaukaa ja nopeasti. Tiedän kyllä tasan tarkkaan missä mennään, joten anteeksi jos pilasin päiväsi, ei ollut mi332564Kohtalokas laukaus
IL 20.9.25 "Ihminen kuoli baarin edustalla Kajaanissa Poliisi ei epäile tapauksessa rikosta." "Kajaanin keskustassa on k142379Joko alkaa menemään tajuntaan tämä yliluonnollinen yhteys?
Varmaan pikkuhiljaa. Muista olla kiltisti ❤️232223Vasemmistoliitto peruisi sosiaaliturvan heikennykset
He palauttaisivat työttömyysturvan ja asumstuen suojaosat, eli saisi jälleen tienata 300 euroa kuukaudessa ilman tukien831952Linux Mint asennus kaatuu heti alkuun
Tulee kernel panic BIOS-tekstin jälkeen. Yritän ensimmäistä kertaa asentaa Linux Minttiä vanhalle Windows 10 -läppärill91898Jos voisit kysyä
Kaivatultasi vielä yhden kysymyksen, mikä se olisi? Aloitan: Mitä sinä halusit minusta?1561813Pesäpallo rulettaa
Hehkutin täällä aikaisemmin Mansen naisten joukkueen Suomen mestaruutta. Jostain kumman syystä kirjoitustani ei enää löy31633Nyt trollataan ainoastaan maahanmuutosta!
Unohdetaan hallituksen leikkaukset ja Perussuomalaisten valheet ja nostetaan Perussuomalaiset uudelleen suureksi 💪711532