Centering Posts and Page Content…?

Site url?

https://hellocomrades.com/info

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;

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.

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.

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.

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..

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.

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.

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;
}

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