Keskustelu: Nettisivujen teko: JavaScript : Kuvien asettelua

Hei!

Olen rakentamassa Lautapelisivustoa Helsingissä ( http://www.lautapelisuomi.eu ) :)

Minulla on tuolla sivulla "websivu.png" niminen kuva.
Kuva on runko minun sivujeni lopulliselle ulkonäölle.

Lisänä sivuilla on shakki button vasemmassa reunassa left=19 top=470 tai jotain.

Itse "websivu.png" file asetetaan aina <center>.
kun taas nämä buttonit sitten tulevat <div left top> käskyllä.

kuinka minun tulee rakentaa sivuni jotta buttonit ovat sitten aina oikeassa
kohdin vaikka sivuja katsellaan eri resoluutioissa.

tahdon siis että tuo "websivu.png" file on aina keskellä ruutua ja buttonit sitten
sijoitellaan kyseisen kuvan päälle ( nythän ne ovat vain piirrettyinä siinä ).

ensimmäinen kerta kun käytän JavaScriptiä.

//----

kiitos,,

Entäs jos laittaisit websivu.png:n taustakuvaksi?

Jeh!

En ymmärrä mitä tarkoitat.

Ilmeisesti viittaat johonkin CSS ( vai olikos se CCS ?? ) ominaisuuteen.
HTML taustakuvat ovat muistaakseni TILED muodossa ja eri tietokoneissa on eri resoluutiot.

En tunne netti sivu kieliä vielä tarpeeksi ymmärtääkseni lausettasi ??

Ongelma on siis se että websivu.png file on aina <center>.
ja nämä buttonit ovat imageja jotka ovat <div left top>.
kun eri resoluutioita käytetään missä sivu on rakennettu ni kuvat ovat väärissä kohdin ??

(muokkaus)
en olekkaan vielä kokeillut toimiikos esim. left=center-100.
ei taida, mutta, täytyy huomenna kokeilla.

//----

kiitos,,

Katso sitten javascriptillä screen.width ja vähennä siitä haluamasi.

Toinen tapa tehdä tämä olisi asettaa websivu.png keskitetyksi taustakuvaksi ja tehdä kyseisen kuvan levyinen keskitetty elementti. Elementin sisällä voisi sijoitella buttoneita miten huvittaa. Eli jos kuvan leveys on 500 pikseliä, sivu olisi tämän tapainen:

<center style="width: 500px; background-image: url(websivu.png);">
<img src="buttoni1"><br>
<img scr=""buttoni2">
</div>

Heh!

En kyllä päässyt pätkääkään eteenpäin asiassa.

Minulla on siis kaikki hyvin tuon "websivu.png" kuvan kanssa, se on aina keskellä.

ongelmana ovat nämä pikku kuvat jotka toimivat buttoneina "websivu.png" kuvan päällä.

mitenkä minä ne sijoitan.

(tämä on jokin tosi simppeli juttu, mutta vanhus ei taas tajua. )

siinä "websivu.png" fileessä on vielä piirrettynä buttoneita, mutta ne poistetaan.

eli, vielä helpommin ->

kuinka liitän kordinaatio yläkulman (0,0) tuohon centerissä olevaan 960px leveän alueen vasempaan yläreunaan.
kun näin toimin niin button kuvat ovat sitten aina oikeassa paikassa, selailijan resoluutioista riippumatta.
eli, kuinka toimia jotta saan button kuvat oikeisiin kohtiin ??

( lisäksi ymmärtääkseni tuo screen.width on näytön resoluution koko, ei itse selain ikkunan joka saattaa olla kooltaansa mitä tahansa. )

//----

kiitos,,

Asioita saa sijoiteltua sivun keskikohtaan nähden, kun asettaa vasemman reunan sivun keskelle (left: 50%) ja muokkaa sitten objektin marginaalin kokoa (vaikka negatiiviseksi). Kannattaa ehkä ottaa lähtökohdaksi jotain muuta kuin center-tagi, vaikkapa div, jonka voi sijoittaa mainitulla tavalla sivun keskelle ja jonka sisään voi sitten asetella kuvat vaikka absoluuttisilla arvoilla.

Jeh!

Minä olen vaikea.

Voitko vielä selittää tuon lauseen.. "ja jonka sisään voi sitten asetella kuvat vaikka absoluuttisilla arvoilla."

tämä juuri on minun ongelmani että en osaa sijoittaa kuviani, tietyn <div width> alueen sisään vain koko selain ruutu on koordinaattieni kohde.

voitko laittaa pari riviä koodia ??

seuraava omani ei riitä päämäärääni.

<center>
<div style="width: 960px;">
<div id="Shakki" style="position: absolute; z-index: 1; visibility: visible; left: 19px; top: 470px;">
<img border="0" src="NShakki.png" name="b1" width="206" height="47" onmousedown="mouseDown()" onmouseout="mouseOut()" onmouseup="mouseOut()"/>
</div>
</div>
</center>

kuinka tuo id="shakki" <div ja img> saadaan asettumaan kiltisti tuon <center><div ... 960px;"> sisään.
minun koodissani tuo 19px ja 470px asettuvat koko selain ikkunan koordinaatteihin, tuon <center> 960px sisällön sijaan.

(vielä)
jos tuo..

<div style="width: 960px;">

muutetaan seuraavaan muotoon..

<div id="testi" style="width: 960px;">

onko tuo enää html koodia ??
ja sitten tuo

<div id="Shakki" style="position: absolute; z-index: 1; visibility: visible; left: 19px; top: 470px;">

muutettaisiin muotoon..

<div id="Shakki" style="position: testi; z-index: 1; visibility: visible; left: 19px; top: 470px;">

mutta ei toimi.

onko joku tuon kaltainen asettelu vastaus tilanteeseeni ??

//----

kiitos,,

Alla on yksi tapa keskittää laatikko sivulle.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title></title>
        <style type="text/css">
.box{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  background-color: yellow;
}
</style>

<div class="box">keskitetty</div>

Kyllä!

kiitos, laitoin tuon margin-left ja margin-top lisäyksenä html koodiini, en käyttänyt css luokkaa.

taas askeleen verran lähempänä valmista tuotetta.

hienoa !!

laitan huomenna buttonit kohdalleensa.
löydät ne sitten tuosta eteenpäin seuraavasta URL ( http://www.lautapelisuomi.eu ).

//----

kiitos,,

kpzpt kirjoitti:

<div style="width: 960px;">

muutetaan seuraavaan muotoon..

<div id="testi" style="width: 960px;">

onko tuo enää html koodia ??
ja sitten tuo

<div id="Shakki" style="position: absolute; z-index: 1; visibility: visible; left: 19px; top: 470px;">

muutettaisiin muotoon..

<div id="Shakki" style="position: testi; z-index: 1; visibility: visible; left: 19px; top: 470px;">

Laita <div id="Shakki"></div> -muotoiset tagit <div id="testi">:n sisään.

Sitten <div id="Shakki">:lle position: relative;

Miksi pitää mainostaa tuota sivustoa koko ajan? Eikö lähdekoodin postaus ja ohjeen pyyntö riittäisi?

En ole kyllä CSS expertti, mutta eikös tuo onnistuisi sillainkin, että tekee yhden ison divvin, jonka keskittää ja sijoittaa sen sisään sitten muuta materiaalia?

Ok!

Kokeilin tuota "position: relative" se vaikuttaa vielä paremmalta ratkaisulta..
Olisi juuri se paras että osaisin siirtää tuota (0,0) koordinaattia ruudulla ensimmäisen <div> asettelun mukana.

Mutta "relative" ei toimi minun koneessani tuolla tavalla. Kakkos kuva ei sijoitu koordinaatteihin ensimmäisen <div> mukaan.

----

"mutta eikös tuo onnistuisi sillainkin, että tekee yhden ison divvin, jonka keskittää ja sijoittaa sen sisään sitten muuta materiaalia?"

Heh, juuri näin, mutta mitenkä, kokemus html koodista lähes olematonta.
tuo <div><div> sijoittaminen on juuri se ongelma.
eli kuinka koordinaatio (0,0) ensimmäisen <center> <div width> asettelun ylänurkkaan seuraavia <div><img> rimpsuja varten ??

//----

kiitos,,