WordPress.org

1. povevolving
   Member
   Posted 4 months ago #

   Hi,

   Im using the lastest version of WP and the K2 1.0-RC7 Theme.

   Im having a couple problems and greatly appreciate any help on getting them sorted... all regarding centering.

   1. I have centered my header and footer images - both 950px wide. The navigation tabs are locked at a set distance from the left side of the window. I want to make it so that when the browser window is resized the nav tabs stay locked in their place at the left edge of the custom header...

   2. I have tried for hours, using firebug and tons of trial and error, to center my custom page content as well as the blog posts... i have tried to identify which div id to add the div align to... but im not even sure that this is how to go about it...

   many thanks in advance.

   - JM

2. esmi
   Member
   Posted 4 months ago #

   Site url?

3. povevolving
   Member
   Posted 4 months ago #

   http://hellocomrades.com/info

4. esmi
   Member
   Posted 4 months ago #

   From what I can tell, your navigation tabs will always remain in their current position with respect to the left-hand side of the screen when the window is re-sized. Is that not what you want?

   To centre the main content area, try editing style.css (line 104):

   .content {
   padding:0 20px 10px;
   }

   and adding
   

   margin:0 auto;
   max-width:1000px;

5. povevolving
   Member
   Posted 4 months ago #

   Ok thank you. The content area bit put me on the right path... its still a bit too far to the left ~ so which one of the padding parameters shifts it to fine tune it??

   and

   regarding the nav menu ~ i dont want it to be locked in place as it is... i would like it to move along with the header, footer, and content... it needs to stay aligned with the left side of the 'H' in the logo text. Right now, as it is, it does not do that when i resize the browser window...

   many thanks.

6. povevolving
   Member
   Posted 4 months ago #

   This might help clarify: I want the nagivation AND the content of all pages to have its left side aligned with the "H" in the header image.

7. esmi
   Member
   Posted 4 months ago #

   To amend the position of the navbar, edit style.css (line 167) and change:

   ul.menu {style.css (line 167)
   bottom:0;
   left:105px;
   margin:0;
   padding:0;
   position:absolute;
   }

   to

   ul.menu {
   bottom:0;
   left:40px;
   margin:0;
   padding:0;
   position:absolute;
   }

   As for the main content area, you can either have it centred or aligned to the header. Not both.

8. povevolving
   Member
   Posted 4 months ago #

   lol... oh man.

   so that didnt work. maybe im not describing what i want correctly...

   is this possible: The header image is centered. I want to align the content and nav to the left edge of the header image. So no matter how the browser window is resized, the nav and the content stay in their place with respect to the 'H' on the header image. Basically the content area has to be the same width as the header image and be centered... so that everything WITHIN the content area can be aligned with the left edge of the header image...

   Similarly, whatever div or whatever it is that holds the nav - i need that to be the same width of the header image and have it also centered so again, the nav itself is left aligned within the div that is centered and set to the same width of the header image.

   i hope that doesnt sound too confusing... i know it comes down to describing my problem accurately...

   thanks for your help..

9. esmi
   Member
   Posted 4 months ago #

   Ah - in that case, there's a larger underlying problem. Your current navbar is being absolutely positioned so that it appears under your header image. You'd have to remove that positioning to get it to move with the header image. But as you'll see, removing the 'position:absolute pushes the navbar to the top of the header (its natural position via the markup). The whole header/navbar structure would need to be revised. The navbar would possibly need to be brought outside of the header within the markup and then completely re-styled.

   You might be able to get away with amending ul.menu to use:

   position:relative;
   top:102px;
   left:40px;
   margin:0;
   padding:0;

   and then adjusting the left position to suit. But how well that would at various screen resolutions, I couldn't say. Ditto applying a position:relative to .content. The only way to know for sure is to test it out.

10. povevolving
    Member
    Posted 4 months ago #

    k so a bit of tinkering... im close. Albeit a bit of a different approach. Its almost solved though...

    I have the header image where i want it and the nav where i want it in relation to it...

    I did this:
    

    #header {
          padding: 0;
          margin: 0;
          left:95px;
          position: relative;
          height: 125px;
          color: #666666;
          background: (../wp-content/uploads/BlogHeader.jpg);
          background: top left no-repeat;

    and this:

    ul.menu {
    	position: relative;
            top:102px;
    	left:20px;
    	margin:0;
    	padding:0;
    	}

    Can you help me with getting the content and footer to act respectively...

    thank you.

11. esmi
    Member
    Posted 4 months ago #

    Try taking the left:95px; off #header and #footer.

    Add
    

    text-align:left;
    width:950px;

    to #page.

    Amend the padding on .content to padding:0 20px 10px;

    That should get it almost there. Still a little tweaking needed on the header. Plus, make sure you have the correct blog name and description entered in Admin/Settings/General for the search engines. You can take the actual text off the page using:

    #header h1,.description {
    position:absolute; top:-5000px;
    left:-5000px;
    }

12. povevolving
    Member
    Posted 4 months ago #

    k thank you. i think im cool with how it is for now.
    thank you very much for your help.

Reply

You must log in to post.