Header Position Off

HTML & CSS
1

I am trying to position my header Jewelry Montreal | Jewelry Montreal it’s so left side
looks ok on small screens but goes off from center when i go to larger screen resolutions.
thank you

2

use the same thing that you currently are for teh nav element. margin: 0 auto;

3

From what I’m seeing the page top to bottom is filled with faulty/broken methodologies for handling the layout. That the ‘header’ is even being centered separately from the rest of the page is an indication the wrapping order of DIV is “all wrong”.

This is apparent once I took a look under the hood, where you have 11k of markup and 108k of javascript on a page that should require no javascript for modern browsers and only has 5k of plaintext.

Nonsensical heading orders, endless wrapping DIV with ID’s and classes for NOTHING, paragraphs around non-paragraph elements, STRONG tags for obvious heading elements…

… and that’s before we talk all the garbage turdpress saddled you with.

This:


<div id="wrap">
<div id="header"><div class="wrap"><div id="title-area"><p id="title"><a href="http://www.jewelrymontreal.com/" title="Jewelry Montreal">Jewelry Montreal</a></p><p id="description">The Best Jewelry Store In Montreal</p></div><!-- end #title-area --><div class="widget-area"></div><!-- end .widget_area --></div><!-- end .wrap --></div><!--end #header-->
<div id="nav"><div class="wrap"><ul class="nav superfish"><li class="home current_page_item"><a href="http://www.jewelrymontreal.com/" title="Home">Home</a></li><li class="page_item page-item-16"><a href="http://www.jewelrymontreal.com/about-us/" title="About Us">About Us</a></li><li class="page_item page-item-100"><a href="http://www.jewelrymontreal.com/blog/" title="Blog">Blog</a></li><li class="page_item page-item-17"><a href="http://www.jewelrymontreal.com/contact/" title="Contact">Contact</a></li></ul></div></div>

Is one HELL of a train wreck for what should probably be coded thus:


<div id="pageWrapper">

	<h1>
		<a href="/">
			Jewelry Montreal<br />
			<small>The Best Jewelry Store In Montreal</small>
			<span></span>
		</a>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="/" class="current">Home</a></li>
		<li><a href="/about-us/">About Us</a></li>
		<li><a href="/blog/">Blog</a></li>
		<li><a href="/contact/">Contact</a></li>
	</ul>

All those extra endless pointless DIV and P in the header… Get rid of them!

Set the width once on an outermost wrapper, set up a heading order that makes sense (pretty much every other heading in your existing code should be a H2, and all those p/strong pairings should be H3!), and there’s plenty of semantic block-level containers present to handle any formatting you want to add there.

That’s really where this layout is biting you – you’re setting widths and positioning on every element when you could just say the width ONCE on a outer wrapper, center that one wrapper, and let everything else just fall into place.

4

wow,i did not know all these codes were there.i have bought this theme from studiopress and using it just as it is.i just added position left css code.

I don’t want to dive in the code now.as a quick fix what should i do?

thanks

5

in the CSS on #header, replace:
margin-left: 165px;

with:
margin:0 auto;

as funktifyknow suggested… though you’ll also have to set it’s width equal to that image… Which I believe is 950px.

6

thank you both for helping me.it works great.