Creating a content area above the main content area in a wordpress theme?

HTML & CSS
1

I have spent a loooonng time trying to figure out my issue and I think I’m almost there…

Put yourself in my shoes what would you do in this situation? The page I am trying to style is http://visumdesignz.com/pricing/ I think the page looks boring when its all white so I want to jazz it up by being able to seperate content with a div that has a cool texturized background THAT IS FULL PAGE WIDTH

Take a look at my CSS and let me know how I can create content above the #wrapper because I cannot create a div that gets outside of the wrapper it needs to either A be above it or B. be around it… right now everything I create in a page automatically goes inside the wrapper…

I hope someone can help I have been playing with the CSS nonstop since about 32 hours ago.

/*---------------------------------------------------------------*/
/* CONTENT AREA
/*---------------------------------------------------------------*/

/* Content widget area */
#before_wrapper{border-top:1px solid transparent; border-bottom:1px solid transparent;}
#before_wrapper .content_widgets{list-style:none; width:960px; margin:0 auto; padding:20px 0; }
#before_wrapper .widget-container { padding:0px; margin:0px;}
#before_wrapper .widget-container p{margin-bottom:5px;}


/* Content area */
#wrapper{width:960px;margin:0 auto;}




#container_bg #content_full {}
#container_bg #content {float:left; width:69.79%; padding:40px 0 40px;}
#container_bg #content_right {float:right; width:670px; padding:40px 0 40px;}
.content_shadow{width:960px; height:10px; margin-bottom:10px; background:url('images/content_shadow.png') no-repeat;}
.fullwidth #content {margin: 40px auto;width: 100%; margin-top:40px;
}
#container_bg .pricing-wrapper { clear:both; width:100%; height:100%; background:url('http://visumdesignz.com/wp-content/uploads/2012/04/rough_diagonal.png') }
2

I played around and made my own CSS and HTML that works perfectly… the issue is the template I am using the CSS structure is tricky…

@charset "utf-8";
/* CSS Document */
#full{width:100%;margin:0 auto; background:orange; height:100px}

.wrapper{width:1000px;margin:0 auto;}
#top-header{width:100%;margin:0;background:orange;}
#navigation{width:100%;margin:0;background:red;}
#content{width:100%;margin:0;background:pink;}
#footer{width:100%;margin:0;background:grey;}

Here is the HTML this is an idea on how I think the page should be…

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="full">
<div id ="top-header">
<div class="wrapper">
Content
</div>
</div><!--top_header-->

<div id ="navigation">
<div class="wrapper">
Content
</div>
</div><!--navigation-->
<div id ="content">
<div class="wrapper">
Content
</div>
</div><!--content-->

<div id ="footer">
<div class="wrapper">
Content
</div>
</div><!--footer-->

</div>

</body>
</html>
3

Ok guys I figured out what to do after hours of consistency and determination… I gave the wrapper a 100% width and created a .content_wrap class that had the orig wrapper settings, the only thing with this method is I will have to add the div to all the content I create, but that is good because it will allow me more versatility.

Guys NEVER GIVE UP!!! thanks :slight_smile: