WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hi all,
I am relatively new to CSS - I purchased the yearly upgrade and have been trying to do some tweaks to http://whatitees.com.
I just wanted to pull up the sidebar position a little higher than where it is now.
I need to know if that can be done in CSS and if so, how?
Any tips or pointers to which variable to work with in the code for sidebar or anything else would be a great help!!
Thanks a lot!
Rishi
It is your header that is too wide, and therefore pushes your sidebar down.
Your sidebar is called "sidebar" in your css.
If you are not going to use the whole length of the header, change the width of this, and your sidebar should jump up.
boblets#header {
clear:both;
float:left;
width:450px;
margin:10px 5px;
}Hi Boblet,
Thanks for the reply.
I tried out your suggestion, but unfortunately it does not behave the way I expected.
I reduced the width to 250px and even 100 px - all it does is "wrap" the title and the text under it to multiple lines. I even tried to reduce the font-weight of the titles(header h1, h2) and the text and then reduced the width - even then the sidebar does not seem to jump up.
Not sure if I am missing something else here...maybe the margins or the padding..?
Thanks,
Rishi
hmm..I see. The sidebar and the main column are inside a common element. hmm... as you cannot touch the html I cannot immediately see a solution.
Basically - if you made your header narrower, both the main content and the sidebar would crawl up...but I am guessing that is not what you want...hmmm... (scratching head)
You're right...I tried it by removing the headerimage completely and reducing the width of the header...it works fine...but as you said, both the content as well as the sidebar crawl up - which is not what i want...alternately, i had also tried increasing the width of the content box so that any decrease in the width of the header would not affect the header text and yet give me some room to make the sidebar go up - but that too fails..:)...have been scratching my head all the more...
With no other replies on this, I am guessing this is something which is a little tough to get around working with.
However, I just installed the Firebug add-on for Firefox - being a newbie to CSS, I saw this was something which really is a big help to understand layout,etc.
Using this I noticed that the "header" area was not so much an issue as the "headerimage" area.
When I uploaded the headerimage, I figured it would be the issue, and hence reduced the width to 300px (300 * 190). But with the firebug, I noticed the headerimage still shows to 760 px. Am not sure if it is showing the actual used width or the defined width - however, I am now trying to see if I can use any of the variables in the "sidebar" to make sure I can pull it up.
Any ideas on that, cause I am not able to see any? Margin, padding - all these do not define the position of the sidebar as a whole with respect to the container right?
It seems to me that both your columns are wrapped in the div "content" - within that is content-main and sidebar.
That means that whatever you do to the headingheaderimage, the two columns will move together. One slightly risky thing to try (make a backup of current css first), is to remove the content-div from the stylesheet, and then place main column and sidebar with margins.
Boblets is right, the posts and the sidebar are placed in the same div, which makes seperate handling difficult. You could try to reposition the sidebar using this code in #sidebar:
display:block;<br />
position:absolute;<br />
right:20px;<br />
top:75px;
I tried it with Firebug and it works fine, although i can not guarantee that it works with all browsers.
Boblets/Arschflugkoerper,
Yes, the content-main and sidebar are included in the content-div.
I just tried adding the few lines of sidebar code which you suggested - did not do anything to the page or the sidebar; hence I obviously did not do it right.
But just a quick one before i get down to dirtying my hands again - I am running it on WordPress.com, and I only have custom CSS upgrade.
Removing the content div - is that possible here?
I am guessing that what arschflugkoerper means is that you don't add the code he gave you, you replace whatever is in there with it. See?
Yes, I imagine you could either physically remove the div content, or add something like display:none;
I haven't tried it on wordpress, though.
Just make sure you back up your current css.
what does display:none really do anyway. I tried using it before and nothing changes.
Basically the idea that the element will not be displayed..
http://www.w3schools.com/css/pr_class_display.asp
@caniwrite: i looked at your stylesheet, at the moment there are this definitions for the sidebar:
#sidebar {<br />
display:absolute;<br />
top:75px;<br />
right:20px;<br />
}
It has to be "position:absolute;" instead of "display:absolute;". If you change it to this it should work:
#sidebar {<br />
display:block;<br />
position:absolute;<br />
right:20px;<br />
top:75px;<br />
}
As for removing the content div, this will unfortunately remove all elements that are contained within this div, such as posts and sidebar.
Ups! Really? That is interesting - I do it all the time other places without a hitch. Apologise profusely, should I have caused - hopefully - temporary mayhem on someones blog.
aw1923 - as for the display:none; sometimes fiddeling with this might do the trick
aw1923display:none;
visibility:hidden;@arschflugkoerper - that worked perfectly!! Although the width initially did get a little skewed; but adding the original width: 200px reverted it back, and I see the sidebar getting pulled up. But, I get the changes you suggested. Thanks a ton! :)...just made this entire CSS thing much clearer than before, and of course, I see the kind of page I had thought of.
@Boblet - thanks to you too for the patience and the ideas...Yes, I tried removing the content-div, and unfortunately it removes both the elements under the content-div. Thankfully, I had a backup of the CSS. Anyways, I shall try fiddling with the content-divs, etc and see what I get out of it.
Anyways, thanks a lot people!
Cheers!
Rishi
Happy to help, and particularly for people who see it as a process and a sharing of ideas and knowledge instead of getting pissed at not getting The Correct Answer and Instant Gratification.
:-)
Sure..:)..it was nice to crank heads with you experts to get some solution...
By the way, I just tried this on IE, and it works as nicely as on FF.
I am hoping to get my own hosting and use wordpress.org, as soon as I am a little more confident fiddling with CSS. Hope I get there soon...:)
This topic has been closed to new replies.
