Tuli vastaan pieni ongelma tuossa kotisivuja tehdessä. Elikkäs miten saisi laitettua kaksi seuraavan-näköistä tablea vierekkäin:
<table class="table" border="1" align="left" cellspacing="0" width="13%"><td> <tr> <td><b> Koodi</b></td> <td><b> Merkki</b></td> </tr><tr> <td> dagger;</td> <td> †</td> </tr><tr> <td> Dagger;</td> <td> ‡</td> </tr><tr> <td> spades;</td> <td> ♠</td> </tr><tr> <td> clubs;</td> <td> ♣</td> </tr><tr> <td> hearts;</td> <td> ♥</td> </tr><tr> <td> diams;</td> <td> ♦</td> </tr><tr> <td> oline;</td> <td> ‾</td> </tr><tr> <td> larr;</td> <td> ←</td> </tr><tr> <td> uarr;</td> <td> ↑</td> </tr><tr> <td> rarr;</td> <td> →</td> </tr><tr> <td> darr;</td> <td> ↓</td> </tr><tr> <td> iexcl;</td> <td> ¡</td> </tr><tr> <td> copy;</td> <td> ©</td> </tr><tr> <td> reg;</td> <td> ®</td> </tr><tr> <td> cent;</td> <td> ¢</td> </tr><tr> <td> trade;</td> <td> ™</td> </tr><tr> <td> pound;</td> <td> £</td> </tr><tr> <td> ntilde;</td> <td> ñ</td> </tr><tr> <td> Ccedil;</td> <td> Ç</td> </tr><tr> <td> ETH;</td> <td> Ð</td> </tr><tr> <td> times;</td> <td> ×</td> </tr><tr> <td> Ucirc;</td> <td> Û</td> </tr><tr> <td> iquest;</td> <td> ¿</td> </tr><tr> <td> sup2;</td> <td> ²</td> </tr> </table>
Olen kokeillut koodista useita eri muotoja, mutta ei toimi. Olen kyllä saanut kaksi seuraavaa tablea vierekkäin koodilla:
<table class="table" border="1" align="left" cellspacing="0" width="13%"><td> <tr> <td><b> Koodi</b></td> <td><b> Merkki</b></td> </tr><tr> <td> dagger;</td> <td> †</td> </tr><tr> <td> Dagger;</td> <td> ‡</td> </tr><tr> <td> spades;</td> <td> ♠</td> </tr><tr> <td> clubs;</td> <td> ♣</td> </tr><tr> <td> hearts;</td> <td> ♥</td> </tr><tr> <td> diams;</td> <td> ♦</td> </tr><tr> <td> oline;</td> <td> ‾</td> </tr><tr> <td> larr;</td> <td> ←</td> </tr><tr> <td> uarr;</td> <td> ↑</td> </tr><tr> <td> rarr;</td> <td> →</td> </tr><tr> <td> darr;</td> <td> ↓</td> </tr><tr> <td> iexcl;</td> <td> ¡</td> </tr><tr> <td> copy;</td> <td> ©</td> </tr><tr> <td> reg;</td> <td> ®</td> </tr><tr> <td> cent;</td> <td> ¢</td> </tr><tr> <td> trade;</td> <td> ™</td> </tr><tr> <td> pound;</td> <td> £</td> </tr><tr> <td> ntilde;</td> <td> ñ</td> </tr><tr> <td> Ccedil;</td> <td> Ç</td> </tr><tr> <td> ETH;</td> <td> Ð</td> </tr><tr> <td> times;</td> <td> ×</td> </tr><tr> <td> Ucirc;</td> <td> Û</td> </tr><tr> <td> iquest;</td> <td> ¿</td> </tr><tr> <td> sup2;</td> <td> ²</td> </tr> </table>
<table class="table" style="margin-left: 10px;" border="1" cellspacing="0" width="13%"><td> <tr> <td><b> Koodi</b></td> <td><b> Merkki</b></td> </tr><tr> <td> yen;</td> <td> ¥</td> </tr><tr> <td> laquo;</td> <td> «</td> </tr><tr> <td> not;</td> <td> ¬</td> </tr><tr> <td> sect;</td> <td> §</td> </tr><tr> <td> deg;</td> <td> °</td> </tr><tr> <td> brvbar;</td> <td> ¦</td> </tr><tr> <td> plusmn;</td> <td> ±</td> </tr><tr> <td> acute;</td> <td> ´</td> </tr><tr> <td> micro;</td> <td> µ</td> </tr><tr> <td> para;</td> <td> ¶</td> </tr><tr> <td> middot;</td> <td> ·</td> </tr><tr> <td> cedil;</td> <td> ¸</td> </tr><tr> <td> ordm;</td> <td> º</td> </tr><tr> <td> raquo;</td> <td> »</td> </tr><tr> <td> frac14;</td> <td> ¼</td> </tr><tr> <td> THORN;</td> <td> Þ</td> </tr><tr> <td> szlig;</td> <td> ß</td> </tr><tr> <td> eth;</td> <td> ð</td> </tr><tr> <td> divide;</td> <td> ÷</td> </tr><tr> <td> Oslash;</td> <td> Ø</td> </tr><tr> <td> thorn;</td> <td> þ</td> </tr><tr> <td> AElig;</td> <td> Æ</td> </tr><tr> <td> frac32;</td> <td> ¾</td> </tr> <td> uml;</td> <td> ¨</td> </tr> </table>
Mutta kolmannen lisääminen ei onnistunut.
Sitten vielä CSS-tiedosto kun sitä tuossa tyrkytetään class:lla:
body { font: normal 12px Verdana; background-image: url("../images/mainbackground.jpg"); }
p { line-height: 15px; }
A:link { color: #000066; text-decoration: none; }
A:visited { color: #444400; text-decoration: none; }
A:active { color: #004400; text-decoration: none; }
A:hover { color: #880000; text-decoration: none; }
.ylaotsikko { font: bold 17px Verdana; color: #808080; }
.alaotsikko { font: normal 13px Verdana; color: #404040; }
.lootaotsikko { font: bold 17px Verdana; }
.uutisotsikko { font: bold 14px Courier new; }
.uutisteksti { font: bold 10px Verdana; word-spacing: 1.5px; letter-spacing: 0.7px; text-align: justify; }
.sisalto { margin-left: 230px; position: absolute; margin-top: 6px; }
.linkki { font: normal 12px Verdana; color: #606060; margin-left: 10px; }
.teksti { font: normal 11px Verdana; color: #404040; line-height: 1.3; letter-spacing: 0.03em; }
.vasenvalikko { font: normal 12px Verdana; background-color: #DDDDDD; line-height: 20px; margin-top: 6px; }
.loota { font: normal 12px Verdana; background-image: url("../images/tablebackground.jpg"); }
.table { font: normal 12px Verdana; }
.viikonjuttu { font: normal 12px Verdana; position: absolute; }
.kirjoittanut { font: italic 10px Verdana; color: #808080; }
#table { font: normal 12px Verdana; color: #404040; background-color: #FFFFFF; }
#sivu {font: normal 12px Verdana; color: #404040; margin-left: 7px; }
#nimipaiva { font: normal 11px Verdana; color: #606060; }En saa minkään-näköistä toimivaa koodia tuosta irti, olen jo päiviä yrittänyt.
EDIT: CSS:ssä olikin vaan tuo font.
jos ymmärsin oikein, niin noin http://62.44.217.249/harkat/apu.html
katso lähdekoodi
http://62.44.217.249/harkat/apu.html
Tuotakun, en nyt päässyt katsomaan niin lisää sen toisenkin tablen arvoksi align="left"
Samalla tavalla, kuni tähän.
<table class="table" border="1" align="left" cellspacing="0" width="13%">
tai riittää että määräät sen tuolla css:ssä classin arvoksi ja otat sen align="left" myös tästä pois.
Mutta jos css:hommasi ei toimi niin kannattaa kokeilla vain aluksi laittaa se align="left" siihen toiseenkin tauluun arvoksi.
Vielä tuosta aikaisemmasta hommastasi, css tiedostossa ei ole mitään vikaa, joten koikeileppa esimerkiksi seuraavaa.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<!-- Tyylitiedostoa on kutsuttava erikseen, jos se on toisella sivulla -->
<link rel="stylesheet" type="text/css" href="runko.css" />
<style type="text/css">
<!--
/*
# Tyylitiedoston voi myös luoda samalle sivulle missä sitä käytetään
*/
/*
# Piste sanan table tarkoittaa määritettä Class
*/
.table {
font: normal 12px Verdana;
border:1px solid black;
margin:10px;
width:100px;
height:100px;
}
/*
# Risuaita sanan table edessä tarkoittaa halutun paikan id:tä
# Eli tätä id:tä, ('katso kolmas taulu') ei "saa" laittaa muille
*/
#table {
font: normal 12px Verdana;
color: #404040;
background-color: skyblue;
margin:10px;
width:100px;
height:100px;
}
/*
# Class määrite katso taulu kolme
*/
.vari {background:green;}
//-->
</style>
</head>
<body>
<!--- Ensimmäinen taulu --->
<table align="left" class="table">
<tr>
<td>
</td>
</tr>
</table>
<!--- Toinen taulu --->
<table align="left" id="table">
<tr>
<td>
</td>
</tr>
</table>
<!--- Kolmas taulu --->
<!--
# Voit myös käyttää usempaa tyyliä yhdessä paikkaa
# Tässä on yhdistetynä luokka ' table ja vari '
# Tämä taulu siis käyttää molempia määritteitä
-->
<table align="left" class="table vari">
<tr>
<td>
</td>
</tr>
</table>
<!--- Neljäs taulu --->
<table class="table">
<!--
# align="left"
# Kuten huomaat align:left määreen pois jättäminen
# heittää taulun miten sattuu, eli aina laitettava määre jos haluat
# taulut vierekkäin
-->
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>Css:tiedoston nimeksi runko.css
/**** RUNKO ****/
body {
font: normal 12px Verdana;
background-image: url("../images/mainbackground.jpg");
}
/**** RUNKO END****/
p { line-height: 15px; }
/**** LINKIT ****/
A:link { color: #000066; text-decoration: none; }
A:visited { color: #444400; text-decoration: none; }
A:active { color: #004400; text-decoration: none; }
A:hover { color: #880000; text-decoration: none; }
/**** LINKIT END ****/
/**** CLASS ****/
.ylaotsikko { font: bold 17px Verdana; color: #808080; }
.alaotsikko { font: normal 13px Verdana; color: #404040; }
.lootaotsikko { font: bold 17px Verdana; }
.uutisotsikko { font: bold 14px Courier new; }
.uutisteksti { font: bold 10px Verdana; word-spacing: 1.5px; letter-spacing: 0.7px; text-align: justify; }
.sisalto { margin-left: 230px; position: absolute; margin-top: 6px; }
.linkki { font: normal 12px Verdana; color: #606060; margin-left: 10px; }
.teksti { font: normal 11px Verdana; color: #404040; line-height: 1.3; letter-spacing: 0.03em; }
.vasenvalikko { font: normal 12px Verdana; background-color: #DDDDDD; line-height: 20px; margin-top: 6px; }
.loota { font: normal 12px Verdana; background-image: url("../images/tablebackground.jpg"); }
.viikonjuttu { font: normal 12px Verdana; position: absolute; }
.kirjoittanut { font: italic 10px Verdana; color: #808080; }
/**** CLASS END ****/
/**** ID ****/
#sivu {font: normal 12px Verdana; color: #404040; margin-left: 7px; }
#nimipaiva { font: normal 11px Verdana; color: #606060; }
/**** ID END****/Aihe on jo aika vanha, joten et voi enää vastata siihen.