Minulla on 1 nappi, joka koostuu kolmesta kuvasta, mutta laittaessani kaksi kuvan osaa linkeiksi jää niiden väliin 2-3pikselin kolo.
Jos jätän <a href=""> komennot pois, kuvat ovat vierekkäin.
Jos laitan <a href=""> komennot, kuvien väliin jää 2-3pikselin kolo.
<a style="border:0px;" href="k.phtml" > <img align="middle" border="0" style="vertical-align:text-top;" src="pikakuvakkeet/nappi_kalenteri_osa1.png"> </a> <a style="border:0px;" href="k2.phtml" align="left"> <img align="middle" border="0" style="vertical-align:text-top;" src="pikakuvakkeet/nappi_kalenteri_osa2.png"></a> <br> <img border="0" align="middle" style="vertical-align:text-top;" src="pikakuvakkeet/nappi_kalenteri_osa3.png">
Johtuiskohan kenties ekan kuvan jälkeisestä välilyönnistä?
edit. jos se ei auta, niin kokeiles tätä:
<span style="margin-left:-5px;"><a href="pikakuvakkeet/nappi_kalenteri_osa2.png"><img align="middle" border="0" style="vertical-align:text-top;" src="pikakuvakkeet/nappi_kalenteri_osa2.png"></a></span>
hetken toivo, mutta ei
Häh? mulla ainakin auttaa toi span. Toki käytän eri kuvia, mutta ilma spania jää väli.
Muuten sama, mutta span lisätty, ja kuvat ovat erit.
<a style="border:0px;" href="k.phtml" > <img align="middle" border="0" style="vertical-align:text-top;" src="Kuvat/arrow_down.png"></a> <span style="margin-left:-5px;"><a style="border:0px;" href="k2.phtml" align="left"> <img align="middle" border="0" style="vertical-align:text-top;" src="Kuvat/arrow_down.png"></a></span> <br> <img border="0" align="middle" style="vertical-align:text-top;" src="Kuvat/arrow_down.png">
Edit. Eli tässä viel screenshotit ilman spania ja spanin kanssa.
http://tinypic.com/r/10nxa95/5
spannia en testannu otin vain väin pois.. editoit varmaan samaan aikaan kun vastasin. kokeilen tuota spannia.
Tosin järkevämpää on laittaa näin:
<a style="border:0px;" href="k2.phtml" align="left"><img align="middle" border="0" style="margin-left: -5px;vertical-align:text-top;" src="Kuvat/arrow_down.png"></a>
Sulla luultavasti whitespace kuvien välissä, koita laittaa pötköön ne kuvat jos toimis, tyylii:
<a href="/"><img src="kuvia/1.jpg"></a><a href="/"><img src="kuvia/2.jpg"></a>
Vaihtoehtosesti voit vaikka floattaa ne kuvat vierekkäin:
float: left
Vastaus ongelmaan oli :
style="margin-left: -5px;"
Parempi ratkaisu olisi tuutin ehdottama välien poisto. Tyylit kannattaisi määritellä mieluummin joko headissä tai erillisessä css-tiedostossa. Vasemmalle floattaaminen johti erikoisiin tuloksiin IE9:llä.
Radikaaleja ehdotuksia, eli CSS käyttöön:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Nappulajuttu</title>
<style type="text/css">
div.nappula {
background: url('pikakuvakkeet/nappi_kalenteri_osa3.png') no-repeat 0px 100%;
display: inline-block;
padding-bottom: 20px; /* nappi_kalenteri_osa3.png KORKEUS */
white-space: nowrap;
width: 100px; /* nappi_kalenteri_osa3.png LEVEYS */
}
div.nappula a:first-child {
background: url('pikakuvakkeet/nappi_kalenteri_osa1.png') no-repeat;
float: left;
height: 50px; /* nappi_kalenteri_osa1.png KORKEUS */
overflow: hidden;
text-indent: 10000px;
width: 50px; /* nappi_kalenteri_osa1.png LEVEYS */
}
div.nappula a:last-child {
background: url('pikakuvakkeet/nappi_kalenteri_osa2.png') no-repeat;
display: block;
height: 50px; /* nappi_kalenteri_osa2.png KORKEUS */
overflow: hidden;
text-indent: 10000px;
width: 50px; /* nappi_kalenteri_osa2.png LEVEYS */
}
</style>
</head>
<body>
<p>Tekstiä ihan vaan huviksi.</p>
<div class="nappula">
<a href="k.html">Yksi</a>
<a href="k2.html">Kaksi</a>
</div>
<p>Lisää tekstiä.</p>
</body>
</html>En tiedä mitä kontekstiä nuo linkit edustaa, joten kirjoitin niihin vaan "yksi" ja "kaksi", mutta tilalla pitäisi olla tekstiä, joka kertoo mitä nuo linkit tekee. CSS piilottaa tekstin näkyviltä, ja lisättynä bonuksena:
1) Sinulla voi olla monta nappulaa vierekkäin, ne rivittyvät kuin olisivat yksi merkki/kuva.
2) Voit myös sijoittaa nappulan aika vapaasti minne huvittaa verrattain pienillä muutoksilla CSS:ään.
3) Nappuloilla on jokin muukin merkitys kuin että ne on vain kuvia joilla on linkki jollekin toiselle sivulle.
Koodi on testaamaton ja tein aika kovia oletuksia (esim. että kolmas kuva on yhtä leveä kuin edellisen rivin kaksi kuvaa yhteensä).
Teit radikaaleja oletuksia, mutte ne osuivat oikeaan :)
Pitääpä testata tuotakin ovelusta. Kiitoksia.
Aihe on jo aika vanha, joten et voi enää vastata siihen.