Jump to content

WP header design question


yesdavy

Recommended Posts

Anybody know how to make a header in WP 100% wide behind a WP theme such as Weaver that is say 940 pixels wide? Here is an example http://www.texassports.com/allaccess/?media=260234 of more or less what I'd like to be able to accomplish. I'd like the header to be the whole width of the screen even though the content and sidebar are maybe 940 pixels wide.

 

Thanks!

Link to comment
Share on other sites

The way I do it is instead of using id="wrap" I use a class="wrap". for example:

 


.wrap{ width:940px; margin:auto; }

#header{ width:100%; background:...; ....;}


<body>
  <div class="wrap">
     <!-- navigation/logo here -->
  </div>
  <div id="header"> <div class="wrap"> <!-- I assume you still need the wrap for header content, and use header for 100% background --></div>  </div>
  <div class="wrap">
    the rest of you content
  </div>
</body

 

And of course you could do the same thing for your footer if you wish

Link to comment
Share on other sites

The way I do it is instead of using id="wrap" I use a class="wrap". for example:

 


.wrap{ width:940px; margin:auto; }

#header{ width:100%; background:...; ....;}


<body>
  <div class="wrap">
     <!-- navigation/logo here -->
  </div>
  <div id="header"> <div class="wrap"> <!-- I assume you still need the wrap for header content, and use header for 100% background --></div>  </div>
  <div class="wrap">
    the rest of you content
  </div>
</body

 

And of course you could do the same thing for your footer if you wish

 

Great, I will have to study this and figure out where in the style.css it has to go. Will it replace anything or just stand alone as you have indicated? Please excuse my beginner questions as I am quite inexperienced at this. Also, if you know how to get rid of the horizontal scroll on http://traditionalgolfsociety.com I would love to know that. I was told by someone to change something in a dynamic theme file (style-weaver.css or something like that) but I could not find such a file. Finally, let me say that I really like Manchester from the 4 occasions of visiting there.

 

Afterthought - could this code you have shown be used in the Weaver theme advanced options here domain/wp-admin/themes.php?page=functions.php where they allow you to put in code without touching the style.css file such as <Head> section

<!-- Add your own CSS snippets between the style tags. -->

<style type="text/css">

</style>

or in HTML code insertion areas such as Pre-Header Code, Site Header Insert Code, or Post-Header Code?

Edited by yesdavy
Link to comment
Share on other sites

First, the only difference betweem using IDs and Classes is that classes can be used multiple times on a page, whereas IDs can only be used one time. One isn't more powerful than the other or carries any more weight than the other.

 

Generally, IDs are used for things like wrapper, header, footer, content, sidebar, and such, as there will only be one of those on any given page, whereas things like images, paragraphs, and such, may appear more often and such need a class instead of an ID.

 

Other than that, where a common layout is design like this (simplified):

 

<body>
<div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
    </div>
</div>
</body>

 

You'd move the header div before (and outside) the wrapper div, and only apply your narrower width to your #wrapper.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...