yesdavy Posted November 25, 2011 Report Share Posted November 25, 2011 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! Quote Link to comment Share on other sites More sharing options...
akurtula Posted November 25, 2011 Report Share Posted November 25, 2011 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 Quote Link to comment Share on other sites More sharing options...
yesdavy Posted November 25, 2011 Author Report Share Posted November 25, 2011 (edited) 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 November 25, 2011 by yesdavy Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 25, 2011 Report Share Posted November 25, 2011 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.