SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

    Code:
    /*---------------------------------------------------------------*/
    /* 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. #2
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

    Code:
    @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...

    Code:
    <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. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •