Terve!
Minulla on sivut, joissa on käytetty tyylitiedostoa. http://samivain.propelli.cop.fi/alpit/
Sivut näkyy ihan oikein täydessä ikkunassa, mutta kun pienennät ikkunaa, niin content:n taustakuva ei "leviäkkään" koko ikkunaan. Miten tuon saa korjattua. Ja sillain ettei contentin leveydeksi laiteta kiinteää 1024px
#content
{
position: absolute;
top: 50px;
left: 0px;
right: 0px;
font: Tahoma;
font-size: 12px;
height: 350px;
line-height: 1.6em;
background: transparent url(images/taustacontent.jpg);
}Miksi sinulla on edes käytössä position: absolute?
Tuollaisen saa paljon toimivammaksi pelkillä marginaaleilla.
Vikahan on luonnollisesti vain Internet Explorerilla, Firefoxilla ei ole mitään vikaa. Ongelma johtuu yhtäaikaisista left ja right -määrityksistä: IE ei tykkää molemmista. Joten voit laittaa esim. left : 0px; ja sitten width : 100%;
Toisaalta et kyllä tarvitse position : absolute; -tyyliä ollenkaan:
body { margin : 0; padding : 50px 0 0 0; }
#content {
background : url('images/taustacontent.jpg') repeat 0 0;
font: 12px/1.6em "Tahoma", sans-serif;
height : 350px;
}Transparenttia ei tarvitse määritellä, käytettäessä tuota backgroundia nollaat samalla taustavärin paitsi jos määrittelet sen värin.
Font on samanmoinen yleistävä tyyli, joka nollaa kaikki fonttiasetukset, plus voit samalla heittää koon ja rivinkorkeuden samalle riville.
#content leviää automaattisesti käytettävissä olevaan leveyteen, ja koska reunukset on poistettu bodysta nollaamalla margin ja padding, niin sitten se menee koko sivun leveyteen. Laitoin paddingin yläpuolelle sen 50px, joka korjaa #contentin asemoinnin alemmas. Säästää hieman koodin määrää :)
Marginaalin ja paddingin sääntöjärjestys menee kellotaulun mukaisesti järjestyksessä ylälaita, oikea laita, alalaita ja vasen laita.
öö.. mulla vika ilmenee sekä firefoxilla että explorerilla.
Tein jotain korjauksia mutta vieläki sama vitsi. Se ottaa tuon 100% aina ikkunan leveydestä.
Mikä lie. Onko kellään samantyylistä toimivaa layouttia
Emmää tiiä muuta kuin että hyvinhän tuo näyttää toimivan nyt sekä IE:llä että Firefoxilla.
aika jännä
otappa screenshotti ja lähetä kuva sampsa@vetelainen.net nii nään onko oikeesti näin :)
Mitä turhia:
http://merri.net/ruudut/hallan_alpit_firefox.jpg
http://merri.net/ruudut/hallan_alpit_ie6.jpg
http://merri.net/ruudut/hallan_alpit_opera9.jpg
Mielenkiintoista. Miksiköhän minulla näkyy miten sattuu http://samivain.propelli.cop.fi/ongelma.jpg
Entä jos sä pienennät vielä tuostakin tuota ikkunaa, niin tuleeko sulla vierityspalkki esiin.
onko mahdollisesti selaimen asetuksissa jotain?
Vierityspalkki toki tulee, laitoin nuo minimileveydellä ilman vaakavieritystä. Tuota ulkoasua kun ei kovin joustavaksi ole rakennettu.
Muoks! (poisteltu IE-juttua)
Huppista, kattelin väärää selainta. Noh, Firefoxista on jo 1.0, 1.5 ja 2.0 -sarjaa liikenteessä... minulla on 2.0. Firefox-käyttäjät tulevat lopulta kyllä siirtymään kaikki automaagisesti 2.0 -versioon, että suosittelen sinullekin siirtoa ylemmäs.
Edit: scratch that, tajusin vasta nyt, miten tuota piti kattoa, että se virhe näkyy.
miten tuon ulkoasun voisi ja kannattaisi rakentaa joustavaksi. Tosiaan, nyt on se ongelma, että tuo harmaa tausta ei ole koko taustan levyinen. eli mitä enemmän pienennät ikkunaa sitä enemmän jää oikealle tyhjää harmaan taustan kohdalle. osoite siis http://samivain.propelli.cop.fi/alpit/
En jaksanut säätää kauheasti, joten tässä jossain kymmenessä minuutissa koottu sivu, joka ei hajoile kun ikkunan koon vetää liian pieneksi.
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hallanalpit, Ukkohalla</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Language" content="fi">
<meta name="keywords" content="loma, lomailu, mökki, mökit, lomamökki, lomamökit, loma-asunto, loma-asunnot, ukkohalla, hallanalpit">
<!--link rel="stylesheet" type="text/css" href="tyyli.css"-->
<style type="text/css">
body {
margin : 0;
padding : 0;
background : url('http://samivain.propelli.cop.fi/alpit/images/lumihiutale.jpg') repeat;
font : 12px/1.6em "Tahoma", sans-serif;
}
#header,#footer { height : 50px; }
#header { background : url('http://samivain.propelli.cop.fi/alpit/images/lumihiutale_header.jpg') repeat-x; }
#footer { background : url('http://samivain.propelli.cop.fi/alpit/images/lumihiutale_footer.jpg') repeat-x; }
#content,#leipateksti { height : 350px; margin : 0; padding : 0; }
#content { position : relative; }
#valikko { left : 0; list-style : none; position : absolute; top : 0; margin : 0; padding : 5px; width : 110px; }
#valikko li { display : inline; }
#valikko a { display : block; }
#kuva { border : 0; display : block; left : 120px; position : absolute; top : 0; margin : 0; padding : 0; }
#leipateksti { background : url('http://samivain.propelli.cop.fi/alpit/images/taustacontent.jpg') repeat; color : #58595B; padding : 0 5% 0 535px; overflow : auto; }
#leipateksti h3 { margin : 0; padding : 5px; }
</style>
</head>
<body>
<div id="body">
<div id="header"></div>
<div id="content">
<ul id="valikko">
<li><a href="?sivu=0" id="valittu">Etusivu</a></li>
<li><a href="?sivu=1">Mökit</a></li>
<li><a href="?sivu=2">Hinnat</a></li>
<li><a href="?sivu=3">Varaukset</a></li>
<li><a href="?sivu=4">Aktiviteetit</a></li>
<li><a href="?sivu=5">Kuvia</a></li>
<li><a href="?sivu=8">Kartta</a></li>
</ul>
<img id="kuva" alt="" src="http://samivain.propelli.cop.fi/alpit/images/varaukset.jpg">
<div id="leipateksti">
<h3>Tervetuloa Hallanalppien verkkosivuille!</h3>
<p>Hallanalpit on viihtyisä paritalo, joka sijaitsee rauhallisessa mökkikylässä Ukkohallan sydämmessä. Hallanalpit sijaitsee puhtaan luonnon ja erinomaisten harrastusmahdollisuuksien keskellä. Mökiltä on lyhyet etäisyydet niin hisseille, Hallan Saagaan kuin myös esimerkiksi uimarannalle.</p>
<p>Hallanalpit sijaitsee rinnetontilla, josta avautuu upeat näkymät järvelle ja järven takana siintäville vaaroille.</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>Huomioita:
- #headerin ja #footerin voisi täydellisesti korvata #bodyyn asetetulla PNG tai GIF -taustakuvalla sekä laittamalla #bodylle ylä- ja alapaddingiksi 50px.
- Olit käyttänyt h3-tagia leipätekstin värittämiseen. Älä koskaan tee näin. Tagi oli myös sijoiteltu rikkonaisesti.
- Muutin valikkolistauksen listaksi.
- Poistin tupla-br:t ja muutin tekstin kappalejaoille. Käytä br:ää vain yksittäisiin rivinvaihtoihin kappaleen sisällä, älä kappalejakoihin.
- Kuva on enemmän sisältöä kuin ulkoasua tässä tapauksessa. On järkevämpää käyttää img-tagia kuin tehdä pitkä listaus CSS-tyylejä jokaiselle eri kuvalle ja sitten vaihdella tyylin nimeä kun pelkkä tiedostonimen vaihtaminen riittää.
- Siistin rakennetta muutenkin ja laitoin perussisennyksen, josta näkee nopeasti ja selvästi miten sivu rakentuu. Ei tarvitse laittaa kommentteja siitä, koska jokin elementti päättyy.
- Jos rakennat ulkoasun tämän esimerkkini pohjalta, varmista ettei #leipatekstin ensimmäisellä elementillä ole ylämarginaalia. Tämä rikkoo ulkoasua.
Merri kirjoitti:
En jaksanut säätää kauheasti, joten tässä jossain kymmenessä minuutissa koottu sivu, joka ei hajoile kun ikkunan koon vetää liian pieneksi.
Ja minä kun kuulin että divejä on helpompi käyttää kuin taulukoita... :d
Niitä onkin, heti sitten kun ei yritä taittaa sivua taulukkotyylillä kuten tässä on yritetty tehdä. Ja siis enemmän on kyse CSS:stä kuin diveistä... divejä pitäisi käyttää oikeastaan niin vähän kuin mahdollista, tuossakin niitä on käytetty pari turhaan.
Miten päin vain, kaikki asiat vaativat opettelua.
Merri kirjoitti:
Miten päin vain, kaikki asiat vaativat opettelua.
Taulukot vähemmän :)
Tsk tsk, niissäkin on omat monimutkaiset kikkansa opeteltavana :) Ne voivat tuntua helpoilta ja yksinkertaisilta asioilta jos on taulukkoja aina käyttänyt, mutta eivät ne sitä aloittelijalle ole. Taulukoissa ei ole mitään etua CSS-taittoon verrattuna, vaikka etuja jonkin tietyn asian tekemisessä on. Mutta vastaavasti CSS-taitolla on monia etuja taulukkotaittoon verrattuna.
Siksi taulukkotaittoa ei tarvitse edes pitää mainitsemisen arvoisena vaihtoehtona.
Merri kirjoitti:
Siksi taulukkotaittoa ei tarvitse edes pitää mainitsemisen arvoisena vaihtoehtona.
Ennenkuin sivulla todellakin tarvitaan taulukkoa, kuin joskus kuulin. Toki diveillä saanee jotain vastaavaa, mutta miksi kikkailla turhaan jotain purkkaa? Jos se on taulukko, tehdään se taulukkona, eikä tehdä sitä niinkuin se näyttäisi taulukolta. Näin sanoit otsikoiden teosta aikoinaan itse, mitä muistelen ;-)
-Grey-
Öö, siis taulukot ovat tietysti taulukkojen tekemistä varten, mutta sehän on koko HTML:n perusta: käytetään niitä elementtejä siihen asiaan mihin ne on tarkoitettu. Edellinen viestini ei ole tätä lausumaa vastaan millään lailla. Taulukkotaittaminen vaan tarkoittaa sitä, että rakennetaan (koko) ulkoasu käyttäen taulukoita. Taulukkoja vaan ei ole tarkoitettu ulkoasurakenteeksi, vaan sisällön kuvaamiseen.
Harmittavasti IE ei vieläkään osaa noudattaa taulukkotyylejä, mitkä olisivat joskus erittäin avuliaita. Nyt vain taulukot voivat toimia taulukkotyylien avulla. Kunhan saadaan display : table;, display : table-row; ja display : table-cell; kaikkiin selaimiin toimivaksi, niin sitten ei ole ainuttakaan perustetta taulukoiden käyttöön ulkoasurakenteessa :)
Muoks
Humm, taisin lukea osan viestistäsi väärin, mutta jääköön kuitenkin tuohon kun ehdin kirjoittaa. Piikittelevä hymiö lopussa hämää kuitenkin.
Aihe on jo aika vanha, joten et voi enää vastata siihen.