Hvordan løse dette med CSS? (Tekst og background-image)

[janfredrik]

Hei!

 

Lurer på hvordan dette best mulig kan løses i CSS, sett at jeg lager en div og kaller den for innhold, og background-image er vedlegget uten tekst, putter jeg teksten inn i HTML-dokumentet vil det jo da se bra ut, men hvis teksten varierer (er kortere eller lengre) forminsker eller forstørrer jo ikke bakgrunnen seg.

 

Spørsmålet er derfor, hvordan løse dette med CSS?

[FrodeNilsen]

Hei!

 

Lurer på hvordan dette best mulig kan løses i CSS, sett at jeg lager en div og kaller den for innhold, og background-image er vedlegget uten tekst, putter jeg teksten inn i HTML-dokumentet vil det jo da se bra ut, men hvis teksten varierer (er kortere eller lengre) forminsker eller forstørrer jo ikke bakgrunnen seg.

 

Spørsmålet er derfor, hvordan løse dette med CSS?

 

Dette kan løses med CSS3, da skalerings av bakgrunnsbilder og flere bakgrunnsbilder støttes der. CSS3 støtter også avrundet kantlije. Når du spørr etter løsninger med CSS så forventer jeg at det å bruke javascript er uaktuelt.

 

Du kan løse dette under CSS2.1, men det er en ganske rotete løsning. Jo flere begrensninger du legger i designkravene jo ryddigere og enklere blir løsningen. Jeg går utifra at du ønsker støtte i FF, Opera, Safari, og IE. Da må du holde deg til CSS2.1.

 

Fast bredde

 

Hvis du forutsetter at det siden skal ha en fast bredde blir dette vesentlig enklere, da du slipper problematikken med å skalere med avrundede hjørner. Da holder det med ett bakgrunnsbilde på toppen som går fra øvre venstre hjørne til og med øvre høyre hjørne.

 

Du vil også trenge ett tilsvarende bilde for de nedre hjørnene.

 

Du vil også trenge ett bakgrundsbilde som enten er høyere enn det teksten noengang vil fylle, ett bakgrunnsbilde som kan repeteres nedover hvis teksten blir for lang, eller ett bakgrunndsbilde som går over til bakgrunndsfarge når teksten blir for lang.

 

Hvis bakgrunnsbildet skal lage en kantlinje, så blir det fort mye fikling for å få bakgrunnsfarge og kantlinje til å overta når bakgrunndsbildet blir for lavt.

 

Scroll

 

Det enkleste du kan gjøre er å opprette en div med fast bredde høyde, slik at du får en scroll-bar når teksten fyller for mye. Dette oppnår du med i CSS med verdien overflow:auto. Hvis jeg ikke husker helt feil så blir dette implementert litt ulikt for forskjellige nettlesere særlig IE, så det kan godt hende du må benytte conditionals mot IE.

 

Flere bakgrunndsbilder i CSS2.1

 

Du kan oppnå en effekt tilsvarende flere bakgrunndsbilder for ett element, ved å nøste det i flere andre elementer som ikke har marg, kantlinje, og padding. Du finner ett eksempel her:

 

https://www.diskusjon.no/index.php?showtopic=953899

 

For å oppnå avrundede hjørner i CSS2.1 så må du bruke bakgrundsbilder.

 

Hvis du skal ha varierende farge ala gradient på en kantlinje må du også bruke bilder til dette under CSS2.1

 

To scroll or not to scroll

 

That`s the question. Du trenger hele ni nøstende elementer for å oppnå variabel bredde og høyde på den boksen. En for hvert hjørne, en for hver kantlinje, og en for bakgrundsbildet. Bare du kan svare på om det er verdt det.

 

Frode

[janfredrik]

Javascript kan også brukes hvis det er nødvendig.

 

overflow:auto er en løsning, så takk for det tipset

[FrodeNilsen]

Javascript kan også brukes hvis det er nødvendig.

 

overflow:auto er en løsning, så takk for det tipset

 

Det er neppe enklere eller mer elegant å løse dette med javascript. Det blir ikke rare koden du må legge til i markup da du ikke trenger å tilordne klasser, samt at du trenger åtte ekstra linjer i CSS, dog med potensiell komplisert selector.

 

Jobben ligger mer i å lage fornuftige bakgrundsbilder og å gi det innerste div-elementet litt marg. Noe du må gjøre uansett.

 

Jeg er ikke tilhenger av å benytte javascript når du kan løse det samme med CSS. Særlig når det er så enkelt som dette.

 

Frode