css box

[Smidt]

jeg vil lage en boks i css som har et bilde i toppen, et bilde i bunnen, og et bakgrunnsbilde på hver side som utvider seg etter hvor mye tekst det er.

har foreløpig bare fått til med bilde i toppen. og vil ikke bruke tabeller til dette, har lyst å prøve meg med css..

foreløpig boks

bilder

css fil

noen som kan ta en titt og hjelpe meg litt på vei?

 

EDIT: btw vet boksen er veldig lik den på gamer.no, men dette er bare for testing..

Endret 5. februar 2004 av Smidt

[FuLu]

Er det slik at den boksen skal ha fixed bredde? Så fall så kan du bruke 1px høy bakgrunnsbilde hvor bredden er lik bredden på boksen. Denne har da border pixelen på hver side, så kjører du repeat-y eller noe, da får du border på begge sider. (passe på å bruke padding e.l. så ikke tekst kommer over border )

 

<style type="text/css">
<!--
.box
{
width: 180px;
background: url(toppen.gif) no-repeat top left;
}
.box p
{
background: url(bordersak.gif) repeat-y top left;
margin: 0;
padding: 0.4em 10px 0.8em 10px;
}
.box .box-bottom
{
font-size: 0;
height: 10px;
background: url(bunnen.gif) no-repeat bottom left;
}
-->
</style>

<div class="box">
<p>innhold</p>
<div class="box-bottom"></div>
</div>

 

PS: koden er utesta, men tror det blir noe i den duren, du må bytte ut de px verdiene, eventuelt den em'en på padding etter eget ønske

[Smidt]

okei, tok den. skal teste i morgen. liker forresten ikke det med padding... funker ikke alle steder. blir av og til tull i IE

men får prøve

[FuLu]

Jo, men legg merke til at jeg bruker padding på P'en, denne har ikke noe bredde, argo så blir det ikke noe problem

[Smidt]

jo, men om jeg f.eks. skal legge en et helt tilfeldig standard html element som <hr> inni p'en, da vil denne gå uten for paddingen og jeg må da lage bilder i stedenfor. skal teste litt til

[enden]

Tror du må tegne og forklare litt bedre jeg

[epsil]

Hvis du ønsker deg variabel bredde og høyde, kan du bruke CSS-løsningen Round Corners.

 

Litt mange div-elementer, helt klart, men fortsatt mye bedre (og mer tilgjengelig) enn tabeller.

[Smidt]

har gjort noen små forandringer på css filen, men p'en kommer oppå toppen av boksen, hva er grunnen til det?

box url

[FuLu]

Oops, glemte å ha padding på toppen av box'en, sleng denne med i CSS'en til .box: padding-top: høyden-til-bildet-i-px;

[cfenzo]

alistapart har jo en artikkel som går gjennom "custom corners", og vil tro det er no lignende av hva de gjør i den artikkelen du vil fram til..

 

Artikkel

[Smidt]

fikk det til å funke

http://predicted.net/box/box1.html

[epsil]

fikk det til å funke

http://predicted.net/box/box1.html

Innmari stilig.

 

Jeg ville imidlertid slengt inn et hx-element og gjort det usynlig ved å sette display-egenskapen til none, av hensyn til nettlesere uten CSS-støtte.