Skip navigation
Currently Being Moderated

Link On Sidebar that will display results in middle column of same page

Mar 23, 2012 9:24 AM

It's me again . . .

 

The idea is to keep viewers on the same page.  I want to have links on the left sidebar that when clicked will bring information and pics up in the middle column layering over what is originally in the middle column.  It would be sort of like swap image (which I work with a lot) but it wouldn't be a mouse hover deal.

 

Thanks for your help,

 

Sandy

 
Replies
  • Currently Being Moderated
    Mar 23, 2012 9:53 AM   in reply to snelsoninthemtns
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 11:08 AM   in reply to snelsoninthemtns

    Are there other ways to do this?

    Yes.

    For SEO reasons, it's usually better to create separate web pages with unique titles & descriptions for each topic.

    But let's say you have a lot of content on one topic.

     

    You can use named anchors or links to div IDs.

     

    <div id="div1">

    content here

    </div>

     

    <div id="div2">

    content here

    </div>

     

    <div id="div3">

    content here

    </div>

     

    LINKS:

    <a href="#div1">Link to div1</a>

    <a href="#div2">Link to div2</a>

    <a href="#div3">Link to div3</a>

     

    Working example:

    http://capenet.org/teach.html  (click links on left side),  Smooth scroll & scroll to top is powered by jQuery.

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 4:18 PM   in reply to snelsoninthemtns

    I'm not a big fan of using fixed divisions all over the page 'cuz it's likely to break or just not show up right on some devices.

    But since you asked, it's the same method for sticky text.

    http://alt-web.com/DEMOS/CSS2-Sticky-Text.shtml

     

     


    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2012 12:15 PM   in reply to snelsoninthemtns

    This is a proof of concept I did a while ago.   View source to see the code.

    http://alt-web.com/TEMPLATES/FixedLayout.shtml

     

    Method to keep content from butting up with the top of viewport window:  Add .section divs with plenty of padding.

     

    CSS:

     

    /**add ample space for fixed header, footer. Adjust as req'd**/

    div .section {
    padding-top: 80px; 
    padding-bottom:100px;
    }

     

    Your fixed menu looks fine to me.  Add more px to the top position.

     

    #StickySidebar {

    top: 175px;

    }

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 28, 2012 10:46 AM   in reply to snelsoninthemtns

    Fixed positioned elements are just that.  Fixed relative to the browser's top left corner.  Since fixed elements are removed from the normal document flow, they can't be made to behave like side-by-side floats.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2012 1:59 PM   in reply to snelsoninthemtns

    How to Create Equal Height CSS Columns?

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

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 11:47 AM   in reply to snelsoninthemtns

    I think Faux Columns would work very well for this without you having to recode except one line in your CSS.

    This 3-toned image is 950px wide.  171px of gray for each sidebar.

    3-tonedBG.gif

     

    #container {

    background: #FFF url(3-tonedBG.gif) repeat-y;

    }

     

    <help us put embedded blogs on our site?>

     

    What do you mean by "embedded blogs?"

     

     

    Nancy O.

    (\__/)

    (='.'=)

    (")_(")

     
    |
    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