Solved

How do I make this blue bar go to the edge of my content area on either side?

Posted on 2013-12-09
4
228 Views
Last Modified: 2013-12-09
I have a site here:

www.particletechlabs.com

I need to make the light blue bar that says "For more information, contact us at.." under the large image go to the edge on either side.

But I cannot figure out how to make this happen.

I've attached a screenshot of what I need.




Any help is appreciated.
screenshot.jpg
0
Comment
Question by:Donnie Walker
  • 2
4 Comments
 
LVL 10

Expert Comment

by:jtwcs
ID: 39707508
You can do this by applying some negative left and right margin to the rt-phonebanner div.

#rt-phonebanner {
    margin: 0 -7px;
}

Open in new window

0
 
LVL 12

Accepted Solution

by:
duttcom earned 500 total points
ID: 39707514
It looks like the blue bar doesn't go to the edge because of the padding on the containing div #rt-body-bg4.

Line 113 of template.css shows

#rt-body-bg4 {
    margin-right: -9px;
    padding: 15px 16px 0;
}

You could try

#rt-body-bg4 {
    margin-right: -9px;
    padding: 15px 0 0;
}

instead to remove the right and left padding.

I've noticed you have posted a few CSS questions in the last day or two. You might want to consider using Firebug in Firefox to debug your CSS.
0
 

Author Closing Comment

by:Donnie Walker
ID: 39707540
That worked out great! Thanks so much for that and the Firebug suggestion.
0
 
LVL 12

Expert Comment

by:duttcom
ID: 39707545
Firebug is excellent for working this sort of stuff out. Sure beats playing 'find that style'!

Good luck with your project.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error on link 14 48
Capture logon name 13 73
How to make a moving character 3 57
Box Locations 6 16
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

809 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