2

i've encountered a seemingly simple but frustrating problem. I was asked to edit a template to fit the new needs. The old template had a gradient as background and the new template wants this gradient to expand a bit. Current and desired result are listed below.

Current: http://prntscr.com/38nhrd

Desired: http://prntscr.com/38nhwp

The downside (which is the annoying part) is that the template is build of tables. I cant paste a small part of the code so here are the tables containing the side-bar.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

edit: re-uploaded screenshots to further explain my problem.

edit2: removed code with a jsfiddle page. Keep in mind that this is all the code for the page so there is a lot of code not needed for my problem. Added some code for the site to allow the jsfiddle link.

4
  • 1
    Its not too clear the difference between the screenshots in terms of what you want?
    – SW4
    Commented Apr 10, 2014 at 9:18
  • Re-uploaded the screenshots, as explained in the question my problem is the gradient on the right. Commented Apr 10, 2014 at 9:22
  • 1
    fiddle: jsfiddle.net/FHs4c using the code above means it'll be all but impossible to help as the problem cant be replicated with the code provided - can you post a link to the actual site?
    – SW4
    Commented Apr 10, 2014 at 9:29
  • i agree, uploaded a jsfiddle with all the code. Commented Apr 10, 2014 at 9:35

2 Answers 2

3

Demo Fiddle

Add the class (you may need to adjust the 350px part):

#templateBody > tbody > tr > td{ 
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0.65, #FFFFFF), color-stop(0.77, #EFEFEF));
    background-image: -o-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
    background-image: -moz-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
    background-image: -webkit-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
    background-image: -ms-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
    background-image: linear-gradient(to left top, #FFFFFF 65%, #EFEFEF 77%);
    background-repeat:repeat-y;
    background-position:350px 0;
}

And remove:

background-image: -o-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
background-image: -moz-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
background-image: -webkit-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
background-image: -ms-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
background-image: linear-gradient(to left top, #FFFFFF 65%, #EFEFEF 77%);

From the class .sidebarContent

4
  • This solved my initial problem, thanks. This however also created a background behind the large initial image. Any idea why that happened? Commented Apr 10, 2014 at 10:03
  • In this part background-position:350px 0; change the 0 to e.g 390px
    – SW4
    Commented Apr 10, 2014 at 10:15
  • No, the problem seems to be that your call to the td in #templatebody has two targets. The first one is the td containing the image and the second one is the sidebar. Commented Apr 10, 2014 at 10:24
  • I dont believe so. Your image has a grey border which is perhaps leading you to think this?
    – SW4
    Commented Apr 10, 2014 at 10:27
1

Since we are cheating using tables anyway, what about using relative positioning to give the illusion of removing the space? We can then add the extra space to the bottom using a padding.

position: relative;
top: -100px;
padding-bottom: -100px;

Change -100 to whatever value is necessary.

2
  • or judging by the pictures only a padding-right: 50px;
    – MShah
    Commented Apr 10, 2014 at 9:24
  • simply adding a padding doesn't remove the space in between the large top-image and the sidebar. Since its a table its hard to show you where the space is exactly. This is what your solution did: prntscr.com/38njbw. It might explain what space im trying to overrule. Commented Apr 10, 2014 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.