Keskustelu: Nettisivujen teko: RSS-syötteen muotoilu CSS:n avulla

Olen tekemässä html-sivuja, joihin tulee automaattisesti päivittyvä uutispalsta rss-syötteenä Taloyhtio.netin sivuilta. Taiton olen tehnyt sivuille erillisellä css-tyylitiedostolla.

Uutispalstan olen tuonut sivustolle oheisella scriptillä:

<script language="JavaScript" type="text/javascript" src="http://www.taloyhtio.net/rss.aspx?js=1&amp;clogo=0&amp;
chdr=1&amp;idate=3&amp;layout=2&amp;items=5"></script>

Miten saisin muotoiltua uutispalstan oheisen mallin näköiseksi, http://www.kiinteistoliitto.fi/kaakkois-suomi/? Haluan mukaan myös päivämäärät, jotka tulevatkin näkyviin oheisella scriptillä.

Linkit olen saanut muotoiltua css:llä, mutta haluaisin niiden eteen nuolen kuvana tai tekstinä kaksi nuolta >>, miten se tehdään?

Miten saan muotoiltua otsikon, Taloyhtio.net uutiset, erilaiseksi kuin muut linkit?

Aloitteleva Bittinikkari

Ehdottomasti toteuttaisin tuon jollain palvelinpuolen ohjelmointikielellä. Eli siis vaikka PHP:llä hakisin tiedot (kannattaa käyttää siihen vaikka magpierss:ää, joka osaa suht. järkevän välimuistittamisenkin), ja sitten tulostaa RSS:n sisällön järkevänä HTML:nä. Sitten vasta muotoilla se generoitu HTML CSS:llä.

Edit:
Jahas, se JS kikkailu olikin sentään tuola Taloyhtio.netin puolella... Luin taas vaihteeksi kysymyksen liian hätäisesti. Yksinkertainen vastaus: kopioi valmis CSS tuolta Kaakkois-Suomen sivuilta. En tietenkään suosittele suoraan sitä käyttämään, lähinnä katso että miten se on toteutettu, ja ota siitä mallia ja oppia.

Kuvan saa tekstin eteen CSS:llä vaikkapa laittamalla paddingia vasempaan reunaan tarpeeksi, ja laittamalla siihen tyhjään tilaan sitten taustakuvan (joka ei siis toistu pysty- eikä vaakasuunnassa).

Yksi tapa on tehdä tuokin muotoilu CSS:llä. IE ei kylläkään ymmärtänyt :before-määrettä, kun tänään (noh, oikeasti eilen vuorokauden vaihtumisen ansiosta) testailin koululla sivujani. Kyseessä oli kylläkin versio 6. Varmaksi en mene IE7:sta sanomaan...

#jokinpalstannimi a:before {
    content: url('nuolikuva.gif');
}

/* TAI: */

#jokinpalstannimi a:before {
    content: "\003E\003E";
}

Tuo \003E on siis tuossa unicode-koodi >-merkille.

Kiitoksia vastauksista, mutta apuja tarvittaisiin vielä.

Mielelläni tutkailisin Kaakkois-Suomen CSS-tyylitiedostoa uutispalstan osalta, mutta heillä on tehty erillinen tyylitiedosto, joten en pääse sitä näkemään ja ottamaan vinkkejä. Tarkoitukseni onkin tehdä uutispalstalle hieman erilainen muotoilu ja Kaakkois-Suomen uutispalsta toimi lähinnä tässä mallina kysymykseeni.

Jos automaattisesti päivittyvälle uutispalstalle laitan sivuun taustakuvan ja uutinen/uutisia vaihtuukin yksiriviseksi, niin miten käy nuolten paikan?

Joten mielelläni ottaisin vielä vastauksia vastaan. Uutispalstan pitäisi toimia myös IE:llä.

1. Miten saan vaikkapa kaksi tekstinuolta tai nuolikuvan linkkien eteen?

2. Miten saan otsikon muotoiltua erilaiseksi kuin muut linkit?

Aloitteleva Bittinikkari

Bittinikkari kirjoitti:

Mielelläni tutkailisin Kaakkois-Suomen CSS-tyylitiedostoa uutispalstan osalta, mutta heillä on tehty erillinen tyylitiedosto, joten en pääse sitä näkemään ja ottamaan vinkkejä. Tarkoitukseni onkin tehdä uutispalstalle hieman erilainen muotoilu ja Kaakkois-Suomen uutispalsta toimi lähinnä tässä mallina kysymykseeni.

http://www.kiinteistoliitto.fi/styles/yhdistys.css

CSS:ää/HTML:ää on mahdoton piilottaa, sillä jos selaimesi sen näkee, on myös sinun mahdollista se nähdä. Tuon osoitteen siis noukin antamasi linkin lähdekoodista.

Vau! Mahdottomasti vaan kiitoksia.

Hyvää kesää.

Aloitteleva Bittinikkari