Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Two toned css container

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #37086
    dcstover1
    Member

    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;}

    #98719
    dcstover1
    Member

    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

    #98721
    dcstover1
    Member

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

    #98723
    dcstover1
    Member

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

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

    #98727
    dcstover1
    Member

    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!

    #98731

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

    #98734
    dcstover1
    Member

    the h2 background doesnt even show up using my original code

    #98736
    karlpcrowley
    Participant

    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/

    #98737
    dcstover1
    Member

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

    #98738
    karlpcrowley
    Participant

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

    #98739
    dcstover1
    Member

    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

    #98740
    karlpcrowley
    Participant

    That doesn’t have the paragraph though?

    #98742
    dcstover1
    Member

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

    #98744
    karlpcrowley
    Participant

    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/

    #98745
    dcstover1
    Member

    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; }

Viewing 15 posts - 1 through 15 (of 20 total)
  • The forum ‘CSS’ is closed to new topics and replies.