Solved

Make a stripe in header go across the length of the page

Posted on 2011-02-16
5
341 Views
Last Modified: 2012-08-13
Hello .
I'm attempting to finish customizing a script I purchased from studiopress.com (the going green theme) and one of  the things in my initial vision was to have the brown stripe do 2 things 1) go across the top regardless of screen size and 2) fall behind the nav but above the center page background.  I've attached a screenshot of what i'd like it to look like.    

The goal
Unfortunately, I've been able to customize pretty much everything else except for these two Items.  I'm not a complete novice at css, but enough to be asking for help as this project is overdue.   Any detailed help you can offer is greatly appreciated!!

Here's the site in progress:  http://wedding.circleofsisters.com  

Thanks again!
0
Comment
Question by:vfleary
5 Comments
 
LVL 4

Assisted Solution

by:DangerousJeff
DangerousJeff earned 250 total points
Comment Utility
Hi, I really like your proposed design.
I'm not really a CSS guru either but one potential (hacky?) way of doing the full width stripe is this:
- Create another div containing the whole "wrap" div
- Give it an id, eg "stripe"
- In its CSS assign its background to be a vertical slice of your logo image repeating on the x axis and aligned at the top.

#stripe {
    background: url("images/logo-slice.png") repeat-x scroll center top transparent;
}

Open in new window


You can probably move your Nav to within the title area div, but your text-indent property will cause issues there, failing that potentially using absolute positioning.

Do you only have control over the CSS?
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 250 total points
Comment Utility
You could add a div outside of the wrapper class in the header.php file. Add something like this to your header.php file just after the closing </head> tag:
<div id="top-bar">
        <div class="wrap">
             YOUR CODE IS HERE
                     index.php
                             sidebar.php
                                 footer.php
        </div> <-- this ends the wrap div --->
      </div> <------- add this div as the last div in the footer.php -------->


Now you just style the css for the new div. Maybe something like this:

#top-bar {
      background-color: #300;
      width: 100%;
      position: absolute;
      padding: 0;
      height: 200px;
      top: 25px;
        overflow: hidden;
        left: 0;
        right: 0;
}
0
 

Author Comment

by:vfleary
Comment Utility
Thanks to both... normally this would be super easy but because studiopress uses the Genesis Framework, finding where just outside the </head> tag is so I can edit it and add the additional div styel has become quite the adventure.  

If you have any clues, please fill me in.  Otherwise, stay tuned!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now