SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS position of background color and text will not move

    I hope this is enough information.

    also it is a new site but not up until this is fixed and a few other things.

    I have 1.) an image, say like a slider image for home page
    then 2.) I have a background color opacity.50 on top of that image
    then 3.) I have text over that background color

    BUT It stays near the top no matter what I do.

    fiver-text-bg-overlay.jpgfiver-text-bg-overlay2.jpg

    It is a responsive design

    1.) The image
    #content header[role="site"] {
    width: 100%;
    height:auto;
    margin: 0 0 30px;
    padding: 20px 0 28px;
    border-bottom: 2px solid #E5E5E5;
    background:url(images/someimage.jpg) no-repeat;
    }


    #content header[role="site"] h1 {
    margin-bottom: 0;
    padding: 10px 10px 10px;
    line-height: 1.25em;
    font-size: 1.25em;
    font-family:"Arial, Helvetica, sans-serif;
    color: #d6de3b;
    }


    #content header .sometext {
    background-color: rgba(0,0,0,0.40);
    height: auto;
    max-width: 50%;
    min-width: 30%;
    font-family:"Arial,Helvetica, sans-serif;
    color: #FFF;
    background-position:bottom;
    bottom: 0px;
    z-index: 1;
    }

    header h1.topic { font-size:22px;}



    =================== The affected HTML

    <div id="content" class="site">

    <header role="site">
    <h1 class="topic sometext">Big Show</h1>

    </header>

    <-- Only this part above is the problem with positioning.

    I cannot do position:absolute due to it being a responsive design or when the screen is minimized

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Firstly, "site" is not a role, so it's no use using that from a semantic point of view. Perhaps you mean role="banner"?

    You've also got background-position on the H1, which is meaningless.

    An easy way to do this is just to put a large top margin on the H1 that will push it down and will set the height for the header.

  3. #3
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that too and pushed down the image as well when minimized

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lukkas View Post
    I tried that too and pushed down the image as well when minimized
    Make up a working demo so we can help with this. Check out the Forum Usage link in my signature to a page here that shows how to set up an example in CodePen that includes examples images of the exact size you need.

  5. #5
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .. Not so LOL but now I see more when using this and changed the image size. I didn't see it deamweaver since it is a php file.

    jsfiddle.net/codifier/RbAFj/

    However, a more concerning problem is that I am unable to make button properties .btn ...something is not allowing it to display.

    page 1, page 2, page 3 should not be white or when hovered turn to white.

    It will not display in the .header area, the content area at all.

    thoughts?

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by lukkas View Post
    page 1, page 2, page 3 should not be white or when hovered turn to white.
    What should they be? How should they look/behave?

    Quote Originally Posted by lukkas View Post
    thoughts?
    Specificity

  7. #7
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    they should be formatted as buttons just like the blue reply button in this thread on the bottom left. I cannot seem to get it working although I got it on other sites.
    There has to be a conflict somewhere. I've gone through the stylesheet several times

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You are really being too vague about all this. Perhaps do a Photoshop image of what you want to see. You've got a picture in your head but haven't communicated it here.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    It's OK to help those who try to help you.

    Remove the space between .btn and .green:
    Code:
    #content  .btn.green {
    That should bump up the specificity of those styles.

  10. #10
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The picture is in the first post. The buttons are in the fiddle....we want to simply make the link , the text, a button class but the css code does not take it.

    Instead of page 1, you can call it button 1. It just needs to work in this css code I have.

    here is what I want. But this is an image, and this should all be HTML

    -text-bg-overlay-btns.jpg

    These look like you typical submit buttons except is a link. I hope this helps.

    to recap, I have:
    1. an image in the header
    2. a h1 text over that image
    3. around the h1 text is a background which I have
    4. beneath that set, I wanted some text link buttons as in the fiddle

    Thanks

    UPDATE: Ron, I tried that and it didn't change anything

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    I assume that the image in the header is the orange object, is that correct? Is it a background-image or a foreground image? You mentioned responsive... does the image scale down to fit smaller viewports? If so, how does the font-size in the <h1> change?

    BTW - I called my previous recommendation wrong... it was not a specificity error, it was an addressing error. Either way, it doesn't seem to have targeted the issue.

    This is not your code. I threw this together to see if it hits any of the points that you are interested in. If it does, hopefully you will be able to transfer the methods into your code.
    Code:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>template</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1201022-CSS-position-of-background-color-and-text-will-not-move
    2014.03.08 23:12
    lukkas
    -->
        <style type="text/css">
    *, *:before, *:after {
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
    	box-sizing:border-box;
    }
    .outer {
        outline:1px dotted red;
        width:80%;
        text-align:center;
        margin:0 auto;
    }
    .header {
        position:relative;
    }
    img {
        display:block;
        width:100%;
        height:auto;
    }
    h1 {
        background-color:#aaa;
        position:absolute;
        bottom:0;
        left:0;
        padding:.5em;
        margin:0;
    }
    ul {
        list-style:none;
        text-align:left;
        padding:20px 0 0;
        margin:0;
    }
    li {
        display:inline-block;
    }
    a {
        display:block;
        color:#040;
        font-weight:bold;
        text-decoration:none;
        border:2px solid green;
        border-radius:6px;
        background-color:#0a0;
        padding:8px 24px;
    }
    a:hover {
        color:#fff;
        background-color:#0e0;
    }
        </style>
    </head>
    <body>
    
    <div class="outer">
        <div class="header">
            <img src="http://placehold.it/800x300/" alt="" width="800" height="300">
            <h1>Text should be HERE at the bottom</h1>
        </div>
        <ul class="more"> 
            <li><a href="page1" class="btn green">Page 1</a></li>
            <li><a href="page2" class="btn green">Page 2</a></li>
            <li><a href="page3" class="btn green">Page 3</a></li>
        </ul>
    </div>
    
    </body>
    </html>

  12. #12
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ron that worked. I had to do a bit more changes but you gave me the reel.
    It cleans up that role area too. I used to live in Jersey. Nice place and food.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Cool. Glad I was in the ballpark this time, and very glad that you were able to adapt my hack to your code.

    Thanks for the feedback!

    NJ is an expensive place to live, but it IS well tended; plus, it is only a commuter's train ride to NYC if one really has a taste for the best in foods, shopping, entertainment, and more. I was curious to ask where you are on the West Coast. I have visited there and have friends who live there. They don't want to live anywhere else! For them, the social culture/lifestyle/attitudes trumps anywhere else in the States. Not to mention superb surfing!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •