Sivulla on koko sivun kattava taulukko. Yhteen taulukon soluun jouduin laittamaan toisen taulukon. Tämän sisemmän taulukon ensimmäiseen soluun laitoin kuvan. Tuli ongelma. En saa kuvaa aivan kiinni koko sivun kattavan taulukon solun reunaan. Jostain tulee parin pikselin väli.
Kuvalla eikä kummallakaan taulukolla ei ole reunuksia.
Sisemmän taulukon border-spacing on nolla.
Ulomman taulukon border-spacing ei vaikuta tähän.
Pistin taustavärin eri värillä siihen soluun jossa kuva on ja tätä taustaväriä näkyy joka puolella kuvan ympärillä. Millä tuon saa pois?
Kuvalla eikä kummallakaan taulukolla ei ole reunuksia.
Sisemmän taulukon border-spacing on nolla.
Ulomman taulukon border-spacing ei vaikuta tähän.
Pistin taustavärin eri värillä siihen soluun jossa kuva on ja tätä taustaväriä näkyy joka puolella kuvan ympärillä. Millä tuon saa pois?
Vastaukset 20
Vanhimmat
Kokeile ensin laittaa solun lopetustagi samalle riville kuvan koodin kanssa, eli näin..
Tällä tavoin laitettuna kuvan alle jää parin pikselin väli..
Jollei tuo auta, niin sitten taulukko on tehty väärin, solun ja kuvan kokomääritteet on erilaiset, vaihtoehtoja löytyy...
Väli on kuvan joka puolella, ei pelkästään sen oikealla puolella. Ratkaisevin ongelma onkin kuvan vasemmalla puolella ja siinä ei väliä, siis koodissa, ole.
Tekstiä
Ja tässäkin tekstiä
Eli tuossa koodi lyhennetysti, toivottavasti huomasin kaikki oleellisimmat kirjoittaa. Eli siis tarkoitus olisi saada kuva ja se alapuolella oleva teksti "Ja tässäkin tekstiä" alkamaan samasta kohtaa. Nyt kuva alkaa sen pari pikseliä sisempää. Veikkaisin sen johtuvan tuosta toisesta (sisäkkäisestä) taulukosta mutta en keksi ratkaisua. Käsittääkseni kaikki mahdolliset border yms arvot on kokeiltu. Tuon border-spacingin tuohon jätin kun se auttoi asiaa hieman mutta ei kokonaan.
Sisinpään tai oikeastaan kaikkiin taulukoihin..
cellspacing="0" cellpadding="0"
»Veikkaisin sen johtuvan tuosta toisesta (sisäkkäisestä) taulukosta mutta en keksi ratkaisua.»
Käviskö ratkaisuksi ettet käytä mitään älytöntä sisäistä taulukkoa?
Pistät sinne taulukon soluun taulukon tilalle vaikka tällaisen:
Tekstiä
Ja jos se tekstin pitää olla keskellä kuten taulukkoversiossa niin pistä css-osioon vaikka
td span {vertical-align: middle;}
Siis men ihan oikeesti tajua minkä takia kaikki mahdollisesta mahdottomaan pitää väkisin yrittää tehdä kaikkein vaikeimmalla tavalla. Mikä ihme siinä on että aina joka paikkaan pitää tunkea niitä älyttömiä taulukoita?
Jos mieluummin käytettäisi taulukkoa silloin kun se on järkevin vaihtoehto..
Oikeesti kannattais miettiä onko tuossa ulomman taulukon käytössäkään mitään mieltä.
Tuohan se sitten tietenkin auttoi. Mielestäni noikin kokeilin mutta liekö sitten ollut joku muu vika silloin.
Kiitos.
Hmm.. Kun ammattilainen olet näemmä niin kerro sitten miksi tuo span on ylivoimainen tableen verrattuna. Miten sen avulla on helpompi asemoida roinaa sivulle?
En muuten ole ammattilainen..
Taulukko on ylivoimainen silloin kun on tarkoitus esittää taulukkomuotoista dataa. Tietenkin.
Mutta muulloin taulukko harvemmin on mikään loistovaihtoehto, tässä tapauksessa esimerkiksi taulukko on kaikinpuolin turha. Miksi pitäisi esitellä taulukko, rivi ja pari solua kun ihan hyvin riittää kaksi elementtiä joiden asema kerrotaan.
Span siis ei ole oikeastaan mitään, se on vain in-line elementti ilman merkitystä, kunnes sille annetaan merkitys. Siksi se on niin loistava kun sille voi antaan haluamansa merkityksen.
Ja spania vastaava lohkoelementti on sitten div. Aivan yhtä loistava tapaus.
Ensinnäkin divissä on se huono puoli ettei niitä saa rinnatusten ellei anna absoluuttista paikkaa. Vai saako?
Spanit voi sijoittaa rinnatustenkin mutta mitenkäs jos haluat kahdelle eri riville spanit saman levyisiksi mutta esimerkiksi pitkä sana levittää jonkun niistä. (Jos esimerkiksi selaaja suurentaa fonttia.)
Kuten huomaat niin minä en ainakaan ole ammattilainen mutta jotain koitan opetella.
»divissä on se huono puoli ettei niitä saa rinnatusten ellei anna absoluuttista paikkaa. Vai saako?»
Divit vierekkäin
div {display: inline;}
abcd
efgh
»Spanit voi sijoittaa rinnatustenkin mutta mitenkäs jos haluat kahdelle eri riville spanit saman levyisiksi mutta esimerkiksi pitkä sana levittää jonkun niistä. (Jos esimerkiksi selaaja suurentaa fonttia.)»
Miksi niiden pitää pysyä yhtä leveinä? Jos tarvii niin usein sillon onkin kyse tiedosta joka on syytä esittää taulukossa. Ei taulukoissa siis mitään pahaa tietenkään ole vaan niillä on oma käyttötarkoituksensa, ei niitä kannata silloin käyttää kun on parempikin tapa.
Voihan sitä asioita opetella vaikkei ammattilainen olekaan:)
No spanilla ei taida saada kahta palstaa joissa molemmissa monta riviä tekstiä? Siis tyyliin näin:
Eka rivi
toinen rivi
vielä yksi rivi
Toinen palsta
Ja sen toinen rivi
Ja tuo näyttäis tältä:
Eka rivi________Toinen palsta
toinen rivi______Ja sen toinen rivi
vielä yksi rivi
Tuo alaviiva on vaan sen takia kun tämä poistaa ylimääräiset välit niin yritän tuolla keinolla saada tuon "Toinen palsta" ja "Ja sen toinen rivi" samalle tasolle vasemmalta lukien.
Tuon kylläkin saa sitten tuolla div inline härpäkkeellä. Vaikeaksi menee kun on "tottunut" taulukoihin. Niissä vaan tulee muut rajoitukset vastaan. :(
se jotenkin näin..?
.c1 {
clear:both;
}
.c2 {
float:left;width:50%;
}
.c3 {
float:right;width:50%;border-left:1px solid #000000;
}
.c4 {
border:1px solid #000000; width: 300px;
}
Eka rivi
toinen rivi
vielä yksi rivi
Toinen palsta
Ja sen toinen rivi
Miksi spaneilla pitäisi tehdä palstoitus tai miksi spania yleensäkään pitäisi käyttää tekstikappaleiden elementtinä? Tähän tarkoitukseenhan on jo ennestään oivallinen Paragraph-elementti: Tekstiä..
Palstoitus
#container {
width: 300px;
height: 100px;
}
#container p {
width: 50%;
height: 100%;
}
.first {
background: #FFFAF0;
float: left;
}
.second {
background: #F0FFFA;
float: right;
}
Eka rivitoinen rivivielä yksi rivi
Toinen palstaJa sen toinen rivi
Nuo backgroundit on tuolla ihan vaan havainnollistamisen takia..
Muuten, kyllähän tuo tietenkin spaneillakin toimii. Sen kuin vain vaihdat p-tagien tilalle span. Järkevämpää on kuitenkin käyttää ihan tähän tarkoitukseen olevaa elementtiä.
Huhhuh muuten että Ridge olikin saanut tehtyä monimutkaisen esimerkin..
Siksihän mä kysyinkin et meniskö se jotenkin näin, Html-kitin div starteria olen kokeillut ja tuollaisen se tekee jos containeriin kaksi diviä laittaa, mut ei näytä oikein toimivan, eipä kannata ihmeempiä sillä koettaa, mut onneksi korjasit..=)
Kylläpäs tämä nyt karkasi kauaksi alkuperäisestä aiheesta :) No tuleepa perehdyttyä aiheeseen.
Spanista kyselin harjoituksen vuoksi. Kartoittaakseni mitä milläkin elementillä voi tehdä mikäli tulee eteen tapaus jossa jotain määrättyä elementtiä ei voi käyttää vaan on käytettävä muita.
Kiitokset tästä erittäin valaisevasta opastuksesta. Jättäydyn nyt tästä pois mutta palaan taas asiaan kun tulee ongelma jota en osaa ratkaista :)
Aika kauashan tämä meni alkuperäisestä mutta ei kai se nyt mitään haittaa.
»DIV on geneerinen lohkoelementti, jota käytetään esimerkiksi dokumentin tietyn osan fontin tai värin tai horisontaalisen sijoittelun apuna. Se ei siis itsessään tee mitään, apuna on CSS jolla määritellään kunkin DIV-osan tyyli. DIV voi pitää sisällään mitä tahansa lohko- ja tekstielementtejä, myös toisen DIV-elementin.»
»SPAN on geneerinen tekstitason elementti, jolla ei itsessään ole mitään merkitystä. (DIV on vastaava lohkotason elementti.) Yleensä SPAN esiintyy CSS-tyylisääntöjen apuna, jolloin siihen liitetään attribuutti CLASS tai ID.»
Kannattaa lukea: http://www.saunalahti.fi/wpoet/fin/htmlref-all.htm
Tuo ei ole mitään pitkäpiimäistä tekstiä vaan siinä on käyty yleisimmät html-elementit ja niiden käyttö lyhyesti läpi. Tarkoitettu sellaiselle jolla on jo jonkin verran ymmärtämystä sivunteosta kooditasolla.
..nyt varsinaisesti väärin ollut mutta aika sekavasti tehty kuitenkin. Se on sitä vissiin vähän aina noilla automaateilla..
Nuo kannattaa kyllä ihan oikeesti selvittää itselle kunnolla koska sitten alkaa sivunteko luistaa.
Tuo esimerkkini muuten toimii ihan hyvin vaikka sivun peruspohjana pikkasen muuteltuna:
Palstoitus
body {
margin: 0px;
padding: 0px;
}
h1 {padding-left: 205px;}
#container {
width: 100%;
}
.menu, .maincontent {
padding : 10px;}
}
.menu {
background: #FFFAF0;
float: left;
width: 200px;
}
.maincontent {
background: #F0FFFA;
float: right;
position: absolute;
left: 200px;
}
Otsikko
linkki1
linkki2
linkki3
linkki4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Miten saan navipalstan alas asti samalle tasolle tuon oikean palstan kanssa..?
Palstoitus
body {
margin: 10px;
padding: 0px;
}
#container {
width: 400px;
height: 100px;
position: absolute;
left: 10px;
top: 10px;
}
#header {
background: #EEEEEE;
width: 400px;
height: 30px;
padding: 10px;
border: 1px solid #000000;
}
.first {
background: #FFFAF0;
position: absolute;
top:41px;
width: 100px;
height: 100%;
padding: 10px;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.second {
background: #F0FFFA;
position: absolute;
left:100px;
top:41px;
width: 300px;
height: 100%;
padding: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
ul {
margin-left: 20px;
}
Otsikko
linkki1
linkki2
linkki3
linkki4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
..sen mukaan miten korkeaksi olet sen containerin laittanut. Eli koska nyt container on 100px ja menu mahtuu siihen tilaan niin ekan divin (.first) korkeus on se 100px. Sen sijaan toinen div (.second) ei mahdu 100px:ään niin se venyy korkeammaksi. Koita laittaa containerille vaikka arvoksi 80%.
Tiekkö muuten miksi tein sen menun listaksi?
Katsoppa tuota:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html
Voiko menun tekemistä enää siistimmäksi tehdä?
Ja kun siitä jättää tyylin pois niin se toimii valmiina sivukarttana.
(tuossa suckerfishin menussa pelkkä css riittää kunnon selaimille, se JavaScriptiosuus on tehty korjaamaan IE:n surkeaa css-tukea)
Sokeus iski, oli pikselit ja prosentit menneet sekaisin jossain vaiheessa..=)
Tällaisen koodin löysin http://pro.html.it/esempio/nifty/
Kokeilin tuohon tekeleeseen ja näyttää toimivan vaikka IE ja Firefox näyttää vähän erilailla, mutta mikä tuon pyöreän reunan tekee, ei oikein mennyt päähän..?
Palstoitus
body {
background: #e6e6fa;
margin: 10px;
padding: 0px;
}
#container {
width: 400px;
height: 80%;
position: absolute;
left: 10px;
top: 65px;
}
.first {
position: absolute;
top:41px;
width: 100px;
height: 100%;
}
.second {
position: absolute;
left:100px;
top:41px;
width: 300px;
height: 100%;
}
ul {
margin: 0px 0px 0px 25px;
padding: 0px 0px 0px 0px;
}
div#nifty {
margin: 0px 0px 0px 0px;
background: #9BD1FA;
width: 400px;
}
div#nifty_b {
margin: 0px 0px 0px 0px;
background: #9BD1FA;
width: 90px;
}
div#nifty_c {
margin: 0px 0px 0px 0px;
background: #9BD1FA;
width: 300px;
}
div#nifty_c p {
margin: 10px;
}
div#nifty_c img {
margin: 10px;
}
h1 {
padding: 0px 0px 0px 10px;
}
b.rtop, b.rbottom {
display:block;
background: #e6e6fa}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
b.r1 {
margin: 0 5px
}
b.r2 {
margin: 0 3px
}
b.r3 {
margin: 0 2px
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px
}
Otsikko
linkki1
linkki2
linkki3
linkki4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Pitää syventyä joskus virkeämmällä mielellä asiaan.