Hei,
Taas ongelmissa...
Mulla on lomakkeella ao. div:
<div>
<table>
<tr>
<td>
<table>
<tr>
<td>Tyyppi</td>
<td>Valittu</td>
<td>Valinta</td>
</tr>
<?php
$a=1;
foreach ($sar as $arvo) {
?>
<tr>
<td><?=$arvo?></td>
<td>
<input type="text" name="h_kentta_<?=$a++?>" value="tyhja">
</td>
<td>
<a href="index.php">Valitse</a>
</td>
</tr>
<?php
}
?>
</table>
<table>
<tr>
<td>Typpi 2</td>
<td>Valittu 2</td>
<td>Valinta 2</td>
</tr>
<?php
$a=1;
foreach ($sar2 as $arvo) {
?>
<tr>
<td><?=$arvo?></td>
<td>
<input type="text" name="s_kentta_<?=$a++?>" value="tyhja">
</td>
<td>
<a href="index.php">Valitse</a>
</td>
</tr>
<?php
}
?>
</table>
</td>
<td>
<select size="100%">
<?php
for ($i=0;$i<count($rivit);$i++) {
?>
<option><?=$rivit[$i]?>
<?php
}
?>
</select>
</td>
</tr>
</table>
</div>Yritys on saada tehtyä taulukko (2 saraketta), jonka vasemmassa sarakkeessa on 2 taulukkoa ja oikeassa listbox, joka on yhtä korkea, kuin vasemman sarakkeen vievät taulukot ts. oikea sarake on ylhäältä alas listboxia. Oikean sarakkeen rivien määrät vaihtelevat käyttäjän valinnan mukaan.
Muutoin näyttää mielestäni olevan toimiva, mutta nyt size=100% venyttää listboxin n50% yli ja ali vasempien taulukoiden reunojen.
Näyttää siis suurinpiirtein tältä:
______
! !
!--------! !
!--------! !
! !
!____!Koodissa lienee jotakin mitä en näe...
autttaako tämä.
<div align="center">
<center>
<table border="5" cellpadding="10" cellspacing="3" width="300">
<tr>
<td>vasen ylä</td>
<td rowspan="2">listbox</td>
</tr>
<tr>
<td>vasen ala</td>
</tr>
</table>
</center>
</div>Mod. lisäsi kooditagit
Eikös tästä jää jotakin pois?
vasemmassa table-sarakkeen on päälisin 2 eri levyistä taulukkoa. Oikella vaan ylhäältä alas listbox.
Halusitko sen siis näin.
<div align="center">
<center>
<table border="5" cellpadding="10" cellspacing="3" width="300">
<tr>
<td>
<div align="center">
<table border="5" cellpadding="10" cellspacing="3" width="300">
<tr>
<td>vasen ylä</td>
</tr>
</table>
</div>
</td>
<td rowspan="2">listbox</td>
</tr>
<tr>
<td>
<div align="center">
<table border="5" cellpadding="10" cellspacing="3" width="300">
<tr>
<td>vasen ala</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</center>
</div>Mod. lisäsi kooditagit
Yeps nyt helpottaa
Kiitti!
Perun puheeni - ei sittenkään...
kun listboxin select kasvaa kokoa, niin koko div venähtää pahasti.
Nyt tuolla selectissä on size="100%", niin silloin on edes listboxin näköinen, jos sitä ei ole, niin ainakin firefox tulkitsee sen comboxi (en testannut muilla). Tarkoitus olisi siis se, että listbox on kooltaan sama, kuin vasemmat taulukot yhteensä (ne määräävät siis korkeuden).
<div>
<table border="5" cellpadding="10" cellspacing="3" width="300">
<tr>
<td>
<div>
<table border="5" cellpadding="10" cellspacing="3" width="300">
<tr>
<td>vasen ylä</td>
</tr>
</table>
</div>
</td>
<td rowspan="2">
<select size="100%">
<option>rivi 1</option>
<option>rivi 2</option>
<option>rivi 3</option>
<option>rivi 4</option>
<option>rivi 5</option>
<option>rivi 6</option>
<option>rivi 7</option>
<option>rivi 8</option>
<option>rivi 9</option>
<option>rivi 10</option>
<option>rivi 11</option>
<option>rivi 12</option>
<option>rivi 13</option>
<option>rivi 14</option>
<option>rivi 15</option>
<option>rivi 16</option>
<option>rivi 17</option>
<option>rivi 18</option>
</select>
</td>
</tr>
<tr>
<td>
<div>
<table border="5" cellpadding="10" cellspacing="3" width="300">
<tr>
<td>vasen ala</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>Select-elementin saa näkymään listboxina määrittämällä attribuutin multiple="multiple". Tämän haittapuoli on se, että listasta voi valita useamman vaihtoehdon kerralla. Size-attribuuttiin taas ei ole HTML:n dokumentaation mukaan mahdollista määrittää prosenttilukua, joten 100% tehnee listan, joka on käyttöjärjestelmän maksimikorkeuden mukainen.
Ongelman tässä korkeuden havittelussa aiheuttaa se, että select-elementin korkeutta ei pysty määrittämään. Ainut tapa muuttaa sitä on määrittää mahdollisimman monta option-elementtiä ja sitten asettaa size-attribuuttiin sellainen rivimäärä, jolla saadaan select-elementti mahdollisimman lähelle haluttua korkeutta. Firefox antaa eniten mahdollisuuksia option-elementtien tyylittelyyn, jolloin saadaan jopa pikselin tarkkuudella oikean korkuinen lista, mutta tämä ei oikein ole vaihtoehto: esimerkiksi Internet Explorerilla lista jää tällöin pahimmillaan hyvinkin pieneksi.
Ainut tapa oikeasti lähteä ratkaisemaan tätä ongelmaa onkin nyt selvittää, että mitä varten tarvitset listan. Et ainakaan ilmeisesti tarvitse monivalintaa, muuten olisit jo määrittänyt multiplen aiemmin. Tarkoituksena lienee siis valita vain yksi elementti tai vain näyttää listaus. Käytätkö siis listaa lomakkeen kenttänä, josta valitaan yksi rivi, vai onko se vain tiedon näyttämistä varten?
Muoks!
Muilla elementeillä toteutetun listan ongelmaksi tulee se, että taulukon korkeus määriytyy aina korkeimman elementin mukaan. Jos siis tämä oikeanpuoleinen lista on pidempi kuin vasemmalla puolella olevat osaset, niin sitten koko taulukon korkeus määriytyy oikeanpuoleisen listan mukaan. Tätä ongelmaa ei voi kiertää, koska taulukon korkeus määriytyy aina solujen sisällön mukaan paitsi jos taulukon korkeus on määritelty kiinteästi.
Tämä siis tarkoittaa suomeksi sitä, että taulukkoelementti jää pois kuvioista ja koko hoito pitää toteuttaa käyttäen muita elementtejä.
Merri kirjoitti:
Select-elementin saa näkymään listboxina määrittämällä attribuutin
multiple="multiple".
Näkyy toimivan myös, jos sizeen antaa vaikka absoluuttisen arvon >1, niin silloin toimii listboxina.
Merri kirjoitti:
Ongelman tässä korkeuden havittelussa aiheuttaa se, että select-elementin korkeutta ei pysty määrittämään.
Mielestäni kyllä dokujen sitä tuetaan.
Merri kirjoitti:
Ainut tapa oikeasti lähteä ratkaisemaan tätä ongelmaa onkin nyt selvittää, että mitä varten tarvitset listan. Tarkoituksena lienee siis valita vain yksi elementti tai vain näyttää listaus. Käytätkö siis listaa lomakkeen kenttänä, josta valitaan yksi rivi, vai onko se vain tiedon näyttämistä varten?
Vasemmalle olevissa taulukoissa on haettuna latausaineiston rivejä (tulevat liittymänä muualta) 0-n kpl (molemmat taulukot erillisiä). Oikealla olevasta listboxista etsittään sopiva tuote ja valitaan se aina vasemma olevan taulukon kohdepariksi. eli
rengas Rengas 28"
rengas2 Rengas 26"
jne.
Tietenkin voisi harkita sizelle vakiota, mutta dynaamisuus aina houkuttaa.
Tässä on tämmöinen vaihtoehtoinen toteutus, joka todennäköisesti kestää asettamasi visuaaliset tavoitteet:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Omanlaisensa listatoteutus</title>
<style type="text/css">
#lista {
background: #DDD;
padding: 1px 0;
position: relative;
width: 100%;
}
#lista label {
cursor: pointer;
display: block;
}
#lista label:hover {
background: #F9F9F9;
}
ul.lista {
background: #FFF;
border-style: inset;
border-width: 1px;
display: block;
height: 100%;
overflow: scroll;
overflow-x: auto;
overflow-y: scroll;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: -1px;
width: 50%;
}
ul.lista li {
display: block;
margin: 0;
padding: 2px;
}
#lista ol {
background: #EEE;
margin-right: 50%;
white-space: nowrap;
}
</style>
</head>
<body>
<form id="lista">
<h3>Rengas 1</h3>
<ol id="tyyppi1">
<li><label><input type="radio" name="rengas" value="1_1"> Rengastyyppi 1, malli 1</label></li>
<li><label><input type="radio" name="rengas" value="1_2"> Rengastyyppi 1, malli 2</label></li>
<li><label><input type="radio" name="rengas" value="1_3"> Rengastyyppi 1, malli 3</label></li>
<li><label><input type="radio" name="rengas" value="1_4"> Rengastyyppi 1, malli 4</label></li>
<li><label><input type="radio" name="rengas" value="1_5"> Rengastyyppi 1, malli 5</label></li>
</ol>
<h3>Rengas 2</h3>
<ol id="tyyppi2">
<li><label><input type="radio" name="rengas" value="2_1"> Rengastyyppi 2, malli 1</label></li>
<li><label><input type="radio" name="rengas" value="2_2"> Rengastyyppi 2, malli 2</label></li>
<li><label><input type="radio" name="rengas" value="2_3"> Rengastyyppi 2, malli 3</label></li>
<li><label><input type="radio" name="rengas" value="2_4"> Rengastyyppi 2, malli 4</label></li>
<li><label><input type="radio" name="rengas" value="2_5"> Rengastyyppi 2, malli 5</label></li>
</ol>
<ul class="lista">
<li><label><input type="radio" name="koko" value="20"> 20"</label></li>
<li><label><input type="radio" name="koko" value="21"> 21"</label></li>
<li><label><input type="radio" name="koko" value="22"> 22"</label></li>
<li><label><input type="radio" name="koko" value="23"> 23"</label></li>
<li><label><input type="radio" name="koko" value="24"> 24"</label></li>
<li><label><input type="radio" name="koko" value="25"> 25"</label></li>
<li><label><input type="radio" name="koko" value="26"> 26"</label></li>
<li><label><input type="radio" name="koko" value="27"> 27"</label></li>
<li><label><input type="radio" name="koko" value="28"> 28"</label></li>
<li><label><input type="radio" name="koko" value="29"> 29"</label></li>
<li><label><input type="radio" name="koko" value="30"> 30"</label></li>
<li><label><input type="radio" name="koko" value="31"> 31"</label></li>
<li><label><input type="radio" name="koko" value="32"> 32"</label></li>
<li><label><input type="radio" name="koko" value="33"> 33"</label></li>
<li><label><input type="radio" name="koko" value="34"> 34"</label></li>
<li><label><input type="radio" name="koko" value="35"> 35"</label></li>
<li><label><input type="radio" name="koko" value="36"> 36"</label></li>
<li><label><input type="radio" name="koko" value="37"> 37"</label></li>
<li><label><input type="radio" name="koko" value="38"> 38"</label></li>
<li><label><input type="radio" name="koko" value="39"> 39"</label></li>
</ul>
</form>
</body>
</html>Aihe on jo aika vanha, joten et voi enää vastata siihen.