CSS:llä elementtien sijoittaminen ja koonmäärittäminen

Mureakuha

Loikkaa: valikkoon, hakuun

Sisällysluettelo

[muokkaa]

Position-ominaisuus

ArvoSelitys
staticoletusasetus, eli ei erikseen asemoitu
relativesuhteellisesti asemoitu elementin oletuskohdasta
absolutevapaa asemointi
fixedkiinteä asemointi, eli ei liiku kuvaa vierittäessä
[muokkaa]

Esimerkki formin asemoimisesta

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">
  <head>
    <title>Tervetuloa c</title>
    <style>
      .lomake       {
        position:absolute; /*asennetaan lomake vapaasti kelluvaksi*/
        top:100px;  /*lomakkeen ylälaita tulee 100 kuvapistettä ylälaidasta /*
        left:200px;  /*vasen laita tulee 200 kuvapistettä */
        width:400px; /*leveys lomakkeella on 400 kuvapistettä */
        height:250px;  /*korkeus lomaakkeella on 250 kuvapistettä */
        border:dashed 2px #DDDD00; /*kiva kellertävä pätkäviiva kehys   */
 
      }
      .nappi {
        position:relative; /* Tätä nappia siirretään sen oletus asemasta */
        left:130px; /* vasen laita on 130 pistettä siirretty oikealle */
        width:60px; /* leveys normaalisti */
        
      }
      .nappi3 {
        position:absolute;  /* Tämä nappi on sijoitettu toisena, mutta se 
                               kuitenkin vasemmassa yläkulmassa lomaketta. */
 
        left:0px;
        top:0px;
      }      
 
    </style>
   </head>
   <body>
     <form method="POST" action="sivulle.php" class="lomake">
       <input type="button" name="b1" class="nappi" value="nappi"></input>
       <input type="button" name="b1" value="nappi2"></input>
       <input type="button" name="b2" class="nappi3" value="nappi3"></input>
     </form>
  </body>
</html>
[muokkaa]

Sijainti ja koko

ArvoSelitys
topylälaidan koordinaatti
leftvasemman laidan koordinatti
rightoikeanlaidan koordinaatti
bottomalalaidan koordinaatti
heightelementin korkeus
widthelementin leveys
[muokkaa]

Esimerkki elementin mitoittamisesta

<div style="
   top:100px;
   left:100px;
   right:100px;
   bottom:100px;">
Tämän div elementin reunat ovat 100 kuvapistettä irti reunoista
</div>
Haettu osoitteesta http://wiki.mureakuha.com/wiki/CSS:ll%C3%A4_elementtien_sijoittaminen_ja_koonm%C3%A4%C3%A4ritt%C3%A4minen
Henkilökohtaiset työkalut