Tarkoitus olisi saada kotisivujen yläreunaan pieniä valokuvia 4-7 kappaletta. Ongelma on nyt se että jos laitan kuvia 5 kpl ne eivät mene tasaisesti.Kaksi kuvaa on suht lähekkäin ja muut miten sattuu. Kun laitan seitsemän kuvaa niin ne ovat kyllä kiinni toisissaan ja näyttää ihan kivalta mutta luultavasti se näyttää siltä vain minun koneella. Entäs jonkun ruudulle eivät kaikki kuvat mahdu vaan osa kuvista pomppaa omalle rivilleen.
Kopioin tähän osan koodia, siinä on nyt se seitsemän kuvaa. Viisi minä oikeastaan haluaisin ja niiden väliin aina sama matka.
En oikein osaa tuota koodia kovin hyvin kirjoittaa joten osa on kopsattua ja osaa olen pähkäillyt itse.
Viitsiikö joku auttaa?
Ja onko mahdollista estää sitä että kuvat hyppävät sitten muiden koneilta katsottaessa toiselle riville jos esim näyttö on pienempi...vai onko se edes ongelma, tapahtuuko sitä?
Kopioin tähän osan koodia, siinä on nyt se seitsemän kuvaa. Viisi minä oikeastaan haluaisin ja niiden väliin aina sama matka.
En oikein osaa tuota koodia kovin hyvin kirjoittaa joten osa on kopsattua ja osaa olen pähkäillyt itse.
Viitsiikö joku auttaa?
Ja onko mahdollista estää sitä että kuvat hyppävät sitten muiden koneilta katsottaessa toiselle riville jos esim näyttö on pienempi...vai onko se edes ongelma, tapahtuuko sitä?
Vastaukset 7
Vanhimmat
Ongelman pitäisi ratketa seuraavalla tavalla:
Yllä oleva koodi jättää taulukon solujen (eli tässä tapauksessa kuvien) väliin 40 pikseliä tyhjää tilaa. Tosin ikävä puoli on se, että myös kuvien ylä- ja alapuolille lisätään 40 pikselin suuruinen väli muuhun sivun sisältöön. Tämän voi välttää käyttämällä CSS:ää, mutta ei siitä toistaiseksi enempää. Voin palata asiaan, jos pelkkä HTML-ratkaisu ei kelpaa.
Samalle taulukon riville laitetut solut kyllä pysyvät samalla rivillä, katsottiinpa sivuja kuinka pieneltä ruudulta tahansa.
Eli tämä rivi tekee tavallaan marginaalin sinne soluun joka aloitetaan kirjoittamalla table..???
Yksittäinen taulukon solu aloitetaan kirjoittamalla (ja lopetetaan -tagilla). Eli antamassani esimerkissä oli yksi taulukko (), joka sisälsi yhden rivin (). Tällä kyseisellä rivillä puolestaan oli viisi solua (). Cellspacing määrää kahden solun väliin jäävän tyhjän tilan suuruuden.
Sivulla http://www.w3.org/TR/html4/struct/tables.html#h-11.3.3 oleva kuva varmaan selventää asiaa. Mustilla alueilla on merkitty solujen sisältöä eli tässä tapauksessa niitä pieniä valokuvia. Valkoinen alue puolestaan tarkoittaa solun reunan ja solun sisällön väliin jäävää tyhjää tilaa. Tämän tilan kokoa voidaan muuttaa cellpadding-attribuutilla (aikaisemmassa esimerkissäni en käyttänyt tätä ominaisuutta). Viivoitettu osa vastaa solujen väliin jäävää tyhjää aluetta eli juuri sitä, mihin cellspacing vaikuttaa.
Voit tutkia cellspacing- ja cellpadding-attribuuttien eroa vaikkapa seuraavan koodin avulla:
Taulukolle on asetettu näkyvät reunat, jotta kävisi selväksi, missä yksi alue loppuu ja toinen alkaa. Kokeile muuttaa eri attribuuttien arvoja, niin näet, mihin ne vaikuttavat.
ja css-osioon tämä:
#kuvia {
white-space: nowrap; /* estää rivityksen */
}
#kuvia img {
width: 100px;
height: 100px;
border: 1px solid Black;
margin: 5px;
}
Miksi tuo CSS sitten on parempi tapa?
Tein muutoksen tuolla aikaisemmin neuvotulla ja toimii oikein hyvin. Tässä kun ei olla tekemässä kuin ihan yksinkertaisia sivuja lemmikille.
En ymmärrä edes tuota html juttua vielä täysin enkä halua sotkea päätäni jollain cssllä joka ei sano minulle yhtään mitään.
...siksi, että yhdellä tyylitiedostolla voit halutessasi muokata koko sivuston sisältöjä. Säästää siis käsityötä.
-T
»Miksi tuo CSS sitten on parempi tapa?»
Siksi että se on helpompi ja yksinkertaisempi tapa. Lisäksi voit taitojen karttuessa helpommin parannella sivujasi. Ja kaiken kukkuraksi voit tehdä yksinkertaisempaa html:ää.