Koitan saada kahta div-elementtiä vierekkäin, ja niin että teksti alkaisi aina ylhäältä.
<div valign="top" style="display: inline;"> Tämä on vasen palkki<br><br> Tämä on vasen palkki </div> <div valign="top" style="display: inline"> Miksei tämä näy ylhäällä valign="top"-arvosta huolimatta? </div>
Miksiköhän "Miksei tämä..." -kohta ei näy siis sivun yläreunassa, vaan alkaa toisesta "Tämä on..." -rivistä. Mitä tehdä?
Nyt mennäänkin CSS-taiton perusteiden puolelle. Elementit voidaan hyvin karkeasti jakaa kahdenlaisiin elementteihin: jatkuvasti rivinä vasemmalta oikealle, ylhäältä alas soljuvana inline-sisältönä, sekä laatikkoina, jotka oletuksena valtaavat kaiken tilan vaakasuunnassa, joten ne pinoutuvat päällekkäin.
Ainut tyyli, joka on DIV-elementillä on, on display: block;. Vastaavasti SPAN-elementin ainut tyyli on display: inline;. Tavallaan siis tyylimäärityksesi tekee DIV-elementistä SPAN-elementin. Lopputulos siis vastaa tätä:
Tämä on vasen palkki<br><br>
Tämä on vasen palkkiMikseitämä näy ylhäällä
... sillä mikään tyyli ei määrittele toimimaan toisin. Samoin valign-attribuutilla ei ole minkäänlaista merkitystä DIV-elementissä, ja taulukoissakin se on jäänne ajalta ennen CSS:ää.
Joten mitä pitäisi sitten tehdä? Yksi yksinkertaisimpia tapoja on kelluttaa toinen elementti vasemmalle ja antaa toisen elementin olla kuten se on.
<!DOCTYPE html>
<html>
<head>
<title>Kaksi palstaa</title>
<style type="text/css">
/* allaoleva temppu vanhemmissa IE:n versioissa (tavallaan bugi) */
div.palsta {
width: 100%;
}
/* pseudoelementti, jonka tehtävä on tehdä div.palstasta vähintään kellutetun elementin korkuinen */
div.palsta:after {
clear: both;
content: '';
display: block;
}
/* vasen palsta (kellutettu elementti) */
div.palsta div:first-child {
float: left;
width: 49%;
}
/* oikea palsta (normaalisti käyttäytyvä DIV-elementti) */
div.palsta div:first-child + div {
margin-left: 50%;
}
</style>
</head>
<body>
<div class="palsta">
<div>
<h1>Vasen palkki</h1>
<p>Tämä on vasen palkki.</p>
</div>
<div>
<h1>Oikea palkki</h1>
<p>Tämä on oikea palkki.</p>
</div>
</div>
</body>
</html>Muitakin tapoja on. Mitä tulee ylälaidasta alkamiseen, niin siitä ei vain tarvitse välittää, koska sisältö alkaa ylälaidasta. CSS:n vertical-align vaikuttaa inline-elementin sijoittumiseen pystysuunnassa sijaitsemallaan rivillä. Poikkeus tähän on nimenomaan taulukon solu, jossa se määrittää alkaako inline-sisältö keskeltä (oletus), ylhäältä vai alhaalta.
Keksinkin jo, miten teen sen pikkaisen yksinkertaisemmin.
<div style="float: left">
Tämä on vasen palkki<br><br>
Tämä on vasen palkki
</div>
<div style="padding-left: 5px">
Nyt se toimii, mutta padding-left: 5px ei toimi?
</div>Miksei jälkimmäisessä elementissä toimi padding-left -arvo?
laita margin-left.
Koitin jo sitä, ei toimi.
Tuossa tapauksessa voit floattia molemmat, tosin paljon riippuu siitä, mikä on haluttu lopputulos.
Tuo ei toimi, koska kellutettu elementti ei vaikuta toisen elementin sisennykseen:
----------------------------------------- | floatti | padding-left: 5px | | | | | | <- 5px ei vaikuta tässä | |---------- | | <- se 5px vaikuttaa tuolla laidassa | | | -----------------------------------------
Voit havainnollistaa tämän laittamalla taustavärin laatikoille ja tekemällä oikeanpuoleisesta laatikosta isomman.
Jos taas laitat kiinteän leveyden vasemmanpuoleiselle laatikolle ja vasenta marginaalia oikeanpuoleiselle, niin saat tämäntapaisen lopputuloksen:
----------- -----------------------------
| floatti | | 5px vaikuttaisi tässä |
| | | |
----------- | |
| |
-----------------------------Joo, kiitos Merri =) Nyt se näyttäisi toimivan hyvin.
<div style="float: left">
<p>Tämä on vasen palkki</p>
<p>Tämä on vasen palkki</p>
</div>
<div style="margin-left: 5px; float: left">
<p>Ensimmäinen kappale</p>
<p>Toinen kappale</p>
<p>Nämä kaikki näkyvät oikeassa kohdassa</p>
</div>*---------------------------------------------------------------* | Yläosan div | | | | | | | *-----------------*---------------------------------------------* | Valikko-div | Sisältö tulee tänne | | | | | | | | | | | | | | *-----------------* | Alaosan div | | | *-----------------*
Tältä pitäisi näyttää nyt. Ongelmana on se, että en saa tuota alaosan diviä paikoilleen tuonne. Miten se määritetään tähän?
<html> <head> <title>Sivun otsikko</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <div id="ylabot"></div> <div id="sis" style="float: left"> <p style="padding-left: 5px">Tämä on vasen palkki</p> <p style="padding-left: 5px">Tämä on vasen palkki</p> </div> <div style="margin-left: 10px; float: left"> <p style="margin-top: 0px">Ensimmäinen kappale</p> <p>Toinen kappale</p> <p>Nämä kaikki näkyvät oikeassa kohdassa</p> </div> </body> </html>
Auttaisiko tämä?
https://www.ohjelmointiputka.net/keskustelu/
Nähtävästi Merrin linkki ei toimi ko. sivulla.
Ei toimi, tuli pakkomuutto pois nopean netin ääreltä niin jouduin vetämään oman kotipalvelimen pois.
Siirretty nyt tänne: http://merri.net/xhtml/venyy_paukkuu/
Mitä tulee asetteluusi, niin helpointa lienisi asettaa div vasemman divin sisälle. Samoin olisi erittäin hyvä opetella erittelemään CSS HTML-koodin seasta, sekasopasta tulee pian vaikea ylläpidettävä.
Selvä, ei siinä mitään. Kyllä, siellä se meni oikeaan kohtaan. Ongelmana on nyt se, että kuva joka on taustakuvana ko. id:lle näkyy kahtena, vaikka height-arvo on annettu lohkolle oikein.
Kyllä, varsinaisilla sivuilla onkin niin. Kun en halunnut lähettää pitkää koodiani tänne, niin tein referaatin siitä, ja liitin CSS-määrittelyt style-attibuuttiin.
Aihe on jo aika vanha, joten et voi enää vastata siihen.