Olen tekemässä ensimmäistä kertaa nettisivuja. Olen googlettanut ja lukenut oppaita väsymykseen asti. Ongelma olis tuollainen:
Tuo -> http://koti.mbnet.fi/koitto/index.html pitäisi näyttää tuolta -> http://koti.mbnet.fi/koitto/mites.html. Jos pistän nou linkit "toimimaan" niin silloin ne irtoavat toisistaan ja jää tollaset välit. Mites nuo välit mahtaisi saada pois ja et näyttäis tuolata jälkimmäiseltä kuvalta.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>Sivun koitto</title> <link rel="stylesheet" href="tyyli.css" type="text/css" /> </head> <body> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="ylatunniste"> </tr> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_02.jpg"></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_03.jpg"></a></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_04.jpg"></a></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_05.jpg"></a></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_06.jpg"></a></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_07.jpg"></a></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_02.jpg"></th> </tr> </table> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="pikkuvaaka"> </tr> </table> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_10.jpg"></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_11.jpg"></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_12.jpg"></th> </tr> </table> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_13.jpg"></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_14.jpg"></th> </tr> </table> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_16.jpg"></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_17.jpg"></th> </tr> </table> </body> </html>
body {
background:#000000
}
.ylalaatikko {
width:900px;
}
.ylatunniste {
background:url('http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_01.jpg');
width:900px;
height:165px;
}
.pikkuvaaka {
background:url('http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_09.jpg');
width:900px;
height:51px;
}Varmaan aikas sekava mut ekaa kertaa tekemässä ja muutenkin otetaan mielellään viisaammilta vinkkejä vastaan. Iso kiitos jo etukäteen avusta.
Mod. lisäsi kooditagit.
Linkkaaminen aiheuttaa kuville borderin. Laita img:lle border=0
Lisäksi tulis mieleen, että kun sivulla on 40 virhettä*, niin selain saattaa mennä quirksmoodiin ja näyttää siten kuin antiikin aikaan sivuja näytettiin.
Niamu kirjoitti:
Olen tekemässä ensimmäistä kertaa nettisivuja. Olen googlettanut ja lukenut oppaita väsymykseen asti. Ongelma olis tuollainen:
Kehnoja oppaita olet lukenut, jos niiden lukemisen jälkeen olet vielä tehnyt sivun layoutin taulukkotaitolla. Onko sivun layout mielestäsi taulukkomuotoinen sisältö? Alla esimerkki taulukosta:
Mittaustulokset esineelle A: Nopeus Liikemäärä 1 m/s 1 kg·m/s 5 m/s 10 kg·m/s 15 m/s 30 kg·m/s
XHTML on hieno merkkauskieli; valitettavasti saadaksesi siitä täyden edun, palvelimen on tarjoiltava tiedosto XHTML:n MIME-tyypillä; helpoiten tämä käy muuttamalla tiedostopääte muotoon ".xhtml". Tämän jälkeen voitkin sitten kokeilla, että mille riville asti XHTML-yhteensopiva selain (kuten Firefox (ja johdannaiset), Opera, WebKit-selaimet) sivuasi tulkitsee (vinkki: ei kovin pitkälle).
Grez kirjoitti:
Linkkaaminen aiheuttaa kuville borderin. Laita img:lle border=0
Eikös parempi ratkaisu olisi css-määrite?
a img {
border: none;
}Tämä estää kaikkien linkkien sisällä olevien kuvien borderit.
villev kirjoitti:
Eikös parempi ratkaisu olisi css-määrite?
Kyllä ja ei.
Nykyään ("nykyään") yleinen käsitys sivutehtailijoiden mielestä on, että "linkkikuvan" ympärille ilmestyvät kehykset ovat rumia, ja ne pitää piilottaa. Niin tai näin, tämä edustaa melko huonoa käytettävyyttä varsinkin silloin, kun ei ole täysin ilmeistä, että kuva on myös linkki.
Toki CSS-määre on parempi kuin lähestulkoon täysin epäsemanttinen border-attribuutti, mutta noin laajana .. ei välttämättä kuitenkaan.
villev kirjoitti:
Grez kirjoitti:
Linkkaaminen aiheuttaa kuville borderin. Laita img:lle border=0
Eikös parempi ratkaisu olisi css-määrite?
a img { border: none; }Tämä estää kaikkien linkkien sisällä olevien kuvien borderit.
Lisäsin ton tonne .css kansioon mut vieläkin jää pieni "katko" linkkien väliin http://koti.mbnet.fi/koitto/index.html
body {
background:#000000
}
.ylalaatikko {
width:900px;
}
.ylatunniste {
background:url('http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_01.jpg');
width:900px;
height:165px;
}
a img {
border:none;
}
.pikkuvaaka {
background:url('http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_09.jpg');
width:900px;
height:51px;
}Kuten jo edellisessä viestissä sanoin, niin Chrome, FireFox, Internet Explorer ja Safari (ja todennäköisesti kaikki muutkin selaimet) sanoo:
document.compatMode
"BackCompat"
Eli sivu pyörii quirksmodessa, koska siinä on edelleen virheitä. Mun mielestä jokseenkin turha yrittää tehdä mitään muuta ennen kuin tuo on korjattu.
eq kirjoitti:
Niamu kirjoitti:
Olen tekemässä ensimmäistä kertaa nettisivuja. Olen googlettanut ja lukenut oppaita väsymykseen asti. Ongelma olis tuollainen:
Kehnoja oppaita olet lukenut, jos niiden lukemisen jälkeen olet vielä tehnyt sivun layoutin taulukkotaitolla. Onko sivun layout mielestäsi taulukkomuotoinen sisältö? Alla esimerkki taulukosta:
Mittaustulokset esineelle A: Nopeus Liikemäärä 1 m/s 1 kg·m/s 5 m/s 10 kg·m/s 15 m/s 30 kg·m/s
Tai sitten en ole oikein ymmärtänyt ja kokeilemalla toi oli nyt ainut keino millä sain ton edes näyttämään sinnepäin. Kun ei tuo lontoo oikein suju ja ei noi suomeksi kirjotetut (ainakaan mitä vastaan on tullut) ole mitään hyviä. Voi olla etten ole ite myöskään tajunnut kun vähän vaikeita on nuo.
eq kirjoitti:
Kuten jo edellisessä viestissä sanoin, niin Chrome, FireFox, Internet Explorer ja Safari (ja todennäköisesti kaikki muutkin selaimet) sanoo:
document.compatMode
"BackCompat"Eli sivu pyörii quirksmodessa, koska siinä on edelleen virheitä. Mun mielestä jokseenkin turha yrittää tehdä mitään muuta ennen kuin tuo on korjattu.
Kun katoin noita virheitä ni en oikein tajua miten ne korjataan kun osa niistä on nyt ihan varmati oikein ja http://validator.w3.org/check?uri=http://koti.
Grez kirjoitti:
Kuten jo edellisessä viestissä sanoin, niin Chrome, FireFox, Internet Explorer ja Safari (ja todennäköisesti kaikki muutkin selaimet) sanoo:
document.compatMode
"BackCompat"Eli sivu pyörii quirksmodessa, koska siinä on edelleen virheitä. Mun mielestä jokseenkin turha yrittää tehdä mitään muuta ennen kuin tuo on korjattu.
Erityisesti nyt, sillä AP poisti doctype-määrittelyn tiedoston alusta. Selaimet eivät kuitenkaan pienistä virheistä (vaikkakin monesta) vaihda tilaa; useimmat tyytyvät tuohon doctypeen.
Näköjään tunnut tietvän asioista aikas paljon ja nyt alkaa tuntumaan siltä et mitä enemmän neuvotaan ni sitä enemmän rupeen olemaan hukassa vai teenkö asioista vain niin vaikeita. Jos vielä koittaisit vääntää rautalangasta kun olen aikas vasta alkaja et mitän nyt tehdään et saisin koodin oikein. Nyt on tollaset kirjotettu:
<html> <head> <title>Sivun koitto</title> <link rel="stylesheet" href="tyyli.css" type="text/css" /> </head> <body> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="ylatunniste"> </tr> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_02.jpg"></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_03.jpg"></a></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_04.jpg"></a></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_05.jpg"></a></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_06.jpg"></a></th> <th><a href="http://www.google.fi/"><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_07.jpg"></a></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_02.jpg"></th> </tr> </table> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="pikkuvaaka"> </tr> </table> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_10.jpg"></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_11.jpg"></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_12.jpg"></th> </tr> </table> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_13.jpg"></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_14.jpg"></th> </tr> </table> <table class="ylalaatikko" width="900" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_16.jpg"></th> <th><img src="http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_17.jpg"></th> </tr> </table> </body> </html>
ja css
body {
background:#000000
}
.ylalaatikko {
width:900px;
}
.ylatunniste {
background:url('http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_01.jpg');
width:900px;
height:165px;
}
a img {
border:none;
}
.pikkuvaaka {
background:url('http://koti.mbnet.fi/koitto/Kuvat/Sivu_pohja_09.jpg');
width:900px;
height:51px;
}Tollasen on tulos http://koti.mbnet.fi/koitto/index.html
Näköjään aikas pitkä virhelista:
http://validator.w3.org/check?uri=http://koti.mbnet.fi/koitto/index.html&charset=(detect automatically)&doctype=Inline&group=0
Jos saa udella ni miten olisit itse ton tehnyt? Itse en saanut aseteltua noita muuten kuin noin ja ekana koitin css:llä määrittää noiden palikoiden paikat mut ei tullu mitään.
eq kirjoitti:
Erityisesti nyt, sillä AP poisti doctype-määrittelyn tiedoston alusta. Selaimet eivät kuitenkaan pienistä virheistä (vaikkakin monesta) vaihda tilaa; useimmat tyytyvät tuohon doctypeen.
No, voit ihan vapaasti itse kokeilla kirjoittaa osoiteriville:
javascript:window.alert(document.compatMode)
niin näet onko se quirksmodessa vai ei.
Eli
BackCompat -> Quirksmode
CSS1Compat -> Renderöi speksin mukaisesti
kirjoitin ton tohon ja ilmotti ton BackCompat eli on Quirksmodessa. Mites nyt sit edetään? Korjaillaan tietty virheitä mutta miten.
Vissiinkin toi BackCompat -> Quirksmode tarkoittaa et on aikas vituillaan.
Ja tou CSS1Compat -> Renderöi speksin mukaisesti et toimii oikein.
niamu kirjoitti:
Kun katoin noita virheitä ni en oikein tajua miten ne korjataan kun osa niistä on nyt ihan varmati oikein ja http://validator.w3.org/check?uri=http://koti.
mbnet.fi/koitto/index.​html&charset= (detect automatically)&doctype=Inline&group=0 väittää et on silti väärin.
Siellä on esim. meta tag headin ulkopuolella yms. outoa.
Laitoin alun tällaiseksi, niin meni normaalitilaan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Sivun koitto</title> <link rel="stylesheet" href="tyyli.css" type="text/css"> </head> <body>
Tosin, eipä toi ongelma sillä korjaantunut, että sain selaimen pois quirksmodesta.
Varsinainen vikahan on se, että olet määritellyt tuon tablen 900px leveäksi, vaikka sen sisällä olevat kamat ei ole yhteensä 900px leveitä. Eli tietenkin sinne jää rakoja kun soluja levitetään sisältöä leveämmäksi.
Eikös tuo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ole (tai ainakin itse olen käsittänyt) etta eri selaimet tunnistaa kielen.
Mutta noi ei ole auennut mulle et mitäs merkitystä noilla <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> on?
Hei,
Kannattaisin kyllä tuon taulukko härvelin hävittämistä ja korvaamista css:llä.
W3Schoolsista on varmasti hyötyä css:n opiskelussa. Yleensä toisen koodin testailulla ja muokkailulla oppii jo paljon, edellyttäen ettei ala aina kopioimaan toisten koodia. Siksipä teinkin tuollaisen pohjan sinulle. Joillakin voi tietty olla erilainen näkemys kuinka tulisi toteuttaa mutta tämä on omani..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/* Tausta mustaks ja sivu ylöskiini ni vois olla hienompi :) */
body {
margin: 0em;
background-color: black;
}
/* Keskitetään sivu ja määritetään sen leveys */
.site {
margin-right: auto;
margin-left: auto;
width: 50em;
}
/* Yläpalkki */
.header {
border-color: #606060;
border-style: solid;
border-right-width: 0em;
border-left-width: 0em;
border-bottom-width: 0.2em;
border-top-width: 0em;
background-image: url(bg.png); /* Taustakuvan sijasta voisimme käyttää jotain liukuväri systeemiä */
background-repeat: repeat-x;
height: 5em;
background-color: #d6d6d6;
}
/* Navigaatiolle omapalkki ja muutamat määritykset sille */
.navigation {
text-align: center;
padding-top: 1em;
border-right-width: 0em;
border-left-width: 0em;
border-bottom-width: 0em;
border-color: #76e64e;
border-style: solid;
border-top-width: 0.2em;
height: 2em;
background-color: #5e9a2d;
}
/* Unohdetaan linkkien kuvat taas ja tehdään se css:llä */
a.navi:link {
padding-left: 1em;
padding-bottom: 0.5em;
padding-right: 1em;
padding-top: 0.5em;
border-color: white;
border-left-width: 0em;
border-bottom-width: 0em;
border-top-width: 0em;
border-style: solid;
border-right-width: 0.1em;
font-family: sans-serif;
text-decoration: none;
color: white;
}
a.navi:hover {
text-decoration: underline;
}
a.navi:visited {
}
/* Ja sitten sisältö */
.content {
padding: 1em;
background-color: #dddddd;
}
/* Hyvä opas CSS -opiskeluun löytyy: http://www.w3schools.com/css/ */
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
<div class="site">
<div class="header">
Logo/teksti
</div>
<div class="navigation">
<a href="#" class="navi">Linkki 1</a>
<a href="#" class="navi">Linkki 2</a>
<a href="#" class="navi">Linkki 3</a>
<a href="#" class="navi">Linkki 4</a>
<a href="#" class="navi">Linkki 5</a>
</div>
<div class="content">
Sisältö
</div>
</div>
</body>
</html>Toi meta http-equiv vaan kertoo merkistön, jota ei tietenkään tarvitse mainita sisällössä mikäli palvelin antaa tiedon headereissa. Itse asiassa se tuli mulle mukaan kun talletin tuon sivusi.
Mutta kuitenkin, varsinaisen ongelman aiheuttaja on tuossa edellisen viestini lopussa.
Grez kirjoitti:
eq kirjoitti:
Erityisesti nyt, sillä AP poisti doctype-määrittelyn tiedoston alusta. Selaimet eivät kuitenkaan pienistä virheistä (vaikkakin monesta) vaihda tilaa; useimmat tyytyvät tuohon doctypeen.
No, voit ihan vapaasti itse kokeilla kirjoittaa osoiteriville:
javascript:window.alert(document.compatMode)niin näet onko se quirksmodessa vai ei.
Eli
BackCompat -> Quirksmode
CSS1Compat -> Renderöi speksin mukaisesti
Kuten sanoin, useimmat selaimet (enginet, kuten IE:n, Firefoxin, WebKit-johdannaiset) eivät välitä sellaisista virheistä, joista esimerkiksi validaattori huutaisi punaisena (syystäkin!); Strict-moden kytkentä päätellään vain ja ainoastaan doctypestä.
Alla olevassa sivussa painiketta painamalla (sikäli kun se näkyy!) useimmat selaimet (ja kaikki käytetyimmistä) näyttävät tekstin 'CSS1Compat'. Virheitä on muille jakaa, oikeaa koodia ei niinkään.
<!DOCTYPE html> <!html> <!/html> <body> <head> <title>WORKING TITLE<p>FOOBAR</p></title> </html> <button /btn onclick=alert(document.compatMode)> <!-- <body> -- kiinni> </body> </!DOCTYPE>
efteri kirjoitti:
Hei,
Kannattaisin kyllä tuon taulukko härvelin hävittämistä ja korvaamista css:llä.
W3Schoolsista on varmasti hyötyä css:n opiskelussa. Yleensä toisen koodin testailulla ja muokkailulla oppii jo paljon, edellyttäen ettei ala aina kopioimaan toisten koodia: Siksipä teinkin tuollaisen pohjan sinulle. Joillakin voi tietty olla erilainen näkemys kuinka tulisi toteuttaa mutta tämä on omani..
Itse olen huomannut kun ei osaa ni välillä tulee yritettyä sieltä miss on aita matalin eli hiukan kopioida toisilta. Mut nyt huomaa kun tekee itse alusta loppuun ni ei aina kannata mennä sieltä missä aita on matalin. Joten opiskelua riittää.
efteri kirjoitti:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* Tausta mustaks ja sivu ylöskiini ni vois olla hienompi :) */ body { margin: 0em; background-color: black; } /* Keskitetään sivu ja määritetään sen leveys */ .site { margin-right: auto; margin-left: auto; width: 50em; } /* Yläpalkki */ .header { border-color: #606060; border-style: solid; border-right-width: 0em; border-left-width: 0em; border-bottom-width: 0.2em; border-top-width: 0em; background-image: url(bg.png); /* Taustakuvan sijasta voisimme käyttää jotain liukuväri systeemiä */ background-repeat: repeat-x; height: 5em; background-color: #d6d6d6; } /* Navigaatiolle omapalkki ja muutamat määritykset sille */ .navigation { text-align: center; padding-top: 1em; border-right-width: 0em; border-left-width: 0em; border-bottom-width: 0em; border-color: #76e64e; border-style: solid; border-top-width: 0.2em; height: 2em; background-color: #5e9a2d; } /* Unohdetaan linkkien kuvat taas ja tehdään se css:llä */ a.navi:link { padding-left: 1em; padding-bottom: 0.5em; padding-right: 1em; padding-top: 0.5em; border-color: white; border-left-width: 0em; border-bottom-width: 0em; border-top-width: 0em; border-style: solid; border-right-width: 0.1em; font-family: sans-serif; text-decoration: none; color: white; } a.navi:hover { text-decoration: underline; } a.navi:visited { } /* Ja sitten sisältö */ .content { padding: 1em; background-color: #dddddd; } /* Hyvä opas CSS -opiskeluun löytyy: http://www.w3schools.com/css/ */ </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> </head> <body> <div class="site"> <div class="header"> Logo/teksti </div> <div class="navigation"> <a href="#" class="navi">Linkki 1</a> <a href="#" class="navi">Linkki 2</a> <a href="#" class="navi">Linkki 3</a> <a href="#" class="navi">Linkki 4</a> <a href="#" class="navi">Linkki 5</a> </div> <div class="content"> Sisältö </div> </div> </body> </html>
Iso kiitos tuosta. Täytyypäs huomenna hiukan katsella tuota ja opiskella hiukan (tai aikas paljon opeteltavaa riittää) lisää.
efteri kirjoitti:
Joillakin voi tietty olla erilainen näkemys kuinka tulisi toteuttaa mutta tämä on omani..
<div class="site"> <div class="header"> Logo/teksti </div> <div class="navigation"> <a href="#" class="navi">Linkki 1</a> <a href="#" class="navi">Linkki 2</a> <a href="#" class="navi">Linkki 3</a> <a href="#" class="navi">Linkki 4</a> <a href="#" class="navi">Linkki 5</a> </div> <div class="content"> Sisältö </div> </div>
Eittämättä; pohja on OK, itse toteuttaisin navigoinnin listana (<ul>), jos se sellainen on - vaikka olisi sivuttain (tähän tarvitaan toki CSS-määreitä). Myös mahdollisesti uniikkien luokkien (kuten yllä "site", "header", "navigation", "content") sijaan suosisin id:itä - on sitten helpompi käpistellä vaikkapa skriptien puolelta, jos näin kokee tarpeelliseksi.
Tässä on CSS-opettelumateriaalia. Sun leiska, mun taitto, ja ilman kuvia.
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<title>Sivun koitto</title>
<style type="text/css">
* {
font-weight: normal;
}
body {
background: #000;
font-family: 'Impact', sans-serif;
letter-spacing: 0.05em;
text-transform: uppercase;
}
#sivu {
margin: 0 auto;
width: 900px;
}
#otsikko {
background: #505050;
color: #DDD;
font-family: 'Franklin Gothic Medium', sans-serif;
font-size: 48pt;
font-weight: normal;
margin: 0;
padding: 50px 0;
text-align: center;
text-shadow: 4px 4px 2px #000;
}
#valikko {
background: #0DAF1B;
font-size: 1px;
letter-spacing: -1px;
list-style: none;
text-align: center;
}
#valikko,#valikko li {
margin: 0;
padding: 0;
}
#valikko li {
display: inline;
letter-spacing: 0.125em;
}
#valikko a {
border: 1px solid #000;
border-top-color: #73D44F;
border-left-color: #FFF;
border-bottom-color: #4C7A0D;
color: #FFF;
display: inline-block;
font-size: 24pt;
line-height: 14pt;
margin: 1px 0;
padding: 18px 12px;
text-decoration: none;
text-shadow: 2px 2px 1px #000;
}
#valikko a:hover {
background-color: #0C9C16;
}
#valikko a span {
font-family: 'MV Boli', cursive;
font-size: 11pt;
text-transform: lowercase;
}
#teema {
background: #C8C8C8;
height: 300px;
margin: 3px 0;
padding: 50px 50px 0 50px;
position: relative;
}
#teema p {
background: #FFF;
font-size: 100pt;
line-height: 300px;
margin: 0;
padding: 0;
text-align: center;
}
#sisalto {
background: #C8C8C8;
font-size: 1.2em;
padding: 5px 40px 25px 40px;
}
#tiedot {
background: #1A1A1A;
color: #FFF;
font-size: 1.2em;
margin: 3px 0;
padding: 1px 25px;
}
#tiedot p {
margin-left: 15px;
}
</style>
<div id="sivu">
<h1 id="otsikko">Logo / teksti</h1>
<ul id="valikko">
<li><a href="">Linkki 1<br /><span>Ensimmäinen</span></a></li>
<li><a href="">Linkki 2<br /><span>Toinen</span></a></li>
<li><a href="">Linkki 3<br /><span>Kolmas</span></a></li>
<li><a href="">Linkki 4<br /><span>Neljäs</span></a></li>
<li><a href="">Linkki 5<br /><span>Viides</span></a></li>
</ul>
<div id="teema">
<p>Kuva tähän</p>
</div>
<div id="sisalto">
<p>Olennaista infoa tästä sivusta.</p>
<p>Yllä olevasta teemapalkista puuttuu kuva. Olisi kiva jos siinä olisi sellainen!</p>
</div>
<div id="tiedot">
<h2>Se on loppu nyt</h2>
<p>Finaalissa ollaan. Kaikki on menetetty.</p>
<p>Tämä sivu on päättymäisillään. Ja se, jos mikä, on surullista.</p>
<p>Sillä tämä esimerkki on eeppisen hieno näytös siitä, mitä CSS:llä saa aikaiseksi.</p>
<p>Oma kehu haisee, btw. Pitää muistaa kirjata ylös, ettei vahinko toistu.</p>
</div>
</div>
</html>Tämä taitaa mennä public domainina, eli väärinkäytä vapaasti.
Iso kiitos kaikille vastanneille ja varsinkin eq:lle. Jatkan hommaa huomenna ja täytyy hiukan katsella/opiskella samalla lisää.
En saanu vieläkään tehtyä. Kait musta sit ei ole tuommoiseksi sivujen tekijäksi. Kovin kyllä homma kiinnostaisi mut on vaan niin pirun vaikeeta toi koodin väsääminen. Kun lontoo ei luista ni näköjään ei tuu sit mistään mitään ku parhaimmat oppaat on enkuksi. Mut yritän vielä.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Toihan ilmottaa selaimelle millä kielellä kirjoitettu ja miten luetaan.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Tosta ei mitään käryä.
<title>Sivun koitto</title> sivun otsikko.
<link rel="stylesheet" href="tyyli.css" type="text/css">
ilmottaa misä css tiedosto on ja sen nimen
</head>
Joo, suomi on sen verran pieni kielialue, että tarjonta on aika heikkoa. Taisin jossain muussakin yhteydessä todeta, että jos haluaa kehittyä koodaajana niin englannin opettelu on jokseenkin pakollista. Asiaan vaikuttanee sekin, että suomessa lähes kaikki peruskoulun käyneet osaa englantia, joten myöskin sen puolesta tarve suomentamiselle on vähäisempi.
Tuossa olisi ainakin yksi opas xhtml:stä http://appro.mit.jyu.fi/doc/xhtml11/
Tuolta löytyy linkkejä myös muihin oppaisiin: http://www.oulu.fi/tietohallinto/linkit/oppaat.
ja kirjastosta löytyy varmasti vielä lisää oppaita ihan kirjana :)
Grez kirjoitti:
Joo, suomi on sen verran pieni kielialue, että tarjonta on aika heikkoa. Taisin jossain muussakin yhteydessä todeta, että jos haluaa kehittyä koodaajana niin englannin opettelu on jokseenkin pakollista. Asiaan vaikuttanee sekin, että suomessa lähes kaikki peruskoulun käyneet osaa englantia, joten myöskin sen puolesta tarve suomentamiselle on vähäisempi.
Totta. Peruskoulussa oli aina yleensä enkuntunnilla muuta tekemistä. Nyt myöhemmin kyllä harmittaa kun ei osaa enkkua kunnolla.
Aihe on jo aika vanha, joten et voi enää vastata siihen.