Olen duunaillut tälläista simppeliä sivua, joka olisi jaettu ylä- ja alaosaan divillä. Ongelma on se, että osien pitäisi olla keskitettyjä, ja kun yritin centerin avulla niin pystyin keskittämään vain yläosan, jos yritin keskittää myös alaosan niin se ei piirtynyt Operassa. Mozillalla tosin näytti toimivan.
Eli tämä ei toimi, alaosa ei piirry:
<center>
<div class="yla"><?php include("yla.htm"); ?></div>
<div class="ala"><?php include("ala.htm"); ?></div>
</center>
Tämä toimii, mutta alaosa ei luonnollisestikkaan ole keskellä:
<center>
<div class="yla"><?php include("yla.htm"); ?></div>
</center>
<div class="ala"><?php include("ala.htm"); ?></div>
Tietääkö joku parempaa keinoa keskittää div-elementtejä tai jotain muuta järkevää ratkaisua? Haluaisin homman toimivan kaikilla (moderneilla) selaimilla.
css:
.yla, .ala{
margin:0 auto;
width:800px;
}Millaista keskittämistä tarkoitat? Center-elementti merkitsee tekstin jokaisen rivin keskittämistä. Todennäköisesti sinulla on ala.htm:ssä jotain olennaisesti erilaista kuin yla.htm:ssä, ja siksi center vaikuttaa niihin eri tavalla. URL olis kiva...
Jos haluat keskittää kummankin divin kokonaisuutena, niin sitten niille pitää asettaa leveys (en kuitenkaan suosittele px-määräistä leveyttä, varsinkaan niin suurta kuin 800px), ja sen jälkeen margin: 0 auto (yksinkertainen tapa asettaa margin-left ja margin-right arvoon auto) tehoaa hyvin. Tosin se vaatii ns. standards-tilan, joten sivun alkuun tarvitaan esim.
<!DOCTYPE html>
Kiitos vastauksista, sain ongelma ratkaistua. Tarkoitus oli juuri keskittää kumpikin kokonaisuutena.
Yucca kirjoitti:
... niin sitten niille pitää asettaa leveys (en kuitenkaan suosittele px-määräistä leveyttä, varsinkaan niin suurta kuin 800px)
Miksi esim asetusta width:800px; ei kannata käyttää?
No onhan se nyt ärsyttävää jos saa vain 3 selainikkunaan vierekkäin :D
Ehkä yksi pointti on, että "800px" leveä on tulostettaessa 21,2 cm, eli ei mahdu paperille tulostettaessa kokonaan.
makumaku kirjoitti:
Miksi esim asetusta width:800px; ei kannata käyttää?
Koska et tiedä, kuinka leveä mun selainikkuna on. Se voi olla 200px, 2000px tai jotain siltä väliltä.
Ihan turha niitä sivuja on millekkään 200px-leveydelle tehdä. Mielestäni nykyään voi helposti laittaa 800px minimileveyden, sillä suurimmalla osalla on vähintään tuplaten isompi resoluutio. Vaikka selainta pitäisi vain puolella leveydellä auki niin ei ole ongelmia. 100% skaalautuvuus tuo vaan liikaa hommia, eikä oikeasti tyylikkäitä ulkoasuja aina voi edes skaalata kunnolla.
Sivustaan voi toki tehdä joustavan siinä määrin, että asettaa esimerkiksi minimi- ja maksimileveydet. CSS:ssä taitaa myös olla jo osassa mobiiliselaimia tukea tyylien valinnalle laitteen resoluution mukaisesti, joten toteuttaminen vaatii vain kehittämistä mobiiliselaimen kanssa. Quirksmode.org sisältää nykyään runsaasti asiaa mobiilipuolesta ja sen monimutkaisuudesta, tosin siellä huomioidaan myös kaikkein heikommatkin laitteet ja selaimet. Parasta on, että pelaa kohdeyleisön mukaan. Ja kannattaa muistaa, että kosketusnäytölliset mobiilivehkeet toimii aika ookoo ihan normaaleillakin pöytäkoneille suunnitelluilla sivustoilla.
Blaze kirjoitti:
makumaku kirjoitti:
Miksi esim asetusta width:800px; ei kannata käyttää?
Koska et tiedä, kuinka leveä mun selainikkuna on.
Mut tietäisin, että selaimen sisältö olisi ainakin 800px ;)
Ien keskittäminen toimii näin:
body {
text-align:center;
}
.yla, .ala{
margin:0 auto;
width:800px;
}alker kirjoitti:
Ien keskittäminen toimii näin: ...
text-align:center;...
Internet Explorer ymmärtää kyllä ihan margin-määritteenkin. Ymmärtänyt jo 6.0:sta asti ja sillehän ei ole vuosiin kehitetty yhtään mitään.
Se toki sillä oletuksella, että DOCTYPE löytyy. Jos sitä ei ole tai ennen sitä löytyy vaikka muuta koodia, niin sitten IE pomppaa quirksmodeen ja kellään ei ole enää kivaa.
Mutta joo. text-align: center; body-elementtiin on jo niin vanha juttu, että se kannattaa jättää pois käytöstä. Jos margin: 0 auto; ei jostain syystä toimi ja vika on vain IE:ssä, niin DOCTYPE tarvii vaan tarkistaa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.