Miten saisin taulukon soluun kuvan solun ylöosaan (keskelle) ja toisen kuvan solun alaosaan (oikeaan reunaan kiinni)?
Kuvat voisi laittaa allekkaisiin soluihin, mutta se on vaikeaa, koska muualla taulukossa on käytetty rowspania ja colspania siellä sun täällä..
Kokeilin tehdä noin ja sain näkymään oikein firefoxissa, chromessa ja IE8, mutta pitäis näkyä oikein myös IE7.
Solun koko voi muuttua.
Style="vertical-align:bottom;" tai top ei kumpikaan toiminut img tagin sisällä.
Solun tagiin (td) laitoin Style="vertical-align:top;" ja kumpikin kuva oli ylhäällä niin kuin pitää.
<img align="center" src="kuva1.jpg" /> // Ylempi kuva
<img align="right" valign="bottom" src="kuva2.jpg" /> // Alempi kuva
Muokkaus. Alempi kuva ei kyllä mene alareunaan.
Ei toimi chrome, ie7,ie8, eikä opera, kumpikin kuva on korkeussuunnassa keskellä. IE7:ssa (<3<3<3) vielä lisäksi koko taulukko venyi korkeussuunnassa 3 kertaa korkeammaksi, koska vasemman puoleisen solun tekstit menivät useammille riveille, vaikka solun leveys ei oikeasti muuttunut solussa olevan leveän kuvan ansiosta..
<td width="145" style="padding-left:20px;padding-right:15px;"> <img valign="top" align="center" src="nosto1.png"/> <img valign="bottom" align="right" src="asd.gif"/> </td>
EDIT: Chromeen sai "korjattua" laittamalla väliin läpinäkyvän kuvan jonka korkeus on 50% :D Mutta tosiaan se IE...... Mulla on toimiva tunnistus ie:n eri versioille, jos täytyy tehdä erikseen, mutta pitäisi ensin tietää miten sen sais toimimaan sillä..
Moikka JussiR!
Splittaa se 2:n kuvan solu kahteen riviin & käytä koko taulun mitoissa %...
neau33 kirjoitti:
Moikka JussiR!
Splittaa se 2:n kuvan solu kahteen riviin & käytä koko taulun mitoissa %...
Tarkoittaako splittaus jotain muuta kuin tätä?
"Kuvat voisi laittaa allekkaisiin soluihin, mutta se on vaikeaa, koska muualla taulukossa on käytetty rowspania ja colspania siellä sun täällä..
Kokeilin tehdä noin ja sain näkymään oikein firefoxissa, chromessa ja IE8, mutta pitäis näkyä oikein myös IE7. "
Moikka taas JussiR!
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>web page</title>
</head><body>
<table border="0" width="100%" cellspacing="1" height="100%" id="table1">
<tr>
<td width="25%" height="25%" rowspan="2"></td>
<td width="25%" valign="top" height="12%">
<p align="center">
<img border="0" src="picture1.bmp" align="top"></td>
<td height="25%" rowspan="2"></td>
<td width="25%" height="25%" rowspan="2"></td>
</tr>
<tr>
<td width="25%" valign="bottom" height="13%" align="right">
<p align="right">
<img border="0" src="picture2.bmp"></td>
</tr>
<tr>
<td width="25%" height="25%"></td>
<td width="25%" height="25%"></td>
<td width="25%" height="25%"></td>
<td width="25%" height="25%"></td>
</tr>
<tr>
<td width="25%" height="25%"></td>
<td width="25%" height="25%"></td>
<td width="25%" height="25%"></td>
<td width="25%" height="25%"></td>
</tr>
<tr>
<td width="25%" height="25%"></td>
<td width="25%" height="25%"></td>
<td width="25%" height="25%"></td>
<td width="25%" height="25%"></td>
</tr>
</table>
</body></html>...ja unohda kaikki DOCTYPE sälä ennen html-tagia
-Nea
<td width="145" style="background: url('nosto1.png') no-repeat 50% 0; padding: 0 15px 0 20px; text-align: right; vertical-align: bottom;">
<img alt="" src="asd.gif" />
</td>
Voit määrittää yläpaddingia sen verran, että nosto1.png vie halutun verran tilaa.
Mutta solun koko voi muuttua, vai voiko paddingiin laittaa prosentteja?
Mutta... hmm. Oikeastaan se kakkoskuva on aina solun alareunassa (yrityksen logo) ja sen yläpuolelle tulee sitten muita kuvia. Eli miten saisin sen solun taustakuvaksi niin että se on alhaalla?
Ylläolevat prosenttiluvut backgroundin kohdalla muuttuisivat muodosta 50% 0 (keskitettynä ylälaidasta) muotoon 100% 100% (oikeaan alanurkkaan). Eli sama arvo kuin mitä background-position on, background on vaan käytännöllisempi kirjoitettava.
Moikka JussiR!
Muokkaa sitä logo kuvaa vaikka niin, että lisäät yläosaan ja tarvittaessa myös sivuille tyhjää (=transparent color'ia) ja iske se solun background image'ksi tahi tee samalla kaavalla yksi kuva logosta ja sen yläpuolisesta kuvasta ja värittelet "tyhjät" alueet transparent color'illa ja iske image soluun niin säästyt table/cell-padding pelleilyiltä
Voisi myös yhdistää php:tä ja css:ää.
Tässä karhea esimerkki raakakoodista, joka näkyisi sivun lähdekoodissa:
<style type="text/css">
table{
width:90%;
height:250px;
}
img {
display:block;
}
.kuva{
margin-left:auto;
}
.kuva2{
margin-left:150px;
}
.solu{
width:50%;
text-align:center;
}
.solu2{
width:50%;
}
</style>
<table>
<tr>
<td class="solu">
<img class="kuva" src="img/006.jpg">
<img class="kuva2" src="img/007.jpg">
</td>
<td class="solu2">
</td>
</tr>
</table>Voisi tuon margin-left ominaisuuden alemmalle kuvalle ottaa siten että getimagesize-funktiolla hakee kuvan leveyden ja vähentää sen solun leveydestä ja tulostaa php:lla tuohon css-tyyliin.
Ps. Nyt hoxasin että ylempi kuva piti tulla keskelle. No se ei liene ylivoimainen tuohon muuttaa niinki.
neau33 kirjoitti:
Moikka JussiR!
Muokkaa sitä logo kuvaa vaikka niin, että lisäät yläosaan ja tarvittaessa myös sivuille tyhjää (=transparent color'ia) ja iske se solun background image'ksi tahi tee samalla kaavalla yksi kuva logosta ja sen yläpuolisesta kuvasta ja värittelet "tyhjät" alueet transparent color'illa ja iske image soluun niin säästyt table/cell-padding pelleilyiltä
Edelleenkin solun korkeus saattaa vaihdella. Kokeilin myös laittaa noiden kahden kuvan väliin tyhjän kuvan jonka korkeus oli prosentteina. Ei toiminut IE7.
Pekka Mansikka: Yritin tuolla tavalla aikaisemmin ja ei toiminut IE7:ssa (luultavasti muun taulukon takia) ja oli vaikea toteuttaa, kun piti sitte käyttää muualla taulussa rowspania ja colspania yms..
Tän aiheen vois oikeastaan unohtaa kun sovin tänään, että logo menee muualle. ja vois alkaa käyttää divejä jatkossa..
Moikka taas JussiR!
no jos nyt sit pitää pelleillä scriptillä ja tyylillä...
<html><head><title></title>
<script type="text/javascript">
function setHeight(){
var cellw = document.getElementById('logo_cell').offsetWidth;
var cellh = document.getElementById('logo_cell').offsetHeight;
var img1w = document.getElementById('img_top').offsetWidth;
//var imgi1h = document.getElementById('img_top').offsetHeight;
var img2w = document.getElementById('img_btm').offsetWidth;
var img2h = document.getElementById('img_btm').offsetHeight;
var mltop = (cellw-(img1w * 1.75));
var mlbtm = (cellw-img2w);
var mtbtm = (cellh-(img2h*2));
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var text = "img {display:block;}.kuva{margin-left:" +
mltop + "px;margin-top:0;}.kuva2{margin-left:" + mlbtm +
"px;margin-top:" + mtbtm + "px;}";
style.styleSheet.cssText = text;
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
</script>
</head><body onload="setHeight()">
<table border="1" width="100%" height="100%" id="table1" cellspacing="1">
<tr>
<td width="33%" height="33%"></td>
<td id="logo_cell" width="33%" height="33%">
<img id="img_top" class="kuva" src="top.jpg">
<img id="img_btm" class="kuva2" src="logo.jpg">
</td>
<td width="33%" height="33%"></td>
</tr>
<tr>
<td width="33%" height="33%"></td>
<td width="33%" height="33%"></td>
<td width="33%" height="33%"></td>
</tr>
<tr>
<td width="33%" height="33%"></td>
<td width="33%" height="33%"></td>
<td width="33%" height="33%"></td>
</tr>
</table></body></html>lopputulos lnäkyy tämän linkin takaa
(oikea nimi)
Tuo ei toiminut chromella :S mutta mutta. Voisihan tuota käyttää kun mulla on se tunnistus IE7:lle olemassa.
Ei tuo näy toimivan myöskään minun linuxissa olevalla firefoxilla.
Jussi: Mitkä seikat vaikuttaa siihen, että ei toimi IE 7:ssä. Ja mitkä kohdat sotkee? Sotkeeko tuo block-juttu muita kuvia?
Vaihtoehto:
<td class="solu"> <img class="kuva" src="img/006.jpg"><br/> <img class="kuva2" src="img/007.jpg"> </td>
Onko tuo text-align se toimaton juttu?
Vois tehdä myös seuraavasti:
.kuva{
margin-left:50px;
}Tuossa siis tuo margin-left on puolet solun yläosaan jäävästä tyhjästä tilasta, mikä keskittää kuvan.
Esimerkki tässä. En itse voi testata, toimiiko tuo IE seiskassa...
Laita siihen soluun uusi taulukko näin.
<table border="5" cellpadding="10" cellspacing="3" width="300">
<tr>
<td align="center">ylä keski</td>
</tr>
<tr>
<td align="right">ala oikea</td>
</tr>
</table>En nyt tiedä onko tämä niin vaikeaa kuin mitä tästä on tehty.
Sivu itse ja lähdekoodi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">/*<![CDATA[*/
table {
border-collapse: collapse;
font-size: 300%;
width: 100%;
}
td {
border: 1px solid #999;
}
.logo {
background: #DDD url('logo.png') no-repeat 100% 100%;
padding-bottom: 55px;
text-align: center;
vertical-align: top;
}
/*]]>*/</style>
</head>
<body>
<table>
<tr>
<td>
<p>Tässä solussa on tekstiä.</p>
</td>
<td class="logo">
<img alt="" src="kissa.jpg" style="width:100px" />
</td>
<td class="logo">
<img alt="" src="lehma.jpg" style="height:100px" />
</td>
</tr>
<tr>
<td>
<p>Tässä solussa on tekstiä.</p>
</td>
<td class="logo">
<img alt="" src="kissa.jpg" />
</td>
<td>
<p>Tässäkin solussa on tekstiä.</p>
</td>
</tr>
<tr>
<td>
<p>Tässä solussa on tekstiä.</p>
</td>
<td class="logo">
<img alt="" src="hiiri.jpg" />
</td>
<td class="logo">
<img alt="" src="kissa.jpg" style="width:200px" />
</td>
</tr>
</table>
</body>
</html>Siisti HTML, lyhyt CSS ja toimii selaimella kuin selaimella.
peg kirjoitti:
Laita siihen soluun uusi taulukko näin.
<table border="5" cellpadding="10" cellspacing="3" width="300"> <tr> <td align="center">ylä keski</td> </tr> <tr> <td align="right">ala oikea</td> </tr> </table>
Joo tuota yritin mutta en saanut mitenkään sitä taulukkoa koko solun kokoiseksi vaan sen leveys oli leveimmän kuvan leveys ja korkeus kuvien korkeudet yhteensä. Yritin säätää taulukon kokoa CSS:llä ja ilman.
Solulle width- ja height-atribuutteihin 100%?
width="100%" height="100%"
Solulle? Solu on oikean kokoinen, mutta tuo taulu, jonka laitan sen sisälle, ei ole vaikka laitoinkin nuo mainitsemasi attribuutit table tagiin.
Eikö vieläkään toimi?
Oletko kokeillut kaikkia ehdotuksia, mitä tässä on annettu?
Tuosta viimeisestä: Lisää kuville css-tyylillä paddingia haluttuille puolille riittävä määrä. Tosin siinä tuo taulukko on turha, yksinkertainen rivinvaihto tekee saman asian.
Tähän on tullut niin paljon aivan outoja ehdotuksia, etten enää saa selvää, mikä oikeastaan on ongelmana. Alkuperäisen viestin pohjalta tein kaksi esimerkkiä, joista jommankumman pitäisi käsittääkseni olla toivottu. (IE vaatinee jälkimmäiseen vielä erillistä CSS:ää.) Jos kumpikaan ei kelpaa, voisitko selittää tarkemmin, mikä on vikana, ja näyttää vaikka kuvia halutusta tuloksesta ja virheellisestä tuloksesta?
Sanoit, että solu on vain kuvien kokoinen, jos määrität ko. solulle leveyden ja korkeuden, niin kai silloin se on suurempi, tai sen kokoinen kuin haluat.
Macro kirjoitti:
Sanoit, että solu on vain kuvien kokoinen, jos määrität ko. solulle leveyden ja korkeuden, niin kai silloin se on suurempi, tai sen kokoinen kuin haluat.
En sanonut.
"Joo tuota yritin mutta en saanut mitenkään sitä taulukkoa koko solun kokoiseksi vaan sen leveys oli leveimmän kuvan leveys ja korkeus kuvien korkeudet yhteensä. Yritin säätää taulukon kokoa CSS:llä ja ilman." Taulukko on siis toisen taulukon sisällä olevan solun sisällä.
Kiitos Metabolix, katson kohta!
<table border="5" cellpadding="10" cellspacing="3" width="566" height="399">
<tr>
<td width="36" height="19"></td>
<td width="304" height="19"></td>
<td width="136" height="19"></td>
</tr>
<tr>
<td width="36" height="104"></td>
<td width="304" height="104">
<div align="left">
<table border="5" cellpadding="10" cellspacing="3" width="300" height="131">
<tr>
<td height="60" align="center">yläkeski</td>
</tr>
<tr>
<td height="19" align="right">alaoikea</td>
</tr>
</table>
</div>
</td>
<td width="136" height="104"></td>
</tr>
<tr>
<td width="36" height="198"></td>
<td width="304" height="198"></td>
<td width="136" height="198"></td>
</tr>
</table>Mod. lisäsi kooditagit
Aihe on jo aika vanha, joten et voi enää vastata siihen.