trying to make background span with text and a little more

@Baby_JaiJan 31.2010

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

[code=html]<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>[/code]

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

[CODE].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; } [/CODE]

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

to post a comment

CSS

12 Comments(s) _↴

@claytonseoFeb 01.2010 — #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_JaiauthorFeb 01.2010 — #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.[/QUOTE]
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?

@claytonseoFeb 01.2010 — #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.

@Baby_JaiauthorFeb 01.2010 — #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.[/QUOTE]
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_JaiauthorFeb 01.2010 — #no dice

[code=html]<div class="wrapper">
 <div class="catleft">&nbsp;</div>
 <div class="catbody"><div class="maintitle">{$this->lang->words['recent_gallery_images']}</div></div>
 <div class="catright">&nbsp;</div>
 <div class="catrightbg">&nbsp;</div>
 <div class="catrightend">&nbsp;</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">&nbsp;</div>
 <div class="catbottombg">&nbsp;</div>
 <div class="catbottomright">&nbsp;</div>
 
 </div>[/code]

and the code

[code=html].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;
 }[/code]

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

@Baby_JaiauthorFeb 01.2010 — #i think the problem is this

[code=html].catrightbg	{
 height: 27px;
 width: 100&#37;;
 float: left;
 background: url({style_images_url}/Cat-RightBG.png) repeat-x;
 }[/code]

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_JaiauthorFeb 01.2010 — #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?

[code=html].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;
 }[/code]

@Baby_JaiauthorFeb 01.2010 — #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%;

}

@claytonseoFeb 02.2010 — #hi, can you send me a url pls

@Baby_JaiauthorFeb 02.2010 — #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_JaiauthorFeb 11.2010 — #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>[/QUOTE]

@Baby_JaiauthorFeb 12.2010 — #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

Also in #CSS _↴

FireFox denies scrolling How to position text within a div Float + left or right margin + oveflow bug in Moz

Success!

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

Tweet This

trying to make background span with text and a little more

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

trying to make background span with text and a little more

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴