www.webdeveloper.com
Results 1 to 4 of 4

Thread: Image Sidebar to equal page height

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    7

    Question Image Sidebar to equal page height

    To start off, I haven't done a whole lot of coding, so most of my websites are in HTML. I know a little bit of CSS, so I'm open to having this problem solved either way.

    My predicament:

    I have a multi-page site that uses the same template throughout. There is an image on either side of the center content (body copy, nav bar, banner, etc.). It is a small sidebar containing a fade into the background image. However, when I did the initial layout, it is only 32x1380 px. The body copy causes my pages to be longer than 1380 pixels. How can I code this image to make it stretch to match the overall height of the page?

    Thank you.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,134
    Search on "css background-size" and you'll find some information that will help.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2013
    Posts
    7
    Thank you, Rick. I have searched for a couple days using your suggestion. However, I still can't get it this to do what I want.

    Here's more information if it helps ...

    I designed the layout in Illustrator, sliced it, saved it out for HTML & web, and opened the HTML in Dreamweaver to begin my editing. Looking at the code, it appears that my image lives in a table ...

    <table width="1016" height="1381" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
    <td rowspan="25" align="left" valign="top">
    <img src="images/Home_Page2_01.png" width="32" height="1380" alt=""></td>

    There are more pieces after that, but this is the png I'm trying to duplicate (or stretch) along the y to equal the varying height of the page. Do you have any solutions or recommendations on where to look for one?

    Thanks!

  4. #4
    Join Date
    Mar 2011
    Posts
    1,134
    The only way Illustrator can export as HTML is to use tables, and while it's possible to wedge such code into an existing page, it's usually a bit complicated and difficult to maintain. You're better off just sticking to Dreamweaver until you learn to create your own HTML code.

    I'd need to see the code for the entire page before I could suggest a solution, and I'm not sure I could help even then. It would be simple to use that image as a background image for the entire page, but there are bound to be details to be overcome. You might want to find a Dreamweaver forum where you can ask your question. Good luck!
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles