Keskustelu: Nettisivujen teko: CSS: Kaksi taustaa

Heippa

Onko mahdollista laittaa samalle sivulle kaksi taustaa CSS:n avulla? Sillä lailla, että on sivu jaettu kahteen osaan HR:n avulla, ja yläpuolella on kuva ja alapuolella valkoinen tausta.

-Rocceri

Laita sivun yläosa vaikka div-elementin sisään:

<div id="ylaosa">
<p>yläteksti</p>
</div>
<hr id="erotus" />
<p>alateksti</p>

#ylaosa {
  margin-bottom: 0;
  /* Lisää tähän yläosan taustat */
}
#erotus {
  margin-top: 0;
}

Ihan ok, kiitos :)

Eiks kannattaisi hr:n sijaan tehdä borderit?

<div id="ylaosa">
  yläosa
</div>
<div id="alaosa">
  alaosa
</div>

#ylaosa {
  border-bottom: 1px solid black;
}
#alaosa
{
  border-top: 1px solid silver;
}

Sanokaa kokeneemmat, kumpi on parempi tapa.

HR renderöidään eri selaimilla eri tavalla, ja CSS:n tulkitsemisessa on eroja. Pitää myös muistaa, että XHTML 1 Strict ei tue sitä. HTML 5:ssä sille on annettu rooli toimia kappaletason temaattisena erottajana, eli kun saman luvun alla tapahtuu aiheen vaihdos, mutta se kuuluu silti saman otsikon alle, niin silloin voi käyttää HR:ää.

HTML 5:ssä siis näin, mikäli olen oikein ymmärtänyt:

<section>
    <h1>Aihe</h1>
    <p>Jotain jotain jotain.</p>
    <hr>
    <p>Jotain muuta aiheesta.</p>
</section>