Discussion:
Vierekkäisten taulukoiden otsikot samalle tasolle vaakasuorassa
(too old to reply)
Harri Juntunen
2011-11-07 11:20:25 UTC
Permalink
Taas ongelma teille jo tutuksi tulleessa URLissa
http://www.kajuutankapteenit.com

Mahtaakohan tällaiseen, hieman häiritsevään juttuun olla ratkaisua:

Etusivun yläosassahan on kaksi vierekkäistä taulukkoa, toinen otsikolla
"Tuoreimmat uutiset" ja toinen "Tänään xx.xx.xxxx".
Jos uutispuolelle kirjoitetaan yli kolmen rivin uutisia (kuten tällä
hetkellä on tilanne), niin "Tänään"-otsikko sen alla olevine tietoineen
valahtaa huomattavasti uutisotsikkoa alemmaksi.

Itse olen yrittänyt tiivistää kirjoittamani uutiset kolmeen riviin,
mutta joskus asia ei vaan mahdu tuolle rivimäärälle.
Kysymys pähkinänkuoressa:
Voiko noille taulukoille tehdä sellaiset säädöt (top, em tai mikä
tahansa), jotta kummankin taulukon otsikot pysyisivät rinnakkain
vaakatasossa riippumatta siitä, kuinka pitkiä rivimäärältään vasemman
taulukon uutiset
ovat?

- Nyt näkyvillä olevat uutiset eivät ole minun kirjoittamiani, eivät ole
hyvää suomea.
Jos ratkaisua ei löydy, ei se haittaa - pärjätään tälläkin.

Etusivun PHP:

<TABLE border="0" width="660" valign="top" cellpadding="20"
cellspacing="0" style="table-layout:fixed">
<tr>
<td width="300" valign="top">
<h5>
Tuoreimmat uutiset
</h5>
<?php
//luetaan viestit taulukkoon
$viestit = file("hallinta/viestit.txt");
//käännetään taulukko, jolloin uusimmat viestit tulevat ylimmiksi
$viestit = array_reverse($viestit);
//viestien määrä on suoraan taulukon rivien määrä
$viestimaara = count($viestit);

//käydään tarpeellinen määrä viestejä läpi
for ($i = 0; $i < 3; $i++) {
//$viestit[$i] on merkkijono, joka sisältää viestin $i tiedot
//pystyviivoilla erotettuna; jaetaan viestit $tiedot-taulukkoon
$tiedot = explode("|", $viestit[$i], 3);

//erotellaan tiedot omiin muuttujiinsa
$aika = $tiedot[0];
$otsikko = $tiedot[1];
$viesti = $tiedot[2];

//tulostetaan viesti
echo "<p><span class=\"keltb\">$aika $otsikko</span><br><span
class=\"valk\">$viesti</span></p>";
}
?>
<IMG ALIGN="absmiddle" SRC="kuvat/kolmio.png">
<a href="index.php?sivu=02" class="k">Lisää uutisia...</a>
</td>
<td width="260">
<?php
//haetaan päivä tulevaa käyttöä varten
$paiva = date(d);
$kuukausi = date(m);
$vuosi = date(y);
//tehdään siitä sopivan muotoinen vertailuun
$paivamaara = ($paiva . "." . $kuukausi . ".");
//ja tulostukseen
$tulostusp = ($paiva . "." . $kuukausi . "." . "20" . $vuosi);
//muutetaan tekstitiedosto taulukoksi riveittäin $viestit[0]
$viestit[1] jne
$viestit = file("sivut/taulukko.txt");

//lasketaan viestien määrä
$viestimaara = count($viestit);

//jaetaan viestit osioihin taulukoihin a[] ja b[]

for ($i = 0; $i < $viestimaara; $i++) {
//$viestit[$i] on merkkijono, joka sisältää viestin $i tiedot
//pystyviivoilla erotettuna; jaetaan viestit $tiedot-taulukkoon
$tiedot = explode("|", $viestit[$i], 2);

//tehdään niistä jaetuista omat taulukot a[] ja b[]
// a on siis päivä ja b viesti

$d[$i] = $tiedot[0];
$e[$i] = $tiedot[1];

}
//katsotaan viestit läpi, onko samalle päivälle tapahtumia
for ($u = 0; $u < $viestimaara; $u++) {

if ($d[$u] == $paivamaara)
{$uutinen = $e[$u];}
}
$uutinen = substr($uutinen, 3);
echo ("<h5>Tänään " . $tulostusp . "</h5>");
echo "<p><span class=\"valkb\">";
//jos ei ole, niin tulostetaan "ei taphtumia, muuten tulostetaan
tapahtuma
if ($uutinen == "")
{echo "Ei tapahtumia</span></p>";}
else
{echo ($uutinen . "</span></p>");}

//käännetään taulukko, jolloin saadaan luettua alhaaltapäin tapahtuma
$viestit = array_reverse($viestit);

//jaetaan viestit osioihin taulukoihin a[] ja b[]

for ($i = 0; $i < $viestimaara; $i++) {
//$viestit[$i] on merkkijono, joka sisältää viestin $i tiedot
//pystyviivoilla erotettuna; jaetaan viestit $tiedot-taulukkoon
$tiedot = explode("|", $viestit[$i], 2);

//tehdään niistä jaetuista omat taulukot a[] ja b[]
// a on siis päivä ja b viesti

$d[$i] = $tiedot[0];
$e[$i] = $tiedot[1];

}
//katsotaan viestit läpi, onko samalle päivälle tapahtumia
for ($u = 0; $u < $viestimaara; $u++) {

if ($d[$u] == $paivamaara)
{$uutinen1 = $e[$u];}
}
$uutinen1 = substr($uutinen1, 3);
echo "<p><span class=\"valkb\">";
//jos ei ole, niin tulostetaan "ei taphtumia, muuten tulostetaan
tapahtuma
if ($uutinen1 == $uutinen)
{echo "";}
else
{echo ($uutinen1 . "</span></p>");}
?>
<IMG align="absmiddle" SRC="kuvat/kolmio.png"><a
href="index.php?sivu=01" class="k">Syyskauden 2011 kalenteri</a>
<br>
<br>
<IMG SRC="kuvat/h.jpg" ALT="" TITLE="Meillä jyllää myös naisenergia!"
ALIGN="" VSPACE="10" HSPACE="8">
</td>
</tr>
<tr valign="top">
<td colspan="2" rowspan="1">
<h5>
Biljardikerho Kajuutan Kapteenit ry
</h5>
<p align="justify"><span class="valk">
Kajuutan Kapteenit on perustettu vuodenvaihteessa 2003-2004 ja se on
merkitty yhdistysrekisteriin 6.2.2009. Kerhon tarkoitus on edistää
biljardiharrastusta Helsingin Laajasalossa ja opastaa pelaajia
vasta-alkajista lähtien. Kerhoon kuuluu nuoremman polven
aktiivipelaajien ohella merkittävä joukko
senioripelaajia sekä ilahduttavan runsaasti naispelaajia.<br>Pelaamisen
lisäksi kerho järjestää vuosittain peli- ja virkistysmatkoja koti- ja
ulkomaille sekä viihdyttää jäseniään erilaisilla illanistujaisilla.
Kannatusjäsenet mukaan menoon!
</p>
<p align="justify"><span class="valk">
Kerho pelaa ja kokoontuu Laajasalossa, Yliskylän ostoskeskuksessa <a
href="http://www.kapteeninkajuutta.com" class="k"><k>Ravintola Kapteenin
Kajuutassa</k></a>, jossa on kaksi biljardipöytää: toinen 9- ja toinen
8-jalkainen.<br>Vain kerholaisille tarkoitetut 8-pallon viikkokisat
pelataan lauantaisin klo 11.30 alkaen, tiistaisin on ilmainen bilis ja
keskiviikkoisin klo 18.00 alkaen pelataan Saaren avoimen
9-pallomestaruusturnauksen osakilpailuja, joihin voi osallistua kuka
tahansa. Muina arkipäivinä ja viikonloppuisin voi pelata muuten
vaan.<br>
Pelaamme toisinaan ystävyysotteluita toisten ravintoloiden kanssa sekä
osallistumme neljällä eri joukkueella <a href="http://www.eastpool.fi"
class="k"><k>East-Pool ry:n alueliigaan</k></a>.
</p>
<p align="justify"><span class="valk">
Halutessasi lisätietoja kerhostamme ja siihen liittymisestä napsauta
vasemman laidan valikosta "Palaute". Anna yhteystietosi, niin sinulle
vastataan. Webmasterit <a href="mailto:***@luukku.com"
class="k"><k>Aatu</k></a>&nbsp;ja&nbsp;<a
href="mailto:***@kolumbus.fi"
class="k"><k>Harri</k></a>&nbsp;sekä kerhon hallituksen jäsenet
vastaavat myös kyselyihin. Etenkin nuoret, ottakaa vaan rohkeasti
yhteyttä - asuinpaikkakunnalla ei ole väliä. Pankkiyhteys:
124835-136449.
</p>
<tr><td><IMG align="absmiddle" SRC="kuvat/kolmio.png"><a
href="index.php?sivu=12" class="keltb">Kajuutan Kapteenit ry:n
säännöt</a></td>
<td align="right"><IMG align="absmiddle" SRC="kuvat/kolmio.png"><a
<a href="index.php?sivu=11" class="keltb">Hallitus</a></td></tr>
<tr><td><IMG align="absmiddle" SRC="kuvat/dhl1.gif" ALT="DHL"
TITLE="Maailman suurin logistiikka-alan yritys tukee meitä"</td>
<td align="right"><IMG SRC="kuvat/kajuutta.gif" ALT="Kapteenin Kajuutta"
TITLE="Kotiluolamme ja tukijamme"</td></tr>
</TABLE>
</TABLE>
<TABLE border="0" width="660" valign="top" cellpadding="20"
cellspacing="0" style="table-layout:fixed">
<tr>
<td width="300" valign="top">
<h5>
Tuoreimmat uutiset
</h5>
<?php
//luetaan viestit taulukkoon
$viestit = file("hallinta/viestit.txt");
//käännetään taulukko, jolloin uusimmat viestit tulevat ylimmiksi
$viestit = array_reverse($viestit);
//viestien määrä on suoraan taulukon rivien määrä
$viestimaara = count($viestit);

//käydään tarpeellinen määrä viestejä läpi
for ($i = 0; $i < 3; $i++) {
//$viestit[$i] on merkkijono, joka sisältää viestin $i tiedot
//pystyviivoilla erotettuna; jaetaan viestit $tiedot-taulukkoon
$tiedot = explode("|", $viestit[$i], 3);

//erotellaan tiedot omiin muuttujiinsa
$aika = $tiedot[0];
$otsikko = $tiedot[1];
$viesti = $tiedot[2];

//tulostetaan viesti
echo "<p><span class=\"keltb\">$aika $otsikko</span><br><span
class=\"valk\">$viesti</span></p>";
}
?>
<IMG ALIGN="absmiddle" SRC="kuvat/kolmio.png">
<a href="index.php?sivu=02" class="k">Lisää uutisia...</a>
</td>
<td width="260">
<?php
//haetaan päivä tulevaa käyttöä varten
$paiva = date(d);
$kuukausi = date(m);
$vuosi = date(y);
//tehdään siitä sopivan muotoinen vertailuun
$paivamaara = ($paiva . "." . $kuukausi . ".");
//ja tulostukseen
$tulostusp = ($paiva . "." . $kuukausi . "." . "20" . $vuosi);
//muutetaan tekstitiedosto taulukoksi riveittäin $viestit[0]
$viestit[1] jne
$viestit = file("sivut/taulukko.txt");

//lasketaan viestien määrä
$viestimaara = count($viestit);

//jaetaan viestit osioihin taulukoihin a[] ja b[]

for ($i = 0; $i < $viestimaara; $i++) {
//$viestit[$i] on merkkijono, joka sisältää viestin $i tiedot
//pystyviivoilla erotettuna; jaetaan viestit $tiedot-taulukkoon
$tiedot = explode("|", $viestit[$i], 2);

//tehdään niistä jaetuista omat taulukot a[] ja b[]
// a on siis päivä ja b viesti

$d[$i] = $tiedot[0];
$e[$i] = $tiedot[1];

}
//katsotaan viestit läpi, onko samalle päivälle tapahtumia
for ($u = 0; $u < $viestimaara; $u++) {

if ($d[$u] == $paivamaara)
{$uutinen = $e[$u];}
}
$uutinen = substr($uutinen, 3);
echo ("<h5>Tänään " . $tulostusp . "</h5>");
echo "<p><span class=\"valkb\">";
//jos ei ole, niin tulostetaan "ei taphtumia, muuten tulostetaan
tapahtuma
if ($uutinen == "")
{echo "Ei tapahtumia</span></p>";}
else
{echo ($uutinen . "</span></p>");}

//käännetään taulukko, jolloin saadaan luettua alhaaltapäin tapahtuma
$viestit = array_reverse($viestit);

//jaetaan viestit osioihin taulukoihin a[] ja b[]

for ($i = 0; $i < $viestimaara; $i++) {
//$viestit[$i] on merkkijono, joka sisältää viestin $i tiedot
//pystyviivoilla erotettuna; jaetaan viestit $tiedot-taulukkoon
$tiedot = explode("|", $viestit[$i], 2);

//tehdään niistä jaetuista omat taulukot a[] ja b[]
// a on siis päivä ja b viesti

$d[$i] = $tiedot[0];
$e[$i] = $tiedot[1];

}
//katsotaan viestit läpi, onko samalle päivälle tapahtumia
for ($u = 0; $u < $viestimaara; $u++) {

if ($d[$u] == $paivamaara)
{$uutinen1 = $e[$u];}
}
$uutinen1 = substr($uutinen1, 3);
echo "<p><span class=\"valkb\">";
//jos ei ole, niin tulostetaan "ei taphtumia, muuten tulostetaan
tapahtuma
if ($uutinen1 == $uutinen)
{echo "";}
else
{echo ($uutinen1 . "</span></p>");}
?>
<IMG align="absmiddle" SRC="kuvat/kolmio.png"><a
href="index.php?sivu=01" class="k">Syyskauden 2011 kalenteri</a>
<br>
<br>
<IMG SRC="kuvat/h.jpg" ALT="" TITLE="Meillä jyllää myös naisenergia!"
ALIGN="" VSPACE="10" HSPACE="8">
</td>
</tr>
<tr valign="top">
<td colspan="2" rowspan="1">
<h5>
Biljardikerho Kajuutan Kapteenit ry
</h5>
<p align="justify"><span class="valk">
Kajuutan Kapteenit on perustettu vuodenvaihteessa 2003-2004 ja se on
merkitty yhdistysrekisteriin 6.2.2009. Kerhon tarkoitus on edistää
biljardiharrastusta Helsingin Laajasalossa ja opastaa pelaajia
vasta-alkajista lähtien. Kerhoon kuuluu nuoremman polven
aktiivipelaajien ohella merkittävä joukko
senioripelaajia sekä ilahduttavan runsaasti naispelaajia.<br>Pelaamisen
lisäksi kerho järjestää vuosittain peli- ja virkistysmatkoja koti- ja
ulkomaille sekä viihdyttää jäseniään erilaisilla illanistujaisilla.
Kannatusjäsenet mukaan menoon!
</p>
<p align="justify"><span class="valk">
Kerho pelaa ja kokoontuu Laajasalossa, Yliskylän ostoskeskuksessa <a
href="http://www.kapteeninkajuutta.com" class="k"><k>Ravintola Kapteenin
Kajuutassa</k></a>, jossa on kaksi biljardipöytää: toinen 9- ja toinen
8-jalkainen.<br>Vain kerholaisille tarkoitetut 8-pallon viikkokisat
pelataan lauantaisin klo 11.30 alkaen, tiistaisin on ilmainen bilis ja
keskiviikkoisin klo 18.00 alkaen pelataan Saaren avoimen
9-pallomestaruusturnauksen osakilpailuja, joihin voi osallistua kuka
tahansa. Muina arkipäivinä ja viikonloppuisin voi pelata muuten
vaan.<br>
Pelaamme toisinaan ystävyysotteluita toisten ravintoloiden kanssa sekä
osallistumme neljällä eri joukkueella <a href="http://www.eastpool.fi"
class="k"><k>East-Pool ry:n alueliigaan</k></a>.
</p>
<p align="justify"><span class="valk">
Halutessasi lisätietoja kerhostamme ja siihen liittymisestä napsauta
vasemman laidan valikosta "Palaute". Anna yhteystietosi, niin sinulle
vastataan. Webmasterit <a href="mailto:***@luukku.com"
class="k"><k>Aatu</k></a>&nbsp;ja&nbsp;<a
href="mailto:***@kolumbus.fi"
class="k"><k>Harri</k></a>&nbsp;sekä kerhon hallituksen jäsenet
vastaavat myös kyselyihin. Etenkin nuoret, ottakaa vaan rohkeasti
yhteyttä - asuinpaikkakunnalla ei ole väliä. Pankkiyhteys:
124835-136449.
</p>
<tr><td><IMG align="absmiddle" SRC="kuvat/kolmio.png"><a
href="index.php?sivu=12" class="keltb">Kajuutan Kapteenit ry:n
säännöt</a></td>
<td align="right"><IMG align="absmiddle" SRC="kuvat/kolmio.png"><a
<a href="index.php?sivu=11" class="keltb">Hallitus</a></td></tr>
<tr><td><IMG align="absmiddle" SRC="kuvat/dhl1.gif" ALT="DHL"
TITLE="Maailman suurin logistiikka-alan yritys tukee meitä"</td>
<td align="right"><IMG SRC="kuvat/kajuutta.gif" ALT="Kapteenin Kajuutta"
TITLE="Kotiluolamme ja tukijamme"</td></tr>
</TABLE>
</TABLE>
Jukka K. Korpela
2011-11-07 12:05:49 UTC
Permalink
Post by Harri Juntunen
Voiko noille taulukoille tehdä sellaiset säädöt (top, em tai mikä
tahansa), jotta kummankin taulukon otsikot pysyisivät rinnakkain
vaakatasossa riippumatta siitä, kuinka pitkiä rivimäärältään vasemman
taulukon uutiset ovat?
Tyylikkäin ratkaisu olisi lisätä sivun yleiseen tyyliohjeeseen

td { vertical-align: top; }

Se tarkoittaa, että taulukoiden solujen sisältö tasataan yläreunaan.
Siis jos solun korkeus on isompi kuin sisällön korkeus (esimerkiksi
siksi, että taulukon saman rivin toinen solu vaatii suuremman
korkeuden), niin tyhjää jää sisällön alle. Oletusarvo on, että tyhjää
jää sisällön ylä- ja alapuolelle saman verran eli sisältö on
pystysuunnassa keskitetty.

Asian voi kyllä tehdä HTML:ssäkin, jossa se tosin pitää tehdä solu- tai
rivikohtaisesti; siellä vastaava asia tehdään määritteellä valign="top".
Post by Harri Juntunen
<tr>
<td width="300" valign="top">
<h5>
Tuoreimmat uutiset
</h5>
- -
Post by Harri Juntunen
<td width="260">
<?php
//haetaan päivä tulevaa käyttöä varten
- -
Post by Harri Juntunen
echo ("<h5>Tänään " . $tulostusp . "</h5>");
Tuossa ensimmäinen td-elementti jo sisältääkin kyseisen attribuutin,
joten riittää lisätä se toiseenkin, siis
<td width="260">
täydennetään tägiksi
<td width="260" valign="top">
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Harri Juntunen
2011-11-07 12:32:32 UTC
Permalink
Tuhannet kiitokset!
Post by Jukka K. Korpela
Post by Harri Juntunen
Voiko noille taulukoille tehdä sellaiset säädöt (top, em tai mikä
tahansa), jotta kummankin taulukon otsikot pysyisivät rinnakkain
vaakatasossa riippumatta siitä, kuinka pitkiä rivimäärältään vasemman
taulukon uutiset ovat?
Tyylikkäin ratkaisu olisi lisätä sivun yleiseen tyyliohjeeseen
td { vertical-align: top; }
Se tarkoittaa, että taulukoiden solujen sisältö tasataan yläreunaan.
Siis jos solun korkeus on isompi kuin sisällön korkeus (esimerkiksi
siksi, että taulukon saman rivin toinen solu vaatii suuremman
korkeuden), niin tyhjää jää sisällön alle. Oletusarvo on, että tyhjää
jää sisällön ylä- ja alapuolelle saman verran eli sisältö on
pystysuunnassa keskitetty.
Asian voi kyllä tehdä HTML:ssäkin, jossa se tosin pitää tehdä solu-
tai rivikohtaisesti; siellä vastaava asia tehdään määritteellä
Post by Harri Juntunen
<tr>
<td width="300" valign="top">
<h5>
Tuoreimmat uutiset
</h5>
- -
Post by Harri Juntunen
<td width="260">
<?php
//haetaan päivä tulevaa käyttöä varten
- -
Post by Harri Juntunen
echo ("<h5>Tänään " . $tulostusp . "</h5>");
Tuossa ensimmäinen td-elementti jo sisältääkin kyseisen attribuutin,
joten riittää lisätä se toiseenkin, siis
<td width="260">
täydennetään tägiksi
<td width="260" valign="top">
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Loading...