trying to make background span with text and a little more [Archive]

Click to See Complete Forum and Search --> : trying to make background span with text and a little more

Baby Jai

01-31-2010, 05:03 PM

ok here is my issue, im coding this and having a bit of a difficulty

<table class="tablecat" cellpadding="0" cellspacing="0">
<tr>
<td class="catleft"> </td>
<td class="catbody" nowrap="nowrap">This I want Spanned till the end of text!</td>
<td class="catright"> </td>
<td class="catrightbg">This should span 100% to meet the end of the text!</td>
<td class="catrightend"> </td>
</tr>
</table>

ok now i hope that isnt confusing, here is the css

.tablecat {
padding: 0px;
margin: 0px;
}

.catleft {
width: 18px;
height: 27px;
background: url({style_images_url}/Cat-Left.png) no-repeat;
}

.catbody {
height: 27px;
background: url({style_images_url}/Cat-BG.png) repeat-x;
}

.catright {
width: 17px;
height: 27px;
background: url({style_images_url}/Cat-Right.png) no-repeat;
}

.catrightbg {
height: 27px;
background: url({style_images_url}/Cat-RightBG.png) repeat-x;
}

.catrightend {
width: 113px;
height: 27px;
background: url({style_images_url}/Cat-RightEnd.png) no-repeat;
}

ok as you can see if i touch catrightbg and make it 100% it messes everything up, what am i doing wrong here?

claytonseo

02-01-2010, 03:46 AM

just use divs pls with float:left

<div class="wrapper">

catleft
catbody
catright
catrightbg
catrightend

/*these must be divs with a width and floated left.*/

</div>

i think this is correct.

Baby Jai

02-01-2010, 03:50 AM

just use divs pls with float:left

<div class="wrapper">

catleft
catbody
catright
catrightbg
catrightend

/*these must be divs with a width and floated left.*/

</div>

i think this is correct.
what is the code for the wrapper set, and what do i do with the table? Delete it? You sure this will work/ Isnt there an easier way with the table or no?

claytonseo

02-01-2010, 03:54 AM

Baby Jai

02-01-2010, 11:31 AM

just comment your table out, when you try this method.

the wrapper is the container for all the divs. you can CSS the wrapper for where you want to place the CAT thing.

e.g:

.wrapper {width:500px; margin:0 auto} /*for if you want the cat to be in the middle of the page*/

i am sure this will work, just play around with my method, tables in my sense are ONLY for tabular data.
see im really confused, so your saying when i go to edit this, how do i actually put content in it, i understand comment out the table but where am i putting any kind of actual text? Like where would i put hello bob in the mist of all tyhat for the html

Baby Jai

02-01-2010, 02:11 PM

no dice

<div class="wrapper">
<div class="catleft"> </div>
<div class="catbody"><div class="maintitle">{$this->lang->words['recent_gallery_images']}</div></div>
<div class="catright"> </div>
<div class="catrightbg"> </div>
<div class="catrightend"> </div>
</div>

<div class="catborders">
<div id='gallery_wrap'>
<ul>
<foreach loop="gallery_images_hook:$rows as $r">
<li>{$r['_image']}</li>
</foreach>
</ul>
</div>
</div>
<div class="wrapper">
<div class="catbottomleft"> </div>
<div class="catbottombg"> </div>
<div class="catbottomright"> </div>

</div>

and the code

.catleft {
width: 18px;
height: 27px;
background: url({style_images_url}/Cat-Left.png) no-repeat;
}

.catbody {
height: 27px;
background: url({style_images_url}/Cat-BG.png) repeat-x;
}

.catright {
width: 17px;
height: 27px;
background: url({style_images_url}/Cat-Right.png) no-repeat;
}

.catrightbg {
height: 27px;
background: url({style_images_url}/Cat-RightBG.png) repeat-x;
}

.catrightend {
width: 113px;
height: 27px;
background: url({style_images_url}/Cat-RightEnd.png) no-repeat;
}

.catborders {
border: 1px solid #b0b0b0;
border-bottom: 0px;
border-top: 0px;
}

.powerboxbg {
border: 1px solid #b0b0b0;
border-bottom: 0px;
border-top: 0px;
background: #f5f5f5 url({style_images_url}/powerleft.png) no-repeat left;
height: 34px;
padding: 0px;
margin: 0px;
}

.catbottomleft {
width: 21px;
height: 27px;
float: left;
background: url({style_images_url}/Cat-BottomLeft.png) no-repeat;
}

.catbottombg {
height: 27px;
width: 100%;
background: url({style_images_url}/Cat-BottomBg.png) repeat-x;
}

.catbottomright {
width: 21px;
height: 27px;
float: right;
background: url({style_images_url}/Cat-BottomRight.png) no-repeat;
}

.special {
font-size: 10px;
float: right;
font-weight: bold;
}

.powerboxtitle {
float: left;
color: #878787;
font-weight: bold;
}

.wrapper {
width: 100%;
float: left;
}

doesnt work good, the bottom left looks funny and the catleft and the original code i gave you all overlaps, looks bad

Baby Jai

02-01-2010, 02:15 PM

i think the problem is this

.catrightbg {
height: 27px;
width: 100%;
float: left;
background: url({style_images_url}/Cat-RightBG.png) repeat-x;
} cause it needs to span the rest of the board, what is going on, i edited the code above and made it all float left and it looks nice, HOWEVER, the catright bg is not working too well, when it goes to 100% it gets messed up

Baby Jai

02-01-2010, 02:30 PM

ok here we go, i got this code to WORK, HOWEVER i cannot span the catrightbg the remainder of the width, if i set it to 100% it gets funky, right now its just a background, is there a special code? Float: inherit?

.catleft {
width: 18px;
height: 27px;
float: left;
background: url({style_images_url}/Cat-Left.png) no-repeat;
}

.catbody {
height: 27px;
float: left;
background: url({style_images_url}/Cat-BG.png) repeat-x;
}

.catright {
width: 17px;
height: 27px;
float: left;
background: url({style_images_url}/Cat-Right.png) no-repeat;
}

.catrightbg {
height: 27px;
background: url({style_images_url}/Cat-RightBG.png) repeat-x;
}

.catrightend {
width: 113px;
height: 27px;
float: right;
background: url({style_images_url}/Cat-RightEnd.png) no-repeat;
}

.catborders {
border: 1px solid #b0b0b0;
border-bottom: 0px;
border-top: 0px;
}

.powerboxbg {
border: 1px solid #b0b0b0;
border-bottom: 0px;
border-top: 0px;
background: #f5f5f5 url({style_images_url}/powerleft.png) no-repeat left;
height: 34px;
padding: 0px;
margin: 0px;
}

.catbottomleft {
width: 21px;
height: 27px;
float: left;
background: url({style_images_url}/Cat-BottomLeft.png) no-repeat;
}

.catbottombg {
height: 27px;
width: 100%;
background: url({style_images_url}/Cat-BottomBg.png) repeat-x;
}

.catbottomright {
width: 21px;
height: 27px;
float: right;
background: url({style_images_url}/Cat-BottomRight.png) no-repeat;
}

.special {
font-size: 10px;
float: right;
font-weight: bold;
}

.powerboxtitle {
float: left;
color: #878787;
font-weight: bold;
}

.wrapper {
width: 100%;
float: left;
}

Baby Jai

02-01-2010, 03:20 PM

ok i got this to span in chrome and in ff, HOWEVER in IE this doesnt show

.catrightbg {
height: 27px;
display: block;
background: url({style_images_url}/Cat-RightBG.png) repeat-x 50%;
}

claytonseo

02-02-2010, 02:19 AM

hi, can you send me a url pls

Baby Jai

02-02-2010, 02:37 AM

cant its on a test server, its a whole forum, this is just one of the divs, everything works good except in ie its not displaying the background of the catrightbg

Baby Jai

02-11-2010, 12:03 PM

http://i368.photobucket.com/albums/oo129/jaidogg/2-11-20101-09-17PM.png
http://i368.photobucket.com/albums/oo129/jaidogg/2-11-20101-10-13PM.png

as you can see in ie8 it wont span the background the remainder

<table class="tablecat" cellpadding="0" cellspacing="0">
<tr>
<td class="catleft"> </td>
<td class="catbody" nowrap="nowrap">This I want Spanned till the end of text!</td>
<td class="catright"> </td>
<td class="catrightbg">This should span 100% to meet the end of the text!</td>
<td class="catrightend"> </td>
</tr>
</table>

Baby Jai

02-11-2010, 10:41 PM

ok here we go

http://babyjai.com/test/

that is the test html, NOW you see how the text ends and that background still keeps going, i dont want it to do that, for some reason i cannot duplicate the error because im having serious problems with my css here, but you can see WHAT its supposed to be doing in the screenshots i have provided.

I want the part catrightbg to span whatever the remainder is, if i set it to 100% it gets bad, what am i supposed to do here