CSS position of background color and text will not move

HTML & CSS
1

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.

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

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

I tried that too and pushed down the image as well when minimized

4

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

… 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.

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

What should they be? How should they look/behave?

Specificity

7

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

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

It’s OK to help those who try to help you.

Remove the space between .btn and .green:


#content  [color=blue].btn.green[/color] {

That should bump up the specificity of those styles.

10

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

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

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. :-/


<!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

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

Cool. Glad I was in the ballpark this time, and very glad that you were able to adapt my hack to your code. :slight_smile:

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!