Olen suunnitellut nettisivuja, ja minulla on joitakin ongelmia, joihin toivoisin teidän viisaiden neuvoja. Viestin alaosassa on style.css-tiedoston ja sivustoni yhden sivun html-tiedoston muokattu sisältö, jotta näette lähdekoodini ja osaatte tehdä siihen parannusehdotuksia. Tein sivut aluksi IE6:tta silmällä pitäen, mutta nykyään minulla on IE8 ja Mozilla.
Ensin tulee kolme jo alusta asti ollutta probleemaa:
1) Haluaisin, että kuvaa klikatessa kuva aukeaisi kuvatekstin kera (joka näkyy nyt vain perustekstissä, kun kursorin vie kuvan päälle). Kuva olisi keskellä sivua ja kuvateksti sen alla. Kuinka tämä tehdään?
2) Tällä hetkellä teksti menee aivan kuvien kylkeen kiinni. Kuinka kuvien ja tekstin väliin saisi pienen hajuraon?
3) Kuinka tekstiä saisi sijoitettua eri kohtiin palstalla? Haluaisin esimerkiksi öseuraava sivuö -tekstin olevan palstan oikealla reunalla.
Seuraavaksi kolme uudemmilla selaimilla ilmennyttä ongelmaa:
1) Kuvat. Tein kuvat niin, että kuvatekstin näkee siirtämällä hiiren kuvan päälle. Tämä toimi IE6:lla moitteettomasti. Mozillalla kuvan paikalla on kuitenkin vain kehystetty kuvateksti (ei lainkaan kuvaa!). Explorer 8:lla kuva on paikallaan, mutta kuvatekstin tilalla on teksti "Kuvateksti tähän". Mikä eteen?
2) Ääkköset. Explorerilla kaikki näyttää hyvältä, mutta Mozillassa ääkköset eivät näy ääkkösinä, vaan merkkeinä ö ja À. Kuinka ääkköset saa näkymään myös Mozillalla (ja kaikilla muillakin yleisimmillä selaimilla)?
3) En pysty enää muokkaamaan lähdekoodia! IE6:lla tämä toimi, kun vain klikkasin Näytä -> Lähdekoodi ja aloin temmeltää. IE8 ja Mozilla näyttävät kyllä lähdekoodin, mutta eivät anna tehdä siihen mitään muutoksia. Apua!
style.css:
body {
line-height: 140%;
margin: 5em auto;
width: 90%;
padding: 0 1em;
}
div#oikeapalsta {
width: 20%;
float: right;
margin-left: 1em;
text-align: justify;
}
div#keskipalsta {
margin-left: 23%;
margin-right: 23%;
text-align: justify;
}
div#vasenpalsta {
width: 20%;
float: left;
margin-right: 1em;
text-align: justify;
}
img.kuva-oikea {
float: right;
}
img.kuva-vasen {
float: left;
}
img.kuva-keski {
float: middle;
}sivu1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15"> <title>Otsikko</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="oikeapalsta"> </div> <div id="vasenpalsta"> <a href="index.html">Etusivu</a> </div> <div id="keskipalsta"> <h1>Otsikko</h1> <img class="kuva-keski" src="kuva1.jpg" alt=""> <p>Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä...</p> <p>Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä...</p> <p>Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä...</p> <a href="kuva2.jpg" title="Kuvateksti tähän"><img class="kuva-oikea" src="kuva2.jpg" alt="Tämä on se varsinainen kuvateksti, joka kuvan päälle mennessä pitäisi näkyä"></a> <p>Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä...</p> <p>Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä...</p> <p>Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä...</p> <p><a href="sivu2.html">Seuraava sivu</a> </div> </body> </html>
Mod. lisäsi kooditagit
Käytä vaikka valmiita javascript boxeja. Tällainen on esin. lightbox ... jos et halua sitä boxia auki, niin tee vaikka oma js-juttu...
Tämä vastaus oli itselleni melkoista munkkilatinaa, josta en tullut hullua hurskaammaksi (en edes tiedä, mihin kysymykseeni vastaus oli tarkoitettu). Voisiko joku antaa kansakieliset vastaukset kaikkiin esittämiini kysymyksiin? Eli: vääntäkää rautalangasta!
1) JavaScriptilla. Aiheesta on koodivinkki, jota pitäisi olla helppo soveltaa. (Muuten lue oppaita ja opettele; ei ohjelmointitaito tule itsestään eikä koodi ilman ohjelmointitaitoja.)
2) Aseta CSS:llä kuvan (tai tekstin) margin suuremmaksi.
3) Älä laita tasausta (text-align) palstalle vaan palstan p-tageille, ja laita eri reunaan tasattavalle tekstille eri tasaus (esim. text-align: right).
1) Kuvan alt-attribuutti on teksti, joka näytetään, jos kuvaa ei löydy (tai jos selain ei osaa näyttää sitä). Olet siis tehnyt kuvatekstin väärin, sen pitäisi olla title eikä alt. (Tunnetusti IE6 on poikkeava selain, joka näyttää tuon väärään paikkaan laitetunkin tekstin kuvatekstinä. Älä koskaan käytä sitä ensisijaisena kehitysalustana.) IE8 toimii oikein eli näyttää ulomman elementin title-attribuutin sisällön, kun img-elementillä ei ole sellaista. Lisäksi kuvassa tai sen osoitteessa taitaa olla vikaa, jos Firefox (vai tarkoitatko oikeasti Mozillaa?) ei osaa näyttää sitä. Kolmanneksi, kuvalla pitää standardin mukaan olla aina myös alt-attribuutti, vaikka sitten tyhjä.
2) Olet ilmeisesti tallentanut tiedoston UTF-8-enkoodauksella. Muuta siis meta-tagissa olevan ISO-8859-15:n tilalle UTF-8 ja varmista myös, että palvelin ilmoittaa HTTP-otsikoissa saman enkoodauksen. (Voit tarkistaa asian Firefoxin Live HTTP headers -lisäosan avulla.)
3) Ei sitä kuulu selaimen kautta muokatakaan. Hanki tekstieditori ja avaa se tiedosto ihan levyltä.
Muista jatkossa käyttää myös kooditageja lähettämiesi koodien ympärillä.
Kiitos vastauksista! Vielä pari tarkennusta:
Metabolix kirjoitti:
1) JavaScriptilla. Aiheesta on koodivinkki, jota pitäisi olla helppo soveltaa. (Muuten lue oppaita ja opettele; ei ohjelmointitaito tule itsestään eikä koodi ilman ohjelmointitaitoja.)
Haluaisin, että kuva avautuu uuteen sivuun (ei pop-up-ikkunana). Niin on nytkin, mutta sivulla on vain kuva eikä mitään muuta. Kuinka kuvan saa aukeamaan kokonaan uudelle sivulle kuvatekstin kera?
lainaus:
3) Älä laita tasausta (text-align) palstalle vaan palstan p-tageille, ja laita eri reunaan tasattavalle tekstille eri tasaus (esim. text-align: right).
Kuinka tämä tarkalleen ottaen tehdään? Voisitko antaa ihan sen style-tiedostoon lisättävän koodipätkän, jolla palstan p-tageille tehtävä tasaus toteutetaan?
Heikki-Johannes kirjoitti:
Kuinka kuvan saa aukeamaan kokonaan uudelle sivulle kuvatekstin kera?
Joudut tekemään sen uuden sivun ihan kokonaan, siis joka kuvalle oman HTML-tiedoston, jossa on vaikka img-tagilla kuva ja p-tagilla kuvateksti. (Helpointa tietysti olisi, jos käytössäsi olisi jokin ohjelmointikieli kuten PHP ja tietokanta, jossa ovat kuvat ja kuvatekstit. Tällöin riittäisi yksi PHP-tiedosto, joka hakisi kuvan ja tekstin tietokannasta. (Jos valitset tämän vaihtoehdon, lue PHP-opasta.))
Heikki-Johannes kirjoitti:
Voisitko antaa ihan sen style-tiedostoon lisättävän koodipätkän --
div#keskipalsta {
margin-left: 23%;
margin-right: 23%;
/* text-align: justify; POIS */
}
div#keskipalsta p {
text-align: justify;
}
div#keskipalsta p.oikea {
text-align: right;
}<div id="keskipalsta"> <p>Lorem ipsum dolor sit amet...</p> <p class="oikea"><a href="#">Linkki</a></p> </div>
Aihe on jo aika vanha, joten et voi enää vastata siihen.