Right now I feel like doing this to IE:
Thanks
Full Version: Wordpress sidebar alignment help... Please...
I've been trying to fix this problem I'm having with Wordpress, but finally ran out of ideas and dying on finding how to fix it... The problem I'm having is that the when I align the sidebar to the left... IE puts it in the middle for me... The url for my blog is power.helionet.org/blog/. the link to my css file is power.helionet.org/blog/wp-content/themes/default/style.css.
Right now I feel like doing this to IE:
Thanks
Right now I feel like doing this to IE:
Thanks
What's a sidebar in this case?
QUOTE
What's a sidebar in this case?
The side bar is kinda the navigation bar. The one with Pages, Archives, Catagories, etc...
I dont know squat about css, but it looks to me like you just need to screw with the table cells holding the navbar. (I assume it's a table... all I know is HTML)
These few lines might have something to do with it:
With emphasis on the first line
CODE
<center>
<div id="main">
<br>
<div id="nav" align="left">
<!-- comment out the following if you don't have pages -->
<div id="navigation_content" align="left">
<h4>Pages</h4><ul>
</ul>
</div>
<div id="navigation_content" align="left">
<h4>Archives</h4>
<ul>
<li><a href='http://power.helionet.org/blog/?m=200604' title='April 2006'>April 2006</a></li>
</ul>
</div>
<div id="navigation_content" align="left">
<h4>Categories</h4>
<ul>
<li><a href="http://power.helionet.org/blog/?cat=3" title="View all posts filed under Misc. Art Work">Misc. Art Work</a> (1)
</li>
<li><a href="http://power.helionet.org/blog/?cat=1" title="View all posts filed under Tests">Tests</a> (3)
</li>
</ul>
</div>
...
<div id="main">
<br>
<div id="nav" align="left">
<!-- comment out the following if you don't have pages -->
<div id="navigation_content" align="left">
<h4>Pages</h4><ul>
</ul>
</div>
<div id="navigation_content" align="left">
<h4>Archives</h4>
<ul>
<li><a href='http://power.helionet.org/blog/?m=200604' title='April 2006'>April 2006</a></li>
</ul>
</div>
<div id="navigation_content" align="left">
<h4>Categories</h4>
<ul>
<li><a href="http://power.helionet.org/blog/?cat=3" title="View all posts filed under Misc. Art Work">Misc. Art Work</a> (1)
</li>
<li><a href="http://power.helionet.org/blog/?cat=1" title="View all posts filed under Tests">Tests</a> (3)
</li>
</ul>
</div>
...
With emphasis on the first line
QUOTE
I dont know squat about css, but it looks to me like you just need to screw with the table cells holding the navbar. (I assume it's a table... all I know is HTML)
Thanks for the attempt, but umm... I think Wordpress didn't use any tables.
I think a quick fix would be to manually set the absolute position of the side bar. I'm not sure if this can be done in CSS... probably can... but if not, there's always Javascript.
-----Edit-----
Here's the code:
It sets the position to absolute, but never specifies where the thing is supposed to be.
-----Edit-----
Here's the code:
CODE
#nav{
float: right;
position: absolute;
width: 160px;
padding-left: 10px;
z-index: 1;
}
float: right;
position: absolute;
width: 160px;
padding-left: 10px;
z-index: 1;
}
It sets the position to absolute, but never specifies where the thing is supposed to be.
QUOTE(Power @ Apr 26 2006, 10:35 PM)
Thanks for the attempt, but umm... I think Wordpress didn't use any tables.
*shrug* looks like it does to me. You just need to change the alignment of the sidebar, with whatever it uses to position it.
The position for it is set to absolute. I also tried to detect which browser the user is using and made one style sheet for IE and one for FF and apply to which ever browser is viewing the site... but the problem with that is I don't know enough about PHP to delete the line which import the original style sheet... Hope that make sense.
See edit.
QUOTE(Mynck @ Apr 26 2006, 10:41 PM)
-----Edit-----
Here's the code:
It sets the position to absolute, but never specifies where the thing is supposed to be.
Here's the code:
CODE
#nav{
float: right;
position: absolute;
width: 160px;
padding-left: 10px;
z-index: 1;
}
float: right;
position: absolute;
width: 160px;
padding-left: 10px;
z-index: 1;
}
It sets the position to absolute, but never specifies where the thing is supposed to be.
looks to me that you just have to increase the padding to the left. That should bump the whole column over.
See also this
In this one, a position is set by the "top" and "left" properties.
CODE
#img1{
background-image: url(images/topbg.gif);
background-repeat: repeat-x;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 150px;
}
background-image: url(images/topbg.gif);
background-repeat: repeat-x;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 150px;
}
In this one, a position is set by the "top" and "left" properties.
Well I guess that kinda fixed it, but another problem came to view. Like when I use Firefox and I have the bookmark bar out, it kinda pushes the navigation bar towards the center.
Seems to me like you need to set it to a certain number of pixels plus a certain percentage of the page width. Maybe have to use absolute value too...
Try 10 + abs(windowWidth-770) / 2
Try 10 + abs(windowWidth-770) / 2
QUOTE
10 + abs(windowWidth-770) / 2
Uh... is this CSS or Javascript?
It's my own notation. You get to translate it into CSS 'cause I don't know how.
You cannot set the position to absolute in this case, unless the whole site is in absolute. Otherwise, when you resize your window, your sidebar will stay in the same place and everything else won't.
So... there's no way to set the position to absolute and have it change with the width of the window?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.