Skip navigation
Gotcha Man
Currently Being Moderated

Getting a sidebar to go top-to-bottom

Mar 28, 2013 4:01 PM

Tags: #dreamweaver

I'm working with the three-column, header, and footer page (from "new pages") in Dreamweaver (on my Mac), and I want the left sidebar (in a solid color) to go all the way to the bottom of the page, but it doesn't. It stops before the footer. I miss "frames" in GoLive. How do I do this?

 
Replies
  • Currently Being Moderated
    Mar 28, 2013 4:12 PM   in reply to Gotcha Man

    No. You don't miss frames.  

     

    What you want are equal height CSS columns.  There are a few different ways to approach this, depending on your project and the content you will be working with.

    http://alt-web.com/Articles/Equal-Height-CSS-Columns.shtml

     

    Option #2 Faux Columns are the simplest (one 3-toned background image).

    Option #5 JavaScript from PVII is another good choice if you don't wish to use background images.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 28, 2013 4:14 PM   in reply to Gotcha Man

    This might be helpful:

    http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 28, 2013 4:25 PM   in reply to Al Sparber

    Al's technique works. He uses that in his style sheets that he sells and I haven't seen anything he has built "break" yet.

     

    There is a simpler way and Al's templates used to use that, as well.

     

    According to HTML, a div will grow or contract based on what's in it. So, if you don't have any text in a sidebar or column, it shrinks to fit available text. If you are using a solid color for that to make it stand out, the color will end at the bottom of the div giving you results that are not optimal.

     

    So you can "cheat."

     

    Create a div that holds all of your columns and place those columns inside that div. Make a background for that "holder" column that has the colors you want and make your background just a few pixels high and have it repeat-y.

     

    Like this:

     

    #colContainer {   

         background-image:url('/images/three-col-bkg.gif');

         background-repeat:repeat-y;

    }

     

    Now your side columns, if you have lined them up appropriately to the background, will always look like they run the entire length of the page and your <div id="colContainer"> will expand or contract depending on the text within it in any of the columns inside, so your background will always extend to the bottom of the tallest column for all columns inside that container.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 11:11 AM   in reply to Gotcha Man

    Thing is, I want to put the menu of links in that sidebar, and with a frameset it loads once and it's done -- with this? Not so much.

    You should Server-Side Includes.

    http://www.smartwebby.com/web_site_design/server_side_includes.asp

     

    I use an SSI for my site wide menus.  Edit one file, upload to server and voila!  The server automatically updates all the pages.  SSIs are a big time saver & so much better than frames!

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 12:08 PM   in reply to Nancy O.

    Nancy uses server-side code to include menu files (that are HTML) and, when I was first learning (with Dreamweaver CS3) I could never see what I had included, I just saw a little code icon. Drove me nuts.

     

    I purchased a few packages to make life easier and learned a lot from a set of sites I bought from WebAssist WebAssist uses Dreamweaver's Templates to handle larger websites and to effortlessly create a whole host of pages from them. When I started designing my own pages, I looked at what WebAssist did and adopted Dreamweaver Templates into all of my websites that could benefit from them.

     

    To do exactly what Nancy's talking about, but without Server-Side include code, I simply open the Template file (which ends in .DWT and not .HTML) change the navigation (or anything that is common to all pages, like the footer) and every other page on the website will change if I tell the template to update all pages based on that template.

     

    Then, when I look at any of the pages in Dreamweaver, I don't have little code icons instead of my navigation.

     

    I don't remember what I used back in the 1990s to make a couple of websites, but it might have been GoLive. I did Table layouts for pretty much everything and didn't like how pages had to reload everything when switching menus, so I changed the site to frames. When I did that, my menu structure never had to reload.

     

    But that was back in the day when web browsers were not doing intelligent caching, I did not use style sheets and only the smarter designers used divs for their pages. Also, the best speed most people had was from a 56k modem.

     

    Browsers are a lot more intelligent these days. People have more RAM on their computers and browsers are happy to utilize that to cache style sheets. Browser rendering nowadays is lightning fast. I think the old sites I built back then would never exhibit the type of loading artifacts that they did back in the 56k-era.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points