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
501
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
Arman Alizadin viesti puna-aktivisteille: "Pitäkää lärvinne nytkin kiinni"
Arman Alizad kritisoi vasemmiston kaksinaismoralismia. Iranissa syntynyt suosikkijuontaja Arman Alizad pakeni perheensä2343992Minja Koskela nostanut vasemmistoliiton kannatuksen ennätykseen
Koskela valittiin puolueen johtoon lokakuussa 2024, ja silloin Ylen kysely antoi puolueelle 9,3 prosentin kannatuksen.1232307Antti johtaa Petteriä jo 7,1 prosenttiyksiköllä
Tällä menolla sdp menee kokoomuksesta kierroksella ohi jo tällä vaalikaudella. https://yle.fi/a/74-20213575821996- 1411461
- 77929
Seuraavakin hallitus joutuu leikkaamaan
Sitähän tämä hallitus nyt höpöttää, kun itse on ajanut tilanteen katastrofaaliseksi. Orpon hallitus lähti suurin puhein127927Hotelli kainuu
Mietityttää, hotelli Kainuussa, se, että asiakkaat voivat valita ketä saa olla ja ketä ei, Illan aikana asiakkaina!37920Ovatko vastasyntyneet vauvat syntisiä?
Se ihmisten keksimä järjetön perisynti, jos ovat!330849Pitäis vaan lopettaa
Sinun kanssa yhteydenpito. Alkaa vaan haluamaan enemmän ja tuskin lopulta mikään kohtaisi. Ja ikävä vaan kasvaa ja lähei8847J. Rinta-Joupilla jättimäinen veropetosvyyhti
Seinäjoen keskustan kiinteismiljonäärit olleet jo pitkään ahtaalla ja liittykö J. Rinta-Jouppikin rintamaan? https://yl61756