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.

CSS Forum


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



Reply
Add height to this box?
Old 07-07-2009, 10:21 PM Add height to this box?
Extreme Talker

Posts: 218
Trades: 0
How/where can I add height to this box? Also, I put three of these boxes horizontally next to each other, but they have no space between them. How do I add spaces between the boxes? Thanks.

CSS code:
Code:
/* set the image to use and establish the lower-right position */
    .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
      background: transparent url(img.php.png) no-repeat bottom right}
    .cssbox{
    /* intended total box width - padding-right(next) */
      width:335px !important; /* IE Win = width - padding */
      width: 320px; 
      float:left;
    /* the gap on the right edge of the image (not content padding) */
      padding-right:15px; /* use to position the box */
      margin:20px auto}
 
    /* set the top-right image */
    .cssbox_head{background-position:top right;
    /* pull the right image over on top of border */
      margin-right:-15px; 
    /* right-image-gap + right-inside padding */
      padding-right:40px}
 
    /* set the top-left image */
    .cssbox_head h2{
      background-position:top left;
      margin:0; /* reset main site styles*/ 
      border:0; /* ditto */
    /* padding-left = image gap + interior padding ... no padding-right */
      padding:25px 0 15px 40px; 
      height:auto !important;
      height:1%} /* IE Holly Hack */
 
    /* set the lower-left corner image */
    .cssbox_body{
      background-position:bottom left;
      margin-right:25px; /* interior-padding right */ 
      padding:15px 0 15px 40px} /* mirror .cssbox_head right/left */
Box code:

Code:
<div class="cssbox">
<div class="cssbox_head">
<h2>This is a header</h2>
</div>
<div class="cssbox_body">
<p>This is for your content.</p>
</div>
</div>
 
<div class="cssbox">
<div class="cssbox_head">
<h2>This is a header</h2>
</div>
<div class="cssbox_body">
<p>This is for your content.</p>
</div>
</div>
 
 
<div class="cssbox">
<div class="cssbox_head">
<h2>This is a header</h2>
</div>
<div class="cssbox_body">
<p>This is for your content.</p>
</div>
</div>

Last edited by chrisj; 07-08-2009 at 09:55 AM..
chrisj is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 07-08-2009, 10:03 AM Re: Add height to this box?
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Quote:
How do I add spaces between the boxes?
Margins or padding work.
Quote:
How/where can I add height to this box?
Looks to me like you'd put the height on cssbox_body.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

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


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

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 07-08-2009, 11:30 AM Re: Add height to this box?
konetch's Avatar
Ultra Talker

Posts: 258
Trades: 0
Change your css to something like

Code:
/* set the image to use and establish the lower-right position */
    .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
      background: transparent url(img.php.png) no-repeat bottom right}
    .cssbox{
    /* intended total box width - padding-right(next) */
      width:335px !important; /* IE Win = width - padding */
      width: 320px; 
      float:left;
/*////////////////////////////////////////*/
/*Start of height*/
      
    height:400px;

/*End of height*/
/*////////////////////////////////////////*/
    /* the gap on the right edge of the image (not content padding) */
      padding-right:15px; /* use to position the box */
      margin:20px auto}
 
    /* set the top-right image */
    .cssbox_head{background-position:top right;
    /* pull the right image over on top of border */
      margin-right:-15px; 
    /* right-image-gap + right-inside padding */
      padding-right:40px}
 
    /* set the top-left image */
    .cssbox_head h2{
      background-position:top left;
      margin:0; /* reset main site styles*/ 
      border:0; /* ditto */
    /* padding-left = image gap + interior padding ... no padding-right */
      padding:25px 0 15px 40px; 
      height:auto !important;
      height:1%} /* IE Holly Hack */
 
    /* set the lower-left corner image */
    .cssbox_body{
      background-position:bottom left;
      margin-right:25px; /* interior-padding right */ 
      padding:15px 0 15px 40px} /* mirror .cssbox_head right/left */
It will automatically re-set the height for you if you leave it the way you had it before. Your boxes are already spaced fined. I'm not sure what you're talking about with that.
__________________
Alex
konetch is offline
Reply With Quote
View Public Profile
 
Old 07-08-2009, 03:26 PM Re: Add height to this box?
Extreme Talker

Posts: 218
Trades: 0
Thanks for your replies. I did add a "height" line, similar to your suggestion, and when i did your suggestion, I got the same result. Please see attached image.

Also, you'll see that the boxes need to be spaced apart. Help with that, as well as, the height issue will be appreciated.
Thanks.
Attached Images
File Type: jpg boxes2.jpg (18.9 KB, 2 views)
chrisj is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Add height to this 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 1.19571 seconds with 13 queries