SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    use background images to create fluid table border

    hello everyone

    i have 4 images (top, left, right, bottom). together they create a graphical border for my table

    you can see how the table looks here:

    http://londonheathrowcars.com/test.htm

    it is very straightforward, here is the working code:

    Code:
    <HTML>
     
    <BODY>
      
    <table cellpadding="0" cellspacing="0" width="515">
    <tr><td background="top.jpg" align="left" width="515" height="37" valign="top" colspan="3"></td></tr>
    
    <tr>
    <td background="left.jpg" align="left" width="16" height="11" valign="top" ></td>
    <td align="left" width="483" height="11" valign="top" ></td>
    <td background="right.jpg" align="left" width="16" height="11" valign="top" ></td>
    </tr>
    
    <tr><td background="bottom.jpg" align="left" width="515" height="13" valign="top" colspan="3"></td></tr>
    </table>
    
    </BODY>
    
    </HTML>
    rather than use a table i would like to create a fluid div (or css enhanced table) that changes height to match the content. this will involve repeating the left and right images in order to create the fluid column heights.

    can anyone assist me with this? thanks

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'd suggest my own technique for that, called "eight corners of the world under one roof" (aka ten thousand lives for the coordinator -- long story)

    Eight Corners Under One Roof

    Markup stays pretty simple, and it only requires ONE image to build it instead of four -- and can do fluid width and fluid height.

    Though if you want only fixed width that's much simpler.

    It's also valid/modern markup -- something you lack by using outdated/nonexistent attributes in your HTML like align, valign and background.

    In a few minutes I'll be back on my workstation -- I'll take your example and code up quickly how I'd approach handling that for you.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there, thanks for the reply.

    i just created that table to give an example of how the table looks and for my own re-assurance to make sure the individual images lined up (which thankfully they do).

    bit puzzled as to how you can use one image without distorting the image files. i would guess you set the size of the border and create a space inside the image to add content?

    i await your response. thanks.

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also if it is possible i am happy to create a top row, and bottom row chunk to be repeated so the width can be fluid.

    thanks

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Here's what I came up with:
    http://www.cutcodedown.com/for_other.../template.html

    The image:
    http://www.cutcodedown.com/for_other...es/borders.png

    You just make wider and redo the math if you want to increase the size. I tweaked the corners, borderline and shadow slightly, hope you don't mind

    as with all my examples the directory:
    Index of /for_others/antonyx

    Is unlocked for easy access to it's bits and pieces like the CSS.

    Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the expression I used to demo the fluid width in legacy IE. Tested working IE 5.5, 6, 7, 8 and 9, FF 3.5 and 4, and the latest flavors each of Opera, Saffy and Chrome. Resize your browser window, and you can see the fluid width in action (set to 608...1248 min/max) -- and the content area is fully fluid to any height.

    The "eight corners under one roof" method I use is just an expansion on an older concept called "sliding doors" -- basically I make three sets of 'sliding doors' -- header, content and bottom. In order to repeat-y the content it has to go on the left of the image so we can use "top right" to position it... all the others being 'fixed' or 'close enough to fixed' in height.

    Sliding doors is just like it sounds -- as they slide apart it gets wider -- the two images just overlapping each-other... or in this case, the two slices we are showing of the same image. This unfortunately means at least one of the two images in a sliding doors pair ends up having to be the same as the maximum width you'd want it to display -- thankfully if you use .png it is RUTHLESSLY efficient at compressing long horizontal runs of the same pixel if you can use a 8 bit (aka 256 color) file...

    Which is why you'll also note the single .png used comes in at only 1.2k, as opposed to the 12k in four .jpeg you were using on the original. I also took the time to use tweakpng to strip the GAMA line so there are no color matching issues. The low color count of the line-art you are using works well with narrow bit-width png as well, resulting in no real data loss (unlike jpeg which ALWAYS has loss).

    I use an overflow cutoff on the floated span in the heading to set it to the maximum allowable height, which I upped to 84px so that at large fonts/120dpi it should still be able to fit two lines of heading text if needed. It may be in your best interest to increase the entire height of the image to around 256px (moving the bottom border down) just to be on the safe side with that, though that depends on your headings.

    I moved the text out of the image because images as text is ALWAYS a miserable /FAIL/ at web design, especially on a content area. Don't get so attached to a font you need to put it in the image

    Thankfully yours was pretty simple to code because you aren't using transparencies -- I always count a LACK of transparencies in images as good web design since alpha transparent .png are wastefully large in filesize and have compatibility issues a normal 8 bit .png don't.

    Hope this helps -- I know it's a lot to digest, but this is a really versatile technique that no matter how much code it ends up looking like, it'll still load many times faster than using multiple separate files thanks to handshaking. SOMEDAY we'll be able to replace this with CSS3's border-image -- but that won't be real world deployable IMHO until sometime in 2020 at the rate things are going.

    Any questions, fire away.

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well that is probably the most considerate and substantial reply i have ever received. fantastic.

    one question, confused as to how i would set the original width of the box. if for example i wanted to set the original width to 515px, what do i edit?

    thanks

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by antonyx View Post
    one question, confused as to how i would set the original width of the box. if for example i wanted to set the original width to 515px, what do i edit?
    Everything inside the .contentBox div is fluid, so the only thing you need to set width on is that outermost div.

    Bascially, see this:
    Code:
    .contentBox {
    	width:95%;
    	min-width:608px;
    	max-width:1248px;
    	margin:0 auto;
    	text-align:left;
    }
    
    * html .contentBox {
    	width:608px;
    	width:expression(
    		(document.body.clientWidth>1280) ? "1248px"
    			: ((document.body.clientWidth>640) ? "95%" : "608px")
    	);
    }
    replace with :

    Code:
    .contentBox {
    	width:515px;
    	margin:0 auto;
    	text-align:left;
    }
    ... and you can strip the margin declaration if you don't want it auto-centering.

    When designing sections I like to declare widths as little as possible, so it's possible if that box was inside a column, I'd set the width on the column and not .contentBox... since it will expand to fit whatever you put it in that way.

    I generally find it's good practice to design fluid, even when working with fixed layouts -- sounds weird, but it means you can set widths on two or three containers (outer wrapper, the floated columns leaving a single column fluid), and everything else just 'fits' into place automatically... It's kind of a strange revelation that hits you when suddenly fluid is EASIER than fixed to work with because you don't have to sit there micromanaging the widths of every element.

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you're right, i shall set the width of a container and let this baby fill it. thanks again

  9. #9
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello again. i was just trying to implement your container into my website template and slowly realised that it was a lot of bother trying to integrate it into my table heavy design.

    if you have the time and it's not too much trouble would you be able to create my css template (your bordered box being in the middle). all of the divs would need fluid height but the widths would be fixed. also none of the other containers would need image borders, just the main middle section.

    thanks, here is an example of how i want it to look:

    http://www.londonheathrowcars.com/example.jpg

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well, that pic (and the site it's on) adds more questions...

    1) What are you using tables for, even as a a table based layout there's no need for more than one table -- the parent page uses seven. That's how you end up with 60k of markup doing 8k's job.

    2) your example pic has a fixed width of 1000px, you know that's not even 1024 friendly, right? You really should take another 16-24px off that, NOT that I advise fixed width layouts in the first place.

    3) That parent page also seems to have fixed metric fonts on the content (accessibility /FAIL/) and color contrast issues...

    As to your question -- I'm assuming you want it to stretch to the full height, which is where your problems might occur. The "trick" is to put the sides of the center column NOT on the column itself, but in as a faux-column image behind all three columns.

    ... which isn't as hard as it sounds. If I have time later I'll do up an example for you.

  11. #11
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello, i'm back!

    ok i have taken on board what you have said with regards to the 1000px width and have made the adjustment as you suggested. the container will now be 976px wide.

    also please ignore the 'parent' page. once the divs are ready i shall ensure that all elements are compliant etc.

    for this website it is necessary that i use fixed widths, i know it is not advisable but this is the decision. i have uploaded a new example of my div structure here... if you have the time (and the inclination) please create this structure for me. once that is done i can actually start building the website

    http://heathrowcar.co.uk/divs.jpg

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi death shadow, i have been trying to incorporate your content box into another 3div layout and am having great difficulty.

    i think i will have to wait for you to code a full layout as my example or i will have to start over.

    hope to hear from you soon.

  13. #13
    Non-Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks guys.

    I got much more information from here. thanks guys.


Bookmarks

Posting Permissions

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