?

Log in

DRATW

raynewser in s2bloggish

Center body layout

 I really am just terrible with HTML and I would really appreciate any help. I can't seem to get the body of my layout centered. It's pushed a little bit right and I don't know why.  Here is my profile. This is all the code I have in my CSS:


#banner-inner{
background: url(http://image.png) no-repeat top center;
padding-top:300px;
}
#banner-header {display: none;}

.module-calendar{
display:none !important;
}


#container{
width:0px;
background:white;
}
#pagebody, #banner{
width:1000px; center;
margin:0;
}
#alpha{
width:15% !important;
margin:0;
}
#beta{
width:85% !important;
margin:0;
}

Thanks in advance! :)

Comments

K... in the pagebody:

#pagebody, #banner{
width:1000px; center;
margin:0;
}

You are telling it two different things. You're telling it to be 1000 pixels wide, and then you're telling it it's not allowed any margin. tag "center" is unnecessary. Please remove it. You will have to choose whether you want the width to be exactly 1000px (which btw, will mean it runs off the screen for anyone who is using a lower resolution, for example 800x600) or you can tell it you want X number of pixels to the left and X number of pixels to the right. I recommend this approach.

#pagebody, #banner{
width:100%;
margin-right: 50px;
margin-left: 50px;
}

You can adjust those margins according to how much space you want between the edge of your page and the wall of the window.

Let's start with that and see if that resolves the centering issue, and then if there is anything else, I can try to assist.

PS. May I also ask why you wanted to have the banner and the pagebody combined? They don't need to be. They can have separate settings.
I put that code in and now it's cutting off the header thing and it's not wide enough for the things I see on my friends page.
What's inside #container is what you're actually trying to center -- and while you've specified that #pagebody is supposed to be 1000px, #container has inherited a width of 702 px from .layout-two-column-left in theme-april.css ... therefore what you see on the page IS perfectly centered ... for a width of 702 px.
One thing I noticed today is that you now have:

#container{
width:0px;
background:white;
}
#pagebody, #banner{
width:900px;
margin:0;
}

in your code. Having your container width like that isn't helping you. Your container is the layer below the page body. So if you think of layered papers, you have the container first which in this case would I think be a grey sheet of paper the whole width of the page, That's the container. It is like the blotter. Next is the pagebody, that's a white page, probably a bit narrower than the grey, and it's what you have your two columns sitting on. The page body sits down a little on the blotter, and your banner is a separate piece of paper (or a photograph or something) sitting above the main sheet of pagebody. That's why I recommend that you not try to combine pagebody and banner. let me think about this a minute.
See if the following code will get you closer to what you want.

/* Cleaned CSS: */

#banner-header{
display: none !important;
}

#banner-description{
display: none !important;
}

#banner{
background: url(http://oi54.tinypic.com/2rc34ph.png) no-repeat top center;
height: 300px;
}

#container{
width: 100% !important;
}

#container-inner{
background-color: #CCDEF0;
padding-left: 50px;
padding-right: 50px;
}

#pagebody{
}

#pagebody-inner{
}

#alpha{
width: 15% !important;
float: left;
}

#beta{
width: 85% !important;
float: right;
}

.module-calendar{
display:none !important;
}

Note, if you want to force the rest of your page to be the exact same width as your header, I need to know what your header actually looks like and how wide and tall it is. I used my dummy header here which is 300 high by 900 wide. I did not make them the same width. currently the page adjusts to the width of the screen so that posts don't get cut off unless someone posts a huge picture.
Thank you so much! This worked perfectly! I was working on a header that was 900x300 when I saw this comment so it all worked out great! :)
You're welcome. Let me know if you run into any other problems tweaking it.

April 2012

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     
Powered by LiveJournal.com