|
#1
Mar 13, 2012, 11:53 AM
|
|
When make my sidebar position:fixed; by inserting
Code:
border-right: 1px #04167A;
padding: 10px 10px 10px 10px;
background: #8599A6;
text: #2F4253;
position:fixed;
in the "LEFT sidebar style" its position does get fixed unlike it is implied here, but when doing so the sidebar becomes wider and reaches the right side of the screen. Adding does not help.
I guess that have the widgets on the sidebars position:fixed would work just as well.
Related thread here.
Last edited by aygart; Mar 13, 2012 at 11:58 AM.
|
#2
Mar 13, 2012, 12:20 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
What version of Atahualpa and WP?
What is the URL?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#4
Mar 13, 2012, 12:45 PM
|
|
Doing from the two threads together gives slightly different results, but you can see for yourself.
|
#5
Mar 13, 2012, 03:23 PM
|
|
It is back to the attmpted position:fixed so that you can see what I mean
|
#6
Mar 13, 2012, 04:02 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
ry adding thins to the CSS Inserts
HTML Code:
div.header-image-container {z-index: 10;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#7
Mar 13, 2012, 04:38 PM
|
|
Thanks, this worked to get the header covering thesidebar, but did not work to get the sidebar back to its proper size filling the sidebar area and not covering the center column.
It also solves this thread mostly although the form still shows through the menu bar where there are no menu items.
|
#8
Mar 13, 2012, 05:06 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
make the width smaller - you should really get and learn how to use FireBug an extension for FireFox it is invaluable when trying to figure these things.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#9
Mar 13, 2012, 05:55 PM
|
|
I already set width: 200px; which is the sidebar width. That also would only fix the width and would not make it reach the bottom.
Re. Firebug. I'm learning give me some time.
|
#10
Mar 13, 2012, 07:22 PM
|
|
|
|
1,112 posts · Mar 2011
Perth, Western Australia
|
|
A wise man once said (many many many many many times)
Quote:
Originally Posted by juggledad
you should really get and learn how to use FireBug an extension for FireFox it is invaluable when trying to figure these things.
|
It is really good advice
|
#11
Mar 13, 2012, 07:44 PM
|
|
I just started with WordPress and atahualpa a week ago. Give me a chance!
|
#12
Mar 13, 2012, 10:14 PM
|
|
I actually tried what I was able to figure out with firebug and saw that
Code:
#left {width: 180px;
height: 1000;}
will get the sidebar filled and not over into the center. I'm not sure why it needs to be 20px smaller than the table column size, but it works. The problem then is that it covers the footer when scrolled to teh bottom. I tried
Code:
#footer {z-index: 10;}
which worked for the header but it didn't help.
Edit: This worked as described in Firebug but when entering in css inserts it still overflowed into the center column.
Last edited by aygart; Mar 13, 2012 at 10:20 PM.
|
#13
Mar 13, 2012, 11:20 PM
|
|
|
|
1,112 posts · Mar 2011
Perth, Western Australia
|
|
I know, Im sorry, I was a newb once.
Using a code inspector you currently have:
td#left {
vertical-align: top;
border-right: 1px #04167A;
padding: 330px 10px 10px 10px;
background: #8599A6;
text: #2F4253;
position: fixed;
width: 200px; (try 180px here)
}
and
#left {
width: 170px;
height: 600px;
Im not sure why you want left sidebar the height 600px and fixed, only that the background colour of light blue shows if you dont hide it. So change the background colour to same as the widgets background colour and ditch the height.
The background colour for the page is currently set in:
div#container {
padding: 0;
background: #9EBBE3;
Last edited by Jam; Mar 13, 2012 at 11:25 PM.
|
#14
Mar 14, 2012, 08:08 AM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
And just to throw a wrinkle in here. When I look at this site on my laptop your header takes up almost half of the screen and is frustrating to read. When I scroll I expect to see more and can't. I would at least set the header to a narrow height. Something like 100px or at most 150px and even that might be too big with a fixed header.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#15
Mar 14, 2012, 08:31 AM
|
|
Thanks both of you for the tips. I'm not sure why it shows two different widths for #left. I only wrote one. I think that I am going to take a different approach and try to fix the widgets in the sidebar and not the sidebars themselves. I think I figured out enough from Firebug to figure out how to do that.
I know that the header needs to be adjusted. The main thing that I want to do is keep the items on the sidebar at all times instead of it becoming blank on a longer page. I'm experimenting with different options. I realize that I will have to keep track that sidebar items shouldn't get lost on smaller screens as well.
In my first job interview as a teacher of a short class when the principal asked me about my experience teaching I told him that there has not yet been anyone born with experience. I got the job and left due to his inexperience and incompetence as a principal.
|
#16
Mar 14, 2012, 09:12 AM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
If you want the left and right sidebars fixed add the following to CSS Inserts.
HTML Code:
td#right, td#left {
position: fixed;
width: 180px;
}
Make sure there is no conflicting CSS for td#right or td#left
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#17
Mar 14, 2012, 11:02 AM
|
|
Meanwhile I unfixed the sidebar and header and instead fixed the widgets using
Code:
#search-2 {
position: fixed;
}
#pages-2 {
position: fixed;
padding: 25px 0px;
}
The padding of the page widget needed to be adjusted so it shouldn't overlap the search. Is there any way to just tell it to stay below the widget above it so that it can stay below one even if the size varies (such as a posts widget which will change based on post titles)?
I am starting with the left sidebar and will apply my learning to the right sidebar later.
Also, is there a way to get the widgets to move up when scrolling down so as not to leave a blank space above them but have them stop at the top so that they should not go off the page and leave the whole sidebar blank?
|
#18
Mar 14, 2012, 12:10 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
Instead of having to set fixed position to all the widgets you could just add the following to CSS Inserts to fix the sidebars and have the background the correct color. Now when you add new widgets you won't have to add anything in the code.
HTML Code:
#bodyrow {
background: #8599A6;
}
td#right, td#left {
position: fixed;
width: 180px;
}
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#19
Mar 14, 2012, 03:04 PM
|
|
Thanks. Is there a way to have them move to the top of the screen when scrolling down and then stopping without going off the screen? My guess is that it would need to be done to the widgets by somehow limiting how far they are able to scroll without totally fixing them. I just don't know how to do it (yet).
|
#20
Mar 14, 2012, 05:56 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
Now I think you will have to wait until you know how to code. I don't have a clue how you would do that.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
|