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
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
Thank you Nancy. I will look at this further. I already have a fixed
top and nav bar (thanks to you). Might there be a way to have a
"sticky" side bar so when a viewer goes down to the links, the side bar
might be wherever the viewer scrolled to on the page? Am I asking for
the moon?
Sandy
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
Nancy,
You have been a great help and I have made much progress.
I have created a fixed header/footer from your sticky code successfully.
I have created your 3 column semi-liquid layout successfully.
I have created links to DIV IDs on the same page.
which works "sort of" i.e., Latest Updates and Go To Top links (see
http://www.justletmelearn.org/3col_test1.html)
Because I have a fixed header, my mainContent has a top margin of
141px which complicates the links.
Is there a work around for this?
Then I tried a fixed left column using your sticky code. It works but
the left sidebar formatting is all different and it pushes the right
sidebar up. (see http://www.justletmelearn.org/3col_test2.html)
_Is it possible to use a fixed left column and get it to look like the
left and right sidebar formatting before I added the fixed code?
_
Thanks Nancy. I hope you know you're helping the kids of India because
you're helping me . . .
Sandy
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
Nancy,
I have added section divs and it corrected the positioning problem. I
also gave padding of 175px to the left sidebar and right sidebar.
Everything is working well and is formatted as I want it. (see
http://www.justletmelearn.org/3col_test1.html )
When I tried to add your sticky code to cause the left sidebar to be
fixed as the user scrolls up and down, it works but the formatting of
the left sidebar completely changed. It appears to be fixed to the left
margin instead of liquid like it was before. (see
http://www.justletmelearn.org/3col_test2.html ) Can I have the
functionality of your sticky code AND have left sidebar formatting look
as it does in the http://www.justletmelearn.org/3col_test1.html file?
Thank you,
Sandy
Thanks Nancy although I was very disappointed it couldn't work. I tried
several possibilities and nothing worked. I guess I would save a lot of
time, if I would just listen to you. ![]()
I am continuing with your 3 Column Semi Liquid Layout. Both of the
sidebars have gray backgrounds, but the background color only goes as
far as the content goes. Is there a way to stretch the background color
of each sidebar so it reaches the footer no matter how much content is
there?
http://www.justletmelearn.org/3col_test1.html
Sandy Nelson
http://alt-web.com/Articles/Equal-Height-CSS-Columns.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
Thanks Nancy for the equal-height instruction from Matthew James Taylor. I got it to work. Now I have the challenge to combine all the other things I'm doing (fixed header/footer etc) with his code for the columns.
One more thing Nancy. Do you work with Word Press? And if so, do you hire out to help us put embedded blogs on our site? We're running short on time and I'm seeing there will be quite a learning curve to code the blogs part.
Thanks so much, Nancy for all you've done for us.
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.
#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.
(\__/)
(='.'=)
(")_(")
Oh my! What an easy fix. The Faux Columns work just great.
http://www.justletmelearn.org/3col_master.html
I have attempted to set up a blog using Word Press.
http://www.justletmelearn.org/blog/ Dean and I are the only people who
can write on the blog. It has the general idea but doesn't look like
the pages on the web site. We would like to have our blog(s) within the
web site using our header/footer etc. Like one for each project page -
either within the page in one of the sections or a separate page from a
link on the project page.
I think one of your web pages addresses this:
http://alt-web.blogspot.com/2011/06/adding-blogger-rss-feed-to-html-pa ge.html
I just haven't had the time to get to this and would appreciate help
with this.
Thank you,
Sandy
North America
Europe, Middle East and Africa
Asia Pacific