Results 1 to 10 of 10
  1. #1
    Join Date
    Feb 2009
    Location
    Denver, CO
    Posts
    15
    Plugin Contributions
    0

    Default Images on CSS Borders

    Hey all,

    Another question I have here. You can take a look at my website here. http://www.moremana.com/Zencart.

    I'm trying to get the attached images to hug the borders of the outside white area. I also need the "botright.jpg" to hug the bottom right corner of the white area. I cant for the love of me find how to tweak the .css files to do this.

    Any help would be much appreciated. Thank you.

    Brad
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	botright.gif 
Views:	100 
Size:	3.1 KB 
ID:	5369   Click image for larger version. 

Name:	leftborder.gif 
Views:	95 
Size:	1.5 KB 
ID:	5370  

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: Images on CSS Borders

    As you are using a fixed width template you can Google "css sliding door technique" and apply it vertically. You can also look at one of the free templates that uses this horizontally as I recall "FutureZen" for a bit of guidance
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Feb 2009
    Location
    Denver, CO
    Posts
    15
    Plugin Contributions
    0

    Default Re: Images on CSS Borders

    Thanks for the response.

    It is a fixed width through CSS. I understand the theory how I can position the images given a fixed position. However that does not help when the height of the table is dynamic.

    Does anyone have some example code how I can dynamically position the bottom right image on the bottom right part of the white area. Also I'm still not sure how to implement the code on the vertical positions. Any help would be greatly appreciated.

    Thanks in advance,
    Brad

  4. #4
    Join Date
    Feb 2009
    Location
    Denver, CO
    Posts
    15
    Plugin Contributions
    0

    Default Re: Images on CSS Borders

    Just doing some more research on it. It looks like if I can modify code (which I dont know which code to modify) to create a new container at the bottom of every page created with that image fixed at a certain position it would solve my problem.

    Any ideas how to do that?

  5. #5
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: Images on CSS Borders

    Assuming that you desire this around your complete site and referencing what I posted earlier you can use tags that currently exist that have no image attached.

    For the bottom add a background image that is smaller to #siteinfoLegal or #navSuppWrapper if you have not altered things and your main image to #mainWrapper and it will be the top & sides and much higher than any page you will ever display and the extra will "slide" behind the bottom or "sliding door"

    Let me know where in Den you are by PM
    Zen-Venom Get Bitten

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Images on CSS Borders

    Code:
    #mainWrapper {background: #ffffff url(../images/botright.gif) right bottom no-repeat;}
    
    #contentMainWrapper {background: transparent url(../images/leftborder.gif) left top no-repeat; padding-left: 12px;}
    Last edited by gjh42; 23 Feb 2009 at 09:07 AM.

  7. #7
    Join Date
    Feb 2009
    Location
    Denver, CO
    Posts
    15
    Plugin Contributions
    0

    Default Re: Images on CSS Borders

    Thanks for the help guys. A couple of things that I may have confused you with and not made clear.

    I want the image to kind of overlap the two borders so it covers the border lines. To do this I need to insert the image at a specific position. What's the code for that?

    Also I think I can set the botrightborder image on the bottom of the page and then do a -px, -px command which would make it static no matter how large the content is. Any idea what the code is for that?

    Thanks in advance,
    Brad

  8. #8
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Images on CSS Borders

    The "right bottom" in the code I posted will keep that image at the bottom right of #mainWrapper, no matter how big it is.

    You can specify locations precisely in several ways, but the background image will never show outside of the edge of its container. If you need that, you will have to use the image as a foreground image with absolute positioning (which can be relative to the bottom right edge of the container, with negative margins.)

  9. #9
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: Images on CSS Borders

    I would recommend attaching them to the inside of the container as a background image and then adjust the location of the container contents through margin or padding
    Zen-Venom Get Bitten

  10. #10
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Images on CSS Borders

    The OP's desire is to have the image straddle the visual edge of the container; padding may be needed for other things, but won't accomplish that.
    The best way I can think of to have a bg image extend over a visual edge is to have that edge belong to an outer container, and use negative margins on the inner container to pull its bg image to the desired position. Note that this may not work if one of the containers is a table cell - I have found that they don't obey some styling properties that divs obey.

 

 

Similar Threads

  1. CSS borders
    By blue-grape in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 25 Apr 2010, 12:48 PM
  2. mainpage without css borders - padding?
    By fulltilt in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 23 Sep 2008, 03:57 PM
  3. CSS cell margins/borders - need help
    By ajhb in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 28 Aug 2008, 11:09 AM
  4. Use CSS to add borders
    By rookiedeveloper in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 26 Feb 2008, 03:17 AM
  5. css borders not expanding in IE
    By marie893 in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 13 Jul 2006, 04:21 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg