Terve!
Saimme koulussa "kotitehtäväksi" pienimuotoiset sivut. Omani ovat melko pitkällä, mutta on pari ongelmaa. Tässä sivut: http://mehtonen.wippiespace.com/valokuvat.html
Ongelmia:
Kuten huomaa, ylhäällä olevan navigointipalkin reunapyöristys on tehty kuvalla, jolle tein erillisen divin. Se toimii kuitenkin pelkästään FF:llä, muttei muilla selaimilla. Jos muutan paikkaa, se toimii muilla selaimilla, muttei FF:llä.
Kyseisen divin CSS-pätkä:
#navikuva{
background: url('navinurkka.jpg') no-repeat;
width: 20px;
height: 20px;
position: relative;
top: 20px;
left: 140px;
}Ei ole väliä, että onko position absolute vai relative, se ei vaikuta. Miten saisin sen pysymään samalla paikalla kaikilla selaimilla?
Ja vielä validoinnin kanssa vähän ongelmaa:
Jostain syystä w3 validator ei ensinnäkään hyväksy meta-tietoja, valittelee tämmöistä:
lainaus:
Line 11, Column 59: document type does not allow element "META" here
<meta name="keywords" content="valokuvaus">The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Ja sama valitus on author-metan kanssa?
Valittaa että tiedostossa on ei-aukinainen head-tagi, joka on minusta aivan oikein. Valittaa tämmöistä:
lainaus:
Line 13, Column 13: end tag for element "HEAD" which is not open
</head>The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
If this error occurred in a script section of your document, you should probably read this FAQ entry.
[/k]
Ja bodyn kanssa joatin häikkää, ei hyväksu body-tagia?:
lainaus:
Line 14, Column 12: document type does not allow element "BODY" here
<body>The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Omasta mielestäni nuo kaikki ovat oikein, mutta mikä niissä on?
Kiitos etukäteen, jos edes vähäsen osaatte auttaa. :)
E: Laitan vielä html-koodin tähän, jos selventää asiaa:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 TRANSITIONAL//EN"
"http://www.w3.org/TR/html4/loode.dtd">
<html>
<head>
<title>Tepon sivut | Valokuvat</title>
<link rel="stylesheet"
type="text/css" media="screen"
href="tyyli.css" />
<meta name="keywords" content="valokuvaus">
<meta name="author" content="Teppo Mehtonen">
</head>
<body>
<div id="ylarivi">
<img src="ylakuva.jpg" alt="Otsikko"><br>
</div>
<div id="navikuva">
</div>
<div id="navi">
<p>
<A href="index.html">Alkusivulle</a> | <A href="valokuvat.html">Valokuvat</a> | <A href="valineet.html">Välineet</a>
</p>
</div>
<div id="vasen">
<p> <a href="elaimet.html">Eläimiä</a><br>
<a href="luonto.html">Luonto</a><br>
<a href="muut.html">Muut</a><br>
<a href="panoramat.html">Panoraamat</a><br>
</p>
</div>
<div id="teksti">
<p>
Täällä on valokuvia. Siirry katsomaan kuvia sivupalkin linkeistä. Suurempia kuvia ja tarkempia kuvauksia voi katsella klikkaamalla pientä kuvaa.
</p>
</div>
<div id="alaosa">
<p><a href="index.html">Alkusivulle</a> |(C) Teppo Mehtonen</p>
</div>
</body>
</html>Kulmanpyöristysjuttuun en sano mitään kun en jaksa miettiä. Kirjoitusvirhe tuolla kuitenkin on.
Tuossa doctypessä pitäisi olla loose eikä loode :P
"http://www.w3.org/TR/html4/loode.dtd">
Noniin, se on muokattu. Tuli pari varoitusta lisää validaattoriin liittyen vissiin tuohon validointitekstinpätkään.
lainaus:
No Character Encoding Found! Falling back to UTF-8.
None of the standards sources gave any information on the character encoding labeling for this document. Without encoding information it is impossible to reliably validate the document. As a fallback solution, the "UTF-8" encoding was used to read the content and attempt to perform the validation, but this is likely to fail for all non-trivial documents.
Read the FAQ entry on character encoding for more details and pointers on how to fix this problem with your document.
Unable to Determine Parse Mode!
The validator can process documents either as XML (for document types such as XHTML, SVG, etc.) or SGML (for HTML 4.01 and prior versions). For this document, the information available was not sufficient to determine the parsing mode unambiguously, because:
* the MIME Media Type (text/html) can be used for XML or SGML document types
* the Document Type (-//W3C//DTD HTML 4.01 TRANSITIONAL//EN) is not in the validator's catalog
* No XML declaration (e.g <?xml version="1.0"?>) could be found at the beginning of the document.
* No XML namespace (e.g <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">) could be found at the root of the document.As a default, the validator is falling back to SGML mode.
Mismatch between Public and System identifiers in the DOCTYPE declaration
This document uses an inconsistent DOCTYPE declaration. The System Identifier http://www.w3.org/TR/html4/loose.dtd declares the HTML 4.01 Transitional document type, but the associated Public Identifier -//W3C//DTD HTML 4.01 TRANSITIONAL//EN does not match this document type.
The recommended Public Identifier for http://www.w3.org/TR/html4/loose.dtd is -//W3C//DTD HTML 4.01 Transitional//EN.
The safest way to use a correct DOCTYPE declaration is to copy and paste one from the recommended list and avoid editing that part of your markup by hand.
Mitä noille pitäisi tehdä? En oikein saanut juonesta kiinni, mitä niissä selitetään?
Mutta nuo errorit pysyivät vielä, eli niissä on jotain.
Viimeisessä virheessä sanotaan aivan suoraan, että TRANSITIONAL pitäisi kirjoittaa enimmäkseen pienellä, Transitional. Keskimmäinen johtuu samasta. Ylin taas johtuu siitä, ettet lainkaan ilmoita sivun käyttämää merkistöä. Voit katsoa vaikka tämän sivun lähdekoodista, millaisella meta-tagilla merkistön voi ilmoittaa.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Muista valita oikea merkistö. Jos et tiedä asiasta mitään ja käytät Windowsia, ISO-8859-1 tai Windows-1252 luultavasti toimii.
Kiitoksia, ei oikein tämä englanti taivu kaikin osin tuon validaattorin kanssa. :)
Korjaan nuo, seuraava huolenaihe ovat nuo errorit liittyen metaan, headiin, bodyyn + se pyöristys.
E: Korjasin, varoitukset tosiaan lähtivät. Hyvä juttu.
E2: Kun nyt lisäsin tuon meta-tiedon, niin errorien määrä kasvoi yhdellä. Valittaa samaa, kuin mitä keywords- ja author -metojen kanssa.
Eikös tuo tyylitiedoston link-tagi ole XHTML muodossa kun se päättyy /> ? Auttaisi kenties noihin meta kohtien virheisiin...
Heinoa, kiitoksia. Se auttoi muihinkin erroreihin. :))
Atk-opettaja näköjään vahingossa laittanut väärän ohjeen, sillä tuon koodinpätkän piti olla html-muodossa. No, ongelma ratkesi.
On enää yksi varoitus:
Mismatch between Public and System identifiers in the DOCTYPE declaration
This document uses an inconsistent DOCTYPE declaration. The System Identifier http://www.w3.org/TR/html4/loose.dtd declares the HTML 4.01 Transitional document type, but the associated Public Identifier -//W3C//DTD HTML 4.01 Transitional//EN does not match this document type.
The recommended Public Identifier for http://www.w3.org/TR/html4/loose.dtd is -//W3C//DTD HTML 4.01 Transitional//EN.
The safest way to use a correct DOCTYPE declaration is to copy and paste one from the recommended list and avoid editing that part of your markup by hand.
Johtuuko tuosta iso-pieni -hommasta? En nyt ottanut oikein selvää... Vaikka sen olevinaan pienellä kirjoitin.
No, läpi meni erroreiden osalta. :)
E: Tohkeissani en muistanut yhtä ongelmaa: Kuten kaikki huomaavat, vasen sivupalkki on aina tietyn kokoinen. Se johtuu siitä että jouduin määräämään sille korkeuden pikseleissä, koska ei muuten toimi. Ei onnistu määrittäminen prosenteissa tai mitenkään. Jos laitan prosenteissa korkeuden, vasen div on niin pieni mitä pystyy olemaan.
Mikä neuvoksi?
Tälläistä on css-koodi:
#vasen {
margin-left: 150px;
margin-top: 5px;
margin-bottom: 10px;
float: left;
width: 100px;
height: 1040px;
margin-right: 10px;
padding: 15px;
color: black;
background-color: #2a2a2a;Kokeile tehdä internet explorelle ja FF lle omat css tiedostot.
Miten se tehdään?
Mites tuo sama tehdään FF:n kanssa? Mikä on se komento, mikä on tuolla IE? Kun Firefox on tällä kertaa se ongelma, IE 8 ja muut toimii oikein.
Ei sellaista olekkaan. En ole koskaan törmännyt ongelmaan, jossa vain Firefox olisi toimimaton. Kerrotko lisää ongelmasta?
Hyvin todennäköisesti IE:t toimivat väärin mutta koodissasi on onnekas virhe, jonka vuoksi luulet, että ne toimisivat oikein.
Äh, kävinkin uudelleen testaamassa Operalla tuota sivua, ja tuo toimii nyt kun laitoin oikean linkityksen css-tiedostoon. Sitä ennen tuo navigointipalkin pyöristys ei toiminut Firefoxilla.
Nyt ainoa ongelma on se, etten saa vasemman reunapalkin korkeutta määrättyä muuten kuin pikseleinä. Ja siinä taas ei ole järkeä.
Lisää divien #vasen ja #teksti ympärille vaikka uusi div #sisalto. Sitten muutoksia:
#sisalto {
position: relative;
}
#vasen {
/* float: pois */
position: absolute;
left: 0;
top: 0;
}Kellutettu elementti ei noudata prosentuaalisia korkeuksia. Prosentuaalinen korkeus toimii absoluuttisissa elementeissä. Sen lisäksi 100% otettaisiin body-elementin mukaan, mikäli väliin ei tungettaisi #sisalto-elementtiä, jolle on määritelty position: relative;
Merri kirjoitti:
...
Noniin, sain korkeuden laitettua pronsenteissa. Paikka on vielä hakusessaan, mutta kyllä sekin vielä. :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.