Solved

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

Posted on 2011-02-16
5
366 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
ID: 34906492
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
ID: 34906657
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
ID: 34909439
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
ID: 36508812
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Wordpress Taxonomy 2 27
Finding the source of a shortcode 2 23
HTML Display Current Year 5 26
Need help with WordPress On-click Action functionality 3 32
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…

776 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