Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2011-02-16
5
Medium Priority
?
412 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 4

Assisted Solution

by:DangerousJeff
DangerousJeff earned 1000 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 1000 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
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…

688 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