Two toned css container

[dcstover1]

Im a noob trying to create css containers with 2 background colors. One for the main body and one for the title tag top. Much like how all wordpress admin containers appear. Ive got the one background color working, but the H2 background color does not work…does anbody know of a way around this? I tried making another container and wrapping the h2 titles with it, but then the padding of the inpostbox container sqeezed it. Tried the z-index attribute as well, no such luck there either. Thanks for the help guys

.inpostbox {
padding:0px 6px 4px 6px;
border: 1px solid #dddddd;
H2 { background-color: #000080 }
font: courier;
background-color:#f6f7f9;
-webkit-border-radius: 5px;
-moz-border-radius:
5px;border-radius: 5px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;}

[dcstover1]

or another example is exactly like how this container is setup, with the title “two toned css container” being a darker blue then the body of the container

[dcstover1]

ive tried that…the container padding scrunches the background color of the h2 and looks horrid

[dcstover1]

http://www.ontariobuyersmarket.ca/exclusive-properties/

thats with the code you just gave me, notice the padding screwing it up

[dcstover1]

still a no go…the margin trick only worked on one side but then its not padded either…it didnt have the border radius along with it so i added it..ill leave it up for awhile..thanks for helping though, I appreciate it!

[joshuanhibbert]

Just use your original code, and some negative margin to counteract the padding on the parent element.

[dcstover1]

the h2 background doesnt even show up using my original code

[karlpcrowley]

I think I may be way off, not sure if I know whats going on here
but why not put the padding in the h2

like this?
http://jsfiddle.net/rPSyx/

[dcstover1]

tried that as well, if i do that then the rest of the container’s contents do not have a padding

[karlpcrowley]

put the rest of the contents inside a paragraph and give the paragraph padding?

[dcstover1]

http://www.ontariobuyersmarket.ca/exclusive-properties/

i see how it works for you in that program, but doesnt here, ive uploaded your code, take a look

[karlpcrowley]

That doesn’t have the paragraph though?

[dcstover1]

also for some reason now the drop shadow is now lost and the light grey background is gone

[karlpcrowley]

My bad, I had put the p style in the wrong place in the css
Is this what you’re going for?
http://jsfiddle.net/rPSyx/1/

[dcstover1]

ya my bad as well, i didnt have the

‘s in place…all is good now except the boarder on the h2 background color…heres what i got…

.inpostbox {
padding:0px;
border: 1px solid #dddddd; margin: 5px;

font: courier;
background-color:#f5f5f8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;}
H2 { background-color: #9db3c5; padding: 8px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0;
}
h3 { padding:8px;}
P{padding: 8px; }

[Author]

Posts