/    Sign up×
Community /Pin to ProfileBookmark

How to create box with data in it from design

Copy linkTweet thisAlerts:
Oct 27.2009

Hi,

I have a box jpg with shaded sides and shadows. Data needs to go inside the box. I want to create it using html and CSS. Only the edges need to be used I think as the centre is blank – this is where text will go. Whats a good way to achieve this.

I know for example the top line could be produced by cutting the top edge into a slice and repeating it. And the corners could be cut. Does anyone have a simple example of how this is done in css and html,

thanks,

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@opifexOct 27.2009 — Have to admit I'm a little confused.... but you might be able to use the "box.jpg" as the background of your div and position the "data" with margin/padding so that it is inside the "edges"?
[code=html]
div.box {
width: 200px;
height: 200px;
padding: 10px;
margin: 10px;
background-image: url("box.jpg");
background-repeat: no-repeat;
}
p.box {
padding: 10px;
margin: 10px;

}
[/code]
[code=html]
<div class="box">
<p> this is data</p>
</div>
[/code]

with the lengths adjusted to fit the dimensions of box.jpg
Copy linkTweet thisAlerts:
@damon2003authorOct 27.2009 — Thanks,

but what I mean when I say cut the borders up into slices is so that the box can expand based on how much data is added as HTML inside it.
Copy linkTweet thisAlerts:
@tracknutOct 27.2009 — If you can live with a box that only expands in the vertical direction (i.e. a fixed width) then this is quite easily done, by having a "top" div, a "middle" div (with background repeating in the y direction), and a "bottom" div.

If you want it to expand in all directions, then it's the same concept but you have 9 divs and 9 background images to deal with...

Dave
Copy linkTweet thisAlerts:
@opifexOct 28.2009 — can you upload "box.jpg" so people can have an idea what you need?
×

Success!

Help @damon2003 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...