Center-aligning content in Manifest theme
-
Hi everyone,
This is my second day coding using CSS. Whoopee! I am having a problem with aligning the main content with the menu bar that’s on the very top of my blog. I also cannot figure out – if I am making a menu bar’s width larger than the rest of the content of the blog, my content moves to the left and itsn’t center-aligned.
Also, after adding a thicker frame to my photos (padding 20px), again, they are not aligned with the menu bar.
http://victoriamashkova.comMany thanks.
The blog I need help with is: (visible only to logged in users)
-
I should clerify, I do want my menu bar be wider than my content feed.
My content is 775px, and I would like my menu bar about 875px (all perfectly center-aligned).Thanks.
-
First off, you’ve taken the site itself to 775px in width, but your image in the latest post is 922px in width (wider than you have the site). You have to also add the 20px of padding on each side of the image which brings things to 962px on the image width. You either have to widen the theme more (to 962px) or you have to take your images down to 735px (775px – 40px). I see 2 images on the main page that are too wide for the theme.
The menu bar is going to take on the width of its parent element which is #site-wrapper. If that is set at 775px then that is the width the nav is going to be. The following is a really, really bad way to do things (to make the menu bar 875px wide and center it) since it might not be honored by all browsers (specifically Internet Explorer).
#main-nav { margin-left: -50px; width: 875px; }This can be done more cleanly but it takes a lot more work and can end up blowing up if someone has their browser zoom level set to anything other than normal.
If you want to do it cleanly, let me know and we can do that, but it will require redoing what you have.
-
-
How do I change my photos’ widths? And the code you padted, do I copy and paste it in my CSS?
I am very new to this process. Thanks for your help. -
Yes, I would like to re-do it in a more clean way… I think I am a bit stuck with these widths and px.
-
I’m going to be going out for a couple hours, but I will get this for you when I get back.
-
-
I am not sure, actually. I’d like to keep the image borderes thick – I think it add a sophisticated look to the bog. I cannot even find where you got 922px number from. I’d like to keep the images large, so the blog remains the feel of a photo diary; however, I am open to what would work best in this situation. Thanks again.
-
Also, I really like how this blog is customized and the balance between the menu bar size, images and content.
http://paolobelcastro.com/
I’d like to have something similar, if this helps clarify the direction. -
O.K., I found the width of the photos and fixed them to the same dimensions. Now, everything seems to be alinged. Not sure, if I fixed the problem in the long run.
-
The image width was what was throwing things off, so with that changed, things are now better.
Is what you are wanting is to have the site framed on either size with a different color like Paolo does?
That is sort of, kind of the direction I was going by widening the wrapper so that the navigation was the width you wanted and then to center the content again within the wrapper.
-
Yes, that sounds right. I like how Paolo’s top menu bar is wider then the rest of the blog’s width. I figured out the size of the photos and changed them all to one size. Looks much better.
-
Let me work on it a bit and I’ll post the code. It might be an hour or so as I have a few changes I have to get out for one of my web clients.
-
I’m going to have to shut down for a while as we have massive thunder and lightning storms here on Hawaii Island and I’ve already had to have my computer monitor repaired twice in the past few years.
Hopefully this settles down in an hour or so.
-
Take a look at this and see what you think. I’ve patterned it off of the site you referenced, but with you having 775px for the width of your content area, I went 975px for the overall width in #site-wrapper. I also did not change the width of the footer area as I kind of like the narrower footer area, especially with the content you have down there. I also like the dark background down there as well, but that can be changed if you want it white. The grey text color in the footer can also be lightened up to give it more contrast. Just let me know what you think.
body { background: #333333; } #site-wrapper { background-color: #FFFFFF; padding: 15px; width: 975px; } #core-content { float: none; margin-left: auto; margin-right: auto; width: 775px; } -
Oh my gaaaaad! It looks great! I appreciate your help very much. Thank you for taking the time to do this. One more tiny question; Is there a way to have the white foreground go all the way to the very bottom, so my Twitter, Categories ans ILike are are on the same foreground as all my content.
Anyway, thank you so much for your help and advice.V
-
I changed the body background color to a light hue of beige. I really like the result. It looks sophosticated and modern. When I changed the body background color, I like everything as it is. I don’t think I want the main backgoround go all the way to the bottom. =)
Thanks again for your time and help.And thanks WordPress!
-
For taking the footer area white, this should do it.
#footer { background: #FFFFFF; margin-top: 0; padding: 15px;#supplementary {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
width: 975px;
}` -
Well, I messed up on my code tags in the above. You can give this a try and see if you like it, if not then you can leave it in the beige. I like it in the beige as well.
#footer { background: #FFFFFF; margin-top: 0; padding: 15px; } #supplementary { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; width: 975px; }
- The topic ‘Center-aligning content in Manifest theme’ is closed to new replies.
WordPress.com Forums 