Elementin esitystapa: display
Elementin yleisen esitysmuodon määrää sen display-ominaisuus, joiden tärkeimmät muodot ovat block ja inline.
...
display-elementin käytöstä: http://raulihaverinen.fi/varasto/hy2007k/luento3_css.html
CSS-asemoinnin perusteet
CSS-asemointi on elementtien sijoittelua verkkosivulle tiettyjen sääntöjen mukaan. Yksinkertaisimmillaan lohkoelementit asetellaan allekkain ja sisäelementit samaan tapaan kuin sanat kappaleessa, eli peräkkäin.
...
* top
* right
* bottom
* left
Asemointia voi tehdä
Staattisesti (oletusarvo)
Absoluuttisesti: elementin sijainti asetetaan suhteessa johonkin koordinaatistoon (joko sivun vasempaan yläkulmaan tai suhteessa sisimpään asemoituun elementtiin, jonka sisällä ollaan)
...
| No Format |
|---|
#elementti {
position:relative;
}
|
Kelluva asemointi
Asemoinnin vaihtoehtoina on myös kelluva sisältö, joka tehdään float-elementillä. Kelluva elementti sijoittuu joustavasti sivun muun sisällön vasemmalle tai oikealle puolelle.
...
| No Format |
|---|
<div style="clear:both"></div> tai <p style="clear:both"></p> |
Linkkejä
Selkeä tutorial kelluvan css-asemoinnin tekoon
Esimerkkejä:
http://communication.utsa.edu/mbatch/3413/layoutexamples.html