Keskustelu: Nettisivujen teko: CSS: sijoittelu

Ongelmani on absoluuttisen sijoittelun kanssa. Minulla on divi, jolle on määritetty sijainniksi relative (esimerkissä keltainen taustaväri) ja sen sisällä divi, jolla on sijaintina absolute (esimerkissä punainen taustaväri).

Näiden divien alla on tekstiä, jolle ei ole määritetty sijaintia. Nythän teksti tulostetaan keltataustaisen divin alle, mutta koska punataustainen venyy tekstin mukana, pelkkä teksti jää punataustaisen divin alle. Onko siis mitenkään mahdollista saada teksti noudattelemaan punataustaisen (absoluuttisen) divin alareunaa, vaikka sen korkeutta ei tiedetä?

Esimerkkikoodi:

<div style="position: relative; width: 30px; background-color: yellow">
  juttuja, relatiivisia juttuja.
  <div style="position: absolute; top: 10px; left: 5px; background-color: red">
    absoluuttisia juttuja, joita on hyvin paljon.
  </div>
</div>
pelkkää tekstiä

Juttu absoluuttisesti sijoiteltujen elementtien kanssa on se, että ne eivät koskaan vaikuta ulkopuolisiin elementteihin, ne ovat kokonaan irti normaalista sivun "flow":sta. Keino #1 onkin siis käyttää kellutusta (float), jolloin vaikka elementti poistetaan normaalista sivun etenemisestä, niin se silti edelleen vaikuttaa tekstielementteihin (inline).

<div style="position: relative; width: 30px; background: yellow;">
    <div style="float: left; margin: 10px 5px; background: red;">
        <p>Paljon absoluuttisia juttuja.</p>
    </div>
    <p>Suhteellisia juttuja!</p>
</div>

Huomaat varmaan, että p-tagit hieman tekevät lopputuloksesta erilaisen kuin on haluttu, mutta teksti on kuitenkin parempi laittaa edes johonkin tekstiä kuvaavaan tagiin eikä suoraan divin alle. Lisäksi tekstin kappalejaot tulevat näin automaattisesti ja tyylittelyvaraa on valtavasti enemmän: poistamalla marginaalit ja lisäämällä sisennystä saat lopputuloksesta enemmän halutun kaltaisen.

Mikäli tarkoitus on, että keltaisen sisältö alkaa aina punaisen divin jälkeen, niin sitten olisi parempi vain antaa elementtien olla tuossa järjestyksessä eikä mitään erikoisempia temppuja tarvita.

Kiitos vastauksesta, Merri!

Pelkäsinkin, ettei tämä tule onnistumaan absolute-sijainnilla. Sivustoni käyttää css:llä toteutettua dropdown navia, joka on tehty tämän mukaan: Suckerfish dropdowns. Kun joku linkki on valittu dropdown-navista, tämä toisen tason navigaatio olisi tarkoitus jättää vaakatasoon sivun yläreunaan. Sijoittelussa käytän absolutea, koska relative ei pysty irrottamaan <li><ul> elementtejä <li> elementin luota työntämättä kaikkia muita <li> elementtejä edessään.

Toisen tason naville voisi tietysti määrittää oman tilan, mutta jos selainikkunaa kaventaa, linkit rivittyvät usealle riville ja näin hankalasti tekstin päälle.

Jos jollakulla on hyvä idea tämän ratkaisemiseen, kuuntelen mielelläni, mutta olen myös valmis muuttamaan suunnitelmiani navin suhteen.

En ehdi tämän viestin kirjoittamisen välissä ajattelemaan, mitä viestisi sisältö oikeastaan tarkoittaa, joten kurkkaa CSSplayn juttuja lävitse - Suckerfish on jo varsin "antiikkinen" ja muistaakseni jopa hieman monimutkaisempi kuin yleensä olisi tarpeen. Mm. IE6-tuen pudottaminen tekee CSS:stä huomattavasti siistimpää.

Kiitos paljon, Merri. Katselen linkittämääsi sivustoa!

Löysitkö tuolta ratkaisua tai vaihtoehtoa ongelmaasi? Voin koostaa minimaalisen esimerkin siitä, miten avautuvan alivalikon saa alkamaan koko valikon yläreunasta sen sijaan että se alkaisi valikkoelementin korkeudelta, mutta tällä erää teen sen vain jos sille on tarvetta :) Ainakin sikäli jos nyt tarkemmalla lukemisella ymmärsin oikein sen, millaista lopputulosta haet.