Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

HTML Forum


You are currently viewing our HTML Forum as a guest. Please register to participate.
Login



Post a Project »

Find a Professional HTML Freelancer!

Find a Freelancer to help you with your HTML projects

FREE Outsourcing eBook!

Reply
Need help with basic web box
Old 09-05-2009, 12:04 AM Need help with basic web box
Extreme Talker

Posts: 218
Trades: 0
I got this code (below) from a web html tutorial and added it into my index page and my css file. And all that shows on the web page is CONTENT GOES HERE.
I guess I need a corner image named box-bg? Can you provide me with a corner image? And how do I add a light-grey, thin border around the box?
Can you help me create a border for this code?

thanks

Code:
In index page:
<div class="box">
 <div class="topleft">
   <div class="topright">
     <div>
       CONTENT GOES HERE
     </div>
   </div>
 </div>
 <div class="bottomleft">
 <div class="bottomright">
 </div>
 </div>
</div> 
and in CSS:
.box div.topleft {
     display: block;
     background: url("../images/box-bg.png") top left no-repeat white;
     padding: 2.0em 0em 0em 2.0em;
}
.box div.topright {
     display: block;
     background: url("../images/box-bg.png") top right no-repeat white;
     padding: 2.0em;
     margin: -2.0em 0 0 2.0em;
}
.box div.bottomleft {
     display: block;
     height: 45px;
     margin-top: -2.0em;
     background: url("../images/box-bg.png") bottom left no-repeat white;
}
.box div.bottomright {
     display: block;
     background: url("../images/box-bg.png") bottom right no-repeat white;
     height: 45px;
     margin-left: 3.0em;
}
chrisj is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 09-05-2009, 12:29 AM Re: Need help with basic web box
Chris`'s Avatar
Average Talker

Posts: 26
Name: Chris
Location: California
Trades: 0
That box-bg.png file should be downloaded from where you followed the tutorial. Also, here's the code you can add the CSS to have a border:
Code:
border: 1px solid #555;
__________________

Please login or register to view this content. Registration is FREE
| Fast, Reliable, cPanel Hosting.

Providing Unreal Support, hosting happy customers.
Advanced Hosting Solutions, We Purge the Competition.
Chris` is offline
Reply With Quote
View Public Profile Visit Chris`'s homepage!
 
Old 09-10-2009, 07:59 PM Re: Need help with basic web box
Novice Talker

Posts: 14
Name: Tejaswini Deshpande
Trades: 0
ya...true you would get box-bg.png from the html tutorial site
In the code provided by you, they have used css sprites i.e. a ingle image is used to create a box with four corners.
Also, if you give border to the box, then you would lose the effect of the image used for styling the corners of the box as the border would create a total rectangular box surrounding your div. Still you can give a try

If you have forgotten the site, you could also use http://wigflip.com/cornershop/
Like in order to get a grey colored rounded corner box with white background they would provide you the css, html and images (dont forget the download the images and put on your server folder. You would probably need to change the css to update the location of the images
__________________
Internet Techies

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
tejaswini is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Need help with basic web box
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.22540 seconds with 12 queries