WordPress.org

1. ka-d
   Member
   Posted 2 years ago #

   I have been trying to change the orientation of my blog from left to center for some time now. Can't seem to get it to work. It's this blog: ka-d.net/test. Tried to follow the instructions here, but I didn't get it to work. Would really appreciate any help.

2. apljdi
   Member
   Posted 2 years ago #

   #rap {
   background-color:#FFFFFF;
   height:100%;
   margin:0 auto;
   padding:5px;
   width:880px;
   }

   Is that what you want? Looks like you lose your white background. You can probably work that out though.

3. ka-d
   Member
   Posted 2 years ago #

   Cheers, apljdi. That fixed the orientation. Darn, how is it can be sometimes...:-)

   But the white background disappeared now, any suggestions?

4. apljdi
   Member
   Posted 2 years ago #

   Its the float on the divisions inside #rap. The float breaks the divs out of their parent element in some ways. Its an annoying behavior. See that white box at the top? That is the division that wraps around all of your content. Weird, I know. I can't figure out why it was done this way. Try putting a div inside #rap and around all of your content. Put a float:left and background:#ffffff on that div. I think you should have a background now but it doesn't line up with the white box at the top. Resetting the padding on $rap to padding:5px 0 5px 0; should fix that.

5. ka-d
   Member
   Posted 2 years ago #

   I still can't seem to get this to work. How exactly do you put something on a div?
   I manage to turn the white box off, or get it back in full if I float the whole thing to the left, but that sort of puts me back where I started...

   Appreciate any help.

6. apljdi
   Member
   Posted 2 years ago #

   Did you try what I suggested about using a second div? I all but had it by doing that (using Firebug).

7. ka-d
   Member
   Posted 2 years ago #

   Using Web Developer I've tried different variations like so:

   #rap {
   background: #ffffff;
   <div>
   background-color: #ffffff;
   height: 100%;
   margin-top: 0pt;
   margin-right: auto;
   margin-bottom: 0pt;
   margin-left: auto;
   padding-top: 5px;
   padding-right: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
   width: 880px;
   </div>
   }

   ...and so...

   #rap {
   <div>
   background: #ffffff;
   float:left;
   background-color: #ffffff;
   height: 100%;
   margin-top: 0pt;
   margin-right: auto;
   margin-bottom: 0pt;
   margin-left: auto;
   padding-top: 5px;
   padding-right: 0px;
   padding-bottom: 5px;
   padding-left: 0px;
   width: 880px;
   </div>
   }

   ...with either the result of removing the white box on top, getting it back, or moving the whole thing to the left and getting the white background as it's supposed to be.

   AS I'm not well versed in the phrasings of code, an example snippet would probably help me more than saying put "something on something". Found out how to do a <div></div> though, cheers for that:-)

   It's not the end of the world, but it would be nice to fix this. Thanks a lot for your help so far!

8. ka-d
   Member
   Posted 2 years ago #

   Oh, and I'm working on the blog here now...

9. apljdi
   Member
   Posted 2 years ago #

   That isn't where you put the div. The html markup goes in the .php files not in the css.

   <div id="rap">
   <div id="my-inner-wrap">
   <div id="headwrap"></div>
   <div id="content"></div>
   <div id="searchbox"></div>
   <div id="sidebar"></div>
   </div>
   </div>

   I added a second div inside rap and around everything else. Now put float left background white on it.

   #my-inner-wrap {
   float:left;
   background-color:white;
   padding:0;
   margin:0;
   }

   You now need to remove the background and the padding from your rap.

   #rap {
   height: 100%;
   margin: 0 auto 0 auto;
   padding: 5px 0 5px 0;
   width: 880px;
   }

   That should get you very close.

Topic Closed

This topic has been closed to new replies.