Demosivulla jokainen hr-elementti saa taustakuvan perinteisen vaakaviivan sijaan. Homma tietysti CSS:n avulla toimii, eli näin:
hr {
margin: arvo;
border: 0;
height: arvo;
width: 100%;
background: url(../hakemistopolku/kuvaan.png) no-repeat 50% 0;
}
Melko pitkälti samanlainen temppu on käytössä tuolla Kuopassa.com:in portfolio-osastolla. Sivujen alaosassa näkyvä koristekuva paljastuukin normaaliksi <hr /> -palikaksi, kun katsotaan korean pinnan alle ja sivun lähdekoodin.
Tagit: css, hr, taustakuva
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 7 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Korinaa. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2006/08/04/taustakuva-hr-elementille.
Mehukas kirjoitti 647 päivää sitten:
Taas yksi hyödyllinen vinkki sinulta. Kiitos! Uskon, että tämä tulee tarpeeseen.
Vaihda tuon esimerkin taustaväriä muuten. Ei meinaa erottaa niitä kuvia,”viivoja” tai miksi niitä kutsummekaan.
Mitenkä muuten onnistuu tp:llä tollainen kommentonti juttu? Tarkoitan tuota kun väri vaihtuvat joka toisessa. Itse asentelin tp:n yhdille kotisivuistani muutama päivä sitten. Vielä on totuttelemista jonkun verran ja säätöä.
Miika kirjoitti 647 päivää sitten:
Mitä me tekisimmekään ilman css:ää.
Petri kirjoitti 647 päivää sitten:
Nämä kommenttien vaihtuvat taustavärit on toteutettu sillä tavalla, että pluginin avulla liitetään jokaiseen kommenttiin class-ryhmäselektori, johon voidaan sitten tarttua CSS-määrittelyin. Jos, parahin nimimerkki Mehukas, haluat samanlaista systeemiä omaan Textpatternilla toimivaan sivustoosi/blogiisi, asenna silloin ensin tuo plugin “ajw_comment_alt” ja aktivoi se. Lue liitännäisen ohjeet ja noudata niitä. :-)
Miika: Aivan, valitettavasti tiedämme kyllä mitä me tekisimme jos CSS:ää ei olisi. Kaivahan takaraivostasi pari muistikuvaa taulukkotaitosta ja spacer-kuvista…
Miika kirjoitti 647 päivää sitten:
Takaraivoni pyrkii unohtamaan..
Sain muuten tästä merkinnästä inspiraation väsätä hooärriä omaan blogiin, jei.
Gocom kirjoitti 645 päivää sitten:
Ihan kivahan tämä mutta eikös tämäkin ole aika itsestään selvyys. Tosin tämä ei taida toimia antiikkiselaimilla, mutta eikös se ole aika selvää että kaikkeen saa tausta. Noh, niille jotka sitä eivät tienneet niin tämä auttoi ;). Itse tätä en tule käyttämään, mielummin laitan kappaleeseen nuo taustakuvat ja vähän paddingia. Tosin samalla kannattaa muistaa ettei liikaa kuvia sivustoon työnnä. Tosin css ja div taitolla tehdyt sivustot ovat aina kevyempiä kuin vanhanaikaiset tabletukset.
Gocom kirjoitti 642 päivää sitten:
Sori, jos olin vähän tylyn kuuloinen, oli vaan vähän huono päivä, hyvä vinkkihän toi on, eritoten kun se näkyy ilman tyylitiedostoakin, siis tilallahan näkyy silloin viiva semmoisenhan hr aiheuttaa.
Monethan ovat huomanneet ettei tuo toimi vanhoilla selaimilla. Jos sitten viivan haluat pois kun kuvaa ei näy niin laita siihen vanhojen selainten korjaustiedostoon display: none , toinen joka toimii vain jossain selaimissa on border: 0; tai none sillä silloinkin joissain selaimissa viiva katoaa.
Petri kirjoitti 642 päivää sitten:
Eihän sitä anteeksi kannata pyytää jos on mielipiteitä tai tuntemuksia jostakin asiasta. Tuo opas, jos sitä nyt sillä arvonimellä edes kehtaa kutsua, on tosiaan hyvin simppeli tapaus. Tätä blogiahan saattaa lukea sellaisiakin henkilöitä, jotka ovat vasta tutustumassa näihin nykyajan tyylitiedostoihin ja nettisivujen tekemiseen liittyviin perusasioihin — ehkä heille tuosta on jotain apua.