Kotisivun yläpalkki kuvista CSS +html

[homeKorva]

Heippas,
mikä on selainyhteensopivin tapa esittää nykyään kotisivun menu/logo grafiikat kuvaviipaleista.?
Niitä mitä ennen tehtiin laittamalla kuvat taulukon taustaan tai tekemällä kehyksiä, mutta aina oli kauhiasti ongelmia...
Nyt tarkoituksena on tehdä sellainen yläpalkki, jonka oikean reunan kuva roikkuu hiukan itse sisällön taustalla.
En oikein saanut tehtyä niin, että olisi toiminut myös caminolla ja firefoxilla kivasti. Safari kyllä näytti...
Kokeilin siis tehdä edelleen taulukkorakenteen, mutta kuvat määritin sitten CSS:llä background-image jne. ominaisuuksia käyttäen.
Ongelmaksi muodostui tasaus solun oikeaan reunaan, joka ei tuntunut oikein kaminassa/ff toimivan.

Ilman sen kummempia koodiesimerkkejä kysynkin, mikä on paras tapa lähteä työntämään sormia rasvaan?
Millä tällaiset "taustakuvat" kannattaa asemoida?

Kiitos,

-h-

[Macco]

Taulukkotaitto ei ole hyvä tapa enää tänä päivänä (eikä ole kyllä koskaan ollutkaan). Suosittelen, että tutustut tarkemmin CSS-asemointiin. Esim. div-laatikon sisällä voi taustakuvan asemoida haluamaansa kohtaan CSS:ää käyttäen. Ja tällöin voi käyttää kokonaisia kuvia viipaloitujen sijaan.

[homeKorva]

Hei ja kiitos vastauksesta.
Ajattelinkin, että tuo table leiska on jo "out of style".
Palaan kyselemään kun on div tausta hallussa ja ongelmia ilmassa.
-h-

[Juhani L]

Katsopa Chris Hopen hienoa ratkaisua. Ehkä ei sulle juuri tässä sovi, mutta mulle sopi eräässä yhteydessä mainiosti. Tuolla pieni skaalautuva nelipalstainen sivumalli, jossa sitä on käytetty. Unohda taulukot, nyt on 2000-luku. Tuolla propakantaa asiasta.

[homeKorva]

kiitos!
Tuo olikin hyvä pätkä
Aivopesu valmis.

[rok93]

Huh, mistähän sitä alottais tälläsen projektin? Koodaaminen ei sinäällään kiinnosta sitten minkään vertaa, mutta omat sivut on 'pakko' hoitaa itse.

CS3:lla duunattu yksinkertanen leiska, max. pari eri sivua, joihin olis tarkoitus upottaa BananaAlbum galtsu.

Älä vastaa "psd to css googleen" kiitos :- ))

Sutasin nyt tälläsen samplen nopeesti niin ei jää epäselväksi.

[Fixx]

Kaipa vaan määrittelet fotarissa sopiva slaissit ja exporttaat palat giffeiksi. Koostat mielieditorissasi.

[homeKorva]

Kiitos johdatuksesta.
Leiskasta tuli pommin tai jopa ydinsodan-pydinsodan kestävä ja toistaiseksi kaikilla testaamillani selaimilla toimiva

strict validointi aiheuttaa hiukan pään vaivoo, kun objektien keskittäminen ei ole enää niin simppeliä... Esim div toisen divin sisällä. Onko muuta tapaa kuin ne negatiiviset marginit yms.? Ennen käytettiin jotain align ja center tageja, mutta ei taida olla ihan "sallittua". Ennen tosin oli myös laivat puuta...

Asiasta viidenteen: pakko muuten ostaa codan lisenssi. Alkaa testiaika loppua ja yhä enemmän alan tykätä. Esim. validointimarkkerit tagikohtaisine herjoineen on melko kiva! ja svn tuki!
-h-

[rok93]

Kaipa vaan määrittelet fotarissa sopiva slaissit ja exporttaat palat giffeiksi. Koostat mielieditorissasi.

Ei kerro yhtään mitään vielä. Koodia oon duunannut viimeks joskus skidinä, en muista siitä oikeestaan yhtään mitään. Editorina varmaan toimii toi hostingpalvelun oma ihan hyvin?

[Nimimerkki]

Kiitos johdatuksesta.
strict validointi aiheuttaa hiukan pään vaivoo, kun objektien keskittäminen ei ole enää niin simppeliä... Esim div toisen divin sisällä. Onko muuta tapaa kuin ne negatiiviset marginit yms.? Ennen käytettiin jotain align ja center tageja, mutta ei taida olla ihan "sallittua". Ennen tosin oli myös laivat puuta...
-h-

Css:llä keskittäminen tapahtuu määrittämällä elementille (esim. div) jonkin leveyden ja asettamalla sekä vasemmalle että oikealle marginaalille arvon auto.
esim.

Koodi: Valitse kaikki

div#keskitetty {width: 250px; margin-left: auto; margin-right: auto;}

Editorina varmaan toimii toi hostingpalvelun oma ihan hyvin?

Kehoittaisin kyllä lämpimästi tekemään sivut aluksi omalle koneellesi ja suorittamaan siirron palvelimelle tämän jälkeen. Näin sulla on kopio niistä jos jotain menee serverinpäässä vikaan. Ilmaisista editoreista Smultron on oma suosikkini, kannattaa kokeilla.
PS. Onko verkko-opas tuttu?

[homeKorva]

Css:llä keskittäminen tapahtuu määrittämällä elementille (esim. div) jonkin leveyden ja asettamalla sekä vasemmalle että oikealle marginaalille arvon auto.
esim.

Koodi: Valitse kaikki

div#keskitetty {width: 250px; margin-left: auto; margin-right: auto;}

Kiitos,
olin tuon jotenkin missannut.
-h-

[homeKorva]

Jatkan vielä tähän, kun samma sivua käsittelee:

Onko mahdollista saada selain käsittämään, että menun taustakuvaa ei tarvitse ladata joka sivulle uudelleen?
Vai onko tämä selaimen itsensä vain osattava mikäli tahtoo näin?
Olisi vihreää se

Nyt se laitetaan wrapper divin taakse kutakuinkin näin:

#wrapper {
margin: 0 auto;
width: 900px;
background: #ffffff url(kuvat/toplogo9-vino.png);
background-repeat: no-repeat;
}

Kiitos avusta!

T: Heikki

[Juhani L]

Onko mahdollista saada selain käsittämään, että menun taustakuvaa ei tarvitse ladata joka sivulle uudelleen?
Vai onko tämä selaimen itsensä vain osattava mikäli tahtoo näin?
Olisi vihreää se

Nyt se laitetaan wrapper divin taakse kutakuinkin näin:

#wrapper {
margin: 0 auto;
width: 900px;
background: #ffffff url(kuvat/toplogo9-vino.png);
background-repeat: no-repeat;
}

Tuossahan taustakuva on CSS:ssä eikä html-puolella. Sen toimii kaikilla sivuilla, jotka käyttävät samaa CSS-tiedostoa. Onhan sulla toki ulkoinen CSS-tiedosto eikä tyylitietoja erikseen joka sivulla? Vaikkapa headin sisällä näin:
<link rel="stylesheet" type="text/css" media="screen" href="tyyli.css" />

Joka tapauksessa kun ihminen menee saman kuvan sisältävästä sivusta toiselle kuvan sisältävälle sivulle, tuo kuva on normaalisti selaimen välimuistissa eikä sitä ladata tarpeettomasti uudestaan.

[homeKorva]

kiitos,
tosiaan siellähän se on tyylitiedostossa. Hyvö jos näin pelaa.
<link rel="stylesheet" type="text/css" href="faux-leiska.css" />
mutta liekö tuo median puute vaikuttaa asiaan... testailen.

-h-