Eli miten saisin parhaiten/helpoiten keskitettyä seuraavan sivun?
http://ydinjate.org/
CSS -tiedosto löytyy esim. tuolta:
http://ydinjate.org/styles/musta.css
En pyydä valmista koodia, vaan sitä, että miten se pitäisi toteuttaa.
Kysykää heti kun tulee jotain kysyttävää.
Kysymys 2:
Miksi Opera -selaimella kyseisen sivuston kirjautumisboksi ei näy oikein?
Se näkyy oikein kun on kirjautunut tai on muulla selaimella kirjautumatta. Opera on ainoa mikä ei näytä oikein. (Siinä on siis tyhjä tila, kuten huomaatte)
PS: Jos jotain kiinnostaa niin ulkoasun tein sellaiseksi että se oli valid xhtml, mutta kun rupesin sisältöä tekemään, en jaksanut enää ruveta sitä validoimaan.
PS2: Sisennykset mättää johtuen notepad2 -ohjelmasta. Kun muokkaan sillä sivuja, kaikki näyttää hyvältä. (Ehkä voisi vaihtaa toiseen ohjelmaan?)
<div id="keskitys"> ...tähän sivusi koko sisälmys </div>
#keskitys{ margin : auto; width:1024px; // sivusi leveys, laita tämä riittävän suureksi }
Suosittelen toisenlaista lähestymistapaa:
<div id="vasen_palkki">... laatikoita ...</div> <div id="oikea_palkki">... laatikoita ...</div> <div id="sisalto">...</div>
#vasen_palkki { float: left; width: Apx; } #oikea_palkki { float: right; width: Bpx; } #sisalto { margin-left: Apx; margin-right: Bpx; }
Näin sivu skaalautuu selaimen mukaan mutta palkit pysyvät vakiolevyisinä.
Jos aivan välttämättä haluat tehdä niin tyhmän sivun, ettei sitä voi sivusuunnassa skaalata (jo tuo nykyinen on minulle aivan liian leveä, varsinkin logo, en kävisi toista kertaa), voit laittaa koko sivua ympäröivälle diville jotain tällaista:
#koko_sivu { position: relative; left: 50%; margin-left: -(W/2)px; /* W/2 = puolet sisällön kokonaisleveydestä */ }
Metabolix mikäs resoluutio sulla on?
Toi on suunniteltu 1024x768 + resoille, mikä on aika yleinen minimireso.
Sulla on varmaan sitten pienempi?
Ei muuten onnistu noilla. Laatikoiden sijainnit on annettu koordinaatein(position:absolute). Ilmeisesti pitää muuttaa relativeksi, jotta toimisi.
EDIT: Muutin relativeksi ja sain keskittymään. Nyt on sellanen ongelma, että tuon oikean puoleisen "lootan" y-koordinaatti pitäisi määritellä (esim. -150px). En tiedä kuinka korkea keskellä oleva loota on, koska sen height:auto, joten en voi sitä määritellä.
Miten saan kaikki lootat samalle tasolle?
Jotenkin pitäisi saada määriteltyä, mistä elementistä kyseinen loota koordinaatit ottaisi.
Metabolix kirjoitti:
jo tuo nykyinen on minulle aivan liian leveä, varsinkin logo, en kävisi toista kertaa
No ? Et mene toiste sivuille, jotka huomaat leveämmäksi kuin sinun pieni näyttöruutu....? Tuota pienempiä sivuja on aika harvassa. :)
Quirzo kirjoitti:
Toi on suunniteltu 1024x768 + resoille, mikä on aika yleinen minimireso
Tuohan aiheuttaa jo mainitulla 1024 pikselin levyisellä ruudulla vaakaliukupalkin, selaimessa nimittäin on lähes aina myös reunukset. Oma resoluutioni on yleensä 1400x1050, mutta en todellakaan pidä selainta läheskään koko ruudulla — kuvaan pitäisi mahtua samaan aikaan myös yksi 25x80 merkin kokoinen terminaali, kaistale tekstieditoria ja kaikenlaista muuta. Selain on sisältöosaltaan ehkä 900 pikseliä leveä, usein vähimmänkin. Ei se resoluutio mitään kerro, jotkut osaavat käyttää monta ohjelmaa samalla ruudulla. ^^
Pekka Mansikka kirjoitti:
Tuota pienempiä sivuja on aika harvassa. :)
Tämä ei kyllä pidä paikkaansa. Monet käytettävyyttä silmällä pitäen suunnitellut sivustot skaalautuvat paljon paremmin. Jopa Wikipedia toimii suurehkolla fonttikoollanikin 800 pikselin levyisessä ikkunassa ilman vaakaliukupalkkia, ja tämä Ohjelmointiputka tässä kutistuu nätisti 640x480-ruudullekin.
Jos jokin asia haittaa sivun käytettävyyttä niin liika leveys vaakasuunnassa. Erityisesti minusta on älytöntä aiheuttaa se noin kuin tuolla sivulla: sivun yläosassa on kaikenlaisia laatikoita molemmissa reunoissa, alempana taas jää reunoihin hurjasti tyhjää tilaa. Mutta kuka mitenkin haluaa sivunsa tehdä. ^^ Suunnittelumuoti on toki eri asia kuin käytettävyys, ja usein "tyylikästä" sivua moni väittää helppokäyttöiseksi vaikka väkisin, vaikkei välttämättä rationaalisesti ajatellen olisikaan sitä mieltä. :<
Toinen asia, josta on syytä valittaa, on se, että tuo ei nyt oikein tue fontin skaalaamista, kun mitat määritellään pikseleinä.
Tässä on nyt taas ikuinen kysymys siitä, onko hyvä tehdä hyviä sivuja vai suosittuja sivuja. Tee, miten haluat. ^^ Yleensähän sitä tosiaan valitaan se tavanomainen, "hieno", "tyylikäs", "cool", "ammattimainen" tms. Itse kun teen sivuja lähinnä omaan käyttööni, keskityn yleensä pelkistettyyn tyyliin ja hyvään venyvyyteen.
Varsinaisesta aiheesta vielä: en nyt ymmärtänyt, minkä y-koordinaatti pitäisi säätää ja minne sen haluaisit, minusta tuolla olivat kyllä olennaiset laatikot samassa tasossa. Järkevintä olisi asetella koko systeemi niin, että kukin laatikko ottaisi pystysuunnassa oman tilansa ja oman paikkansa ihan itsenäisesti. Kun ne ovat noiden vasen_palkki- ja oikea_palkki-divien sisällä, ne asettuvat kyllä itsekin nätisti ilman erillisiä sijaintimäärittelyjä. Leveyden voi toki määrätä (100%).
Tässä on tämä joustavampi tyyli esittelyssä. Noin yleisesti koko ulkoasun taittaminen position: absolutella on aikamoisen tuskaista, joten on hyvä opetella joustavampaa taittoa (ainakin jos aikaa enemmänkin sivuja tehdä). Samalla yleistin tyylejä, jottei tarvitse samoja asioita useita kertoja toistaa :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" /> <title>Ydinjate.org</title> <style type="text/css">/*<![CDATA[*/ html,body,fieldset,legend { margin: 0; padding: 0; } body { background: #DDD; } legend { display: none; } fieldset,img { border: 0; } #portaali { margin: 0 auto; max-width: 1000px; } #otsikko { background: #000 url('http://ydinjate.org/styles/banner.png') no-repeat 50% 0; border: 1px solid #000; height: 1px; margin: 20px 20px 0 20px; overflow: hidden; padding: 129px 0 0 0; } #valikko { float: left; } #valikko2 { float: right; } div.palkki { margin: 0 20px; position: relative; width: 182px; z-index: 1; } div.palkki div { background: #FFF; border: 1px solid #000; margin: 20px 0; } #sisalto { background: #FFF; border: 1px solid #000; margin: 20px 222px; min-height: 470px; min-width: 300px; padding: 5px 5px 35px 5px; position: relative; } #sisalto h2 { margin: -5px -5px 0 -5px; } #footer { bottom: 0; left: 0; line-height: 30px; margin: 0; padding: 0; position: absolute; text-align: center; width: 100%; } h2 { background: #000; color: #FFF; font-size: 10pt; margin: 0; padding: 5px; text-align: center; } #uusin_kuva p { margin: 0; padding: 10px 0; text-align: center; } /*]]>*/</style> </head> <body> <div id="portaali"> <h1 id="otsikko">Ydinjate.org</h1> <div id="valikko" class="palkki"> <div id="navigaatio"> <h2>Navigaatio</h2> <ul> <li><a href="">Etusivu</a></li> <li><a href="">Rekisteröidy</a></li> <li><a href="">Foorumit</a></li> <li><a href="">Kuvat</a></li> <li><a href="">Tietoa & säännöt</a></li> </ul> </div> <div id="uusin_kuva"> <h2>Uusin kuva</h2> <p><a href=""><img alt="" src="http://ydinjate.org/kuvat/latest.php?l=1&rnd=56010" /></a></p> <p><a href="">Systeemi kusee ehkä näinkin pahasti</a></p> </div> <div id="ulkoasu"> <h2>Ulkoasu</h2> <p>Tästä voit vaihtaa sivuston ulkoasua erilaiseksi:</p> <p class="select"> <select><option>Musta</option></select> <label><input class="checkbox" type="checkbox" /> Myös foorumityyli</label> <input class="submit" type="submit" value="OK" /> </p> </div> </div> <div id="valikko2" class="palkki"> <div id="tervetuloa"> <h2>Tervetuloa</h2> <form> <fieldset><legend></legend> <p class="text"> <label for="tunnus">Tunnus:</label> <input id="tunnus" type="text" /> </p> <p class="text"> <label for="salasana">Salasana:</label> <input id="salasana" type="password" /> </p> <p class="checkbox"> <label><input class="checkbox" type="checkbox" /> Pysy sisällä</label> </p> </fieldset> </form> </div> <div id="haku"> <h2>Haku</h2> <p>...</p> </div> <div id="uusimmat_viestit"> <h2>Uusimmat viestit</h2> <ul> <li>...</li> </ul> </div> </div> <div id="sisalto"> <h2>Ydinjate.org</h2> <p>Tervetuloa Ydinjate.org:iin.</p> <p>Ydinjate.org on uusi suomalainen sivusto jonne käyttäjät voivat lisäillä erilaisia kuvia, videoita sekä pelejä. Tällä hetkellä sivusto on kuitenkin ns. betatestauksessa. Tässä vaiheessa emme ota uusia jäseniä, jotta pystyisimme omien kesken paikantamaan virheet ja lisäämään ominaisuuksia.Jos kuitenkin olet entisen sivuston, roctumclan.com:in, käyttäjä, rekisteröidy foruumeille..</p> <p><b>Eli laitappas Ydinjate.org suosikkeihisi ja palaa takaisin parin viikon sisällä!</b></p> <p id="footer">Copyright © 2008 Ydinjate.org :: Contact us</p> </div> </div> </body> </html>
Oijjoi, todella mahtava vastaus Merri! Kiitoksia!
Huomenna tutkin tuon läpi sekä kokeilen jos saisin sivuille pelittämään.
Quirzo kirjoitti:
Metabolix mikäs resoluutio sulla on?
Toi on suunniteltu 1024x768 + resoille, mikä on aika yleinen minimireso.
Tulikin jo esille, mutta 1024px taitaa olla kyllä jo sellainen resoluutio, ettei tuota tarkemmalla resolla enää pidetä selainta täydessä näytön koossa.
900px taitaa olla vielä sellainen hyvä maksimileveys kiinteälle leveydelle. Parhaiten silti tietää se, joka tutkii sivujensa kävijöitä. Eli Google Analyticsit vaan sivustolle ;)
Aihe on jo aika vanha, joten et voi enää vastata siihen.