Text overlay problem

HTML & CSS
1

I have noticed that when I resize the browser window, the text that is overlaying the image does not stay put where it should do

How could I make this stay over the image regardless of the size of the browser window?


<div id="indexPhoto">

                <div><a href="home.php?key_word=image1"><img class="imgOne"  style="float: left;" src="images/img1.jpg" alt="test" /></a>
                    <p id="image1">Image1</p></div>
                <div><a href="home.php?key_word=image2"><img class="imgTwo" src="images/img2.jpg" alt="test" /></a><p id="image2">Image2</p></div>
                <div><a href="home.php?key_word=image4"><img class="imgThree" style="float: left;" src="images/img3.jpg" alt="test" /></a><p id="events">Events</p></div>
                <div><a href="home.php?key_word=image4"><img class="imgFour" src="images/img4.jpg" alt="test" /></a><p id="image4">Image4</p></div>


                </div>

The CSS for this is


	.imgOne, .imgTwo, .imgThree, .imgFour{
        width: 40%;
    }

    #image1, #image2, #image3, #image4{
        z-index:100;
        position:absolute;
        color:white;
        font-size:14px;
        font-weight:bold;
    }

    #image1{
        left:600px;
        top:275px;
    }

    #image2{
        left:1000px;
        top:275px;
    }
    #image3{
        left: 600px;
        bottom: 380px;
    }

    #image3{
        left: 1000px;
        bottom: 380px;
    }
2

Hi, cssbonding.

This is a test question.

If you take the code that you posted in your query and copy it into a file and open that file in your browser, will it duplicate the problem that you are seeing?

???

No, of course not. The images have no dimensions and we don’t know what is around them… what they are within… their environment.

The answer to your question is probably very simple, but I would like to see you present the problem in a manner that we can troubleshoot without guessing.

Just for fun, here’s a guess, from which, hopefully, you will be able to do whatever you wish:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1211707-Text-overlay-problem&p=5670358#post5670358
2014.06.11 09:02
cssbonding
-->
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.imgbox {
    outline:1px solid magenta;
    float:left;
    width:40%;
    position:relative;
}

a {
    display:block;
}

.imgbox img {
    display:block;
    width:100%;
    height:auto;
}

.imgbox p {
    outline:1px solid blue;
    position:absolute;
    left:0;
    right:0;
    bottom:10%;
    text-align:center;
    color:white;
    font-size:1.5em;
    font-weight:bold;
    margin:0;
}

    </style>
</head>
<body>

<div id="indexPhoto">

    <div class="imgbox">
        <a href="home.php?key_word=image1"><img src="http://placehold.it/400x300" width="400" height="300" alt="test" /></a>
        <p>Image1</p>
    </div>
    <div class="imgbox">
        <a href="home.php?key_word=image2"><img src="http://placehold.it/400x300" width="400" height="300" alt="test" /></a>
        <p>Image2</p>
    </div>
    <div class="imgbox">
        <a href="home.php?key_word=image4"><img src="http://placehold.it/400x300" width="400" height="300" alt="test" /></a>
        <p>Events</p>
    </div>
    <div class="imgbox">
        <a href="home.php?key_word=image4"><img src="http://placehold.it/400x300" width="400" height="300" alt="test" /></a>
        <p>Image4</p>
    </div>

</div>

</body>
</html>
3

Oh, the way I am doing the dimensions for the images are styled with this coding


	.imgOne, .imgTwo, .imgThree, .imgFour{
        width: 40%;
    }

Did you mean to say that they should be in a <div> wrapper?

If so, they are already surrounded by id=“indexPhoto” a bit like this


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">


    <style type="text/css">

</style>

</head>
    <body>
        <div id="wrapper">


<div id="navlinks">

</div> <!-- end of nav -->

<div id="indexPhoto">

                <div><a href="home.php?key_word=image1"><img class="imgOne"  style="float: left;" src="images/img1.jpg" alt="test" /></a>
                    <p id="image1">Image1</p></div>
                <div><a href="home.php?key_word=image2"><img class="imgTwo" src="images/img2.jpg" alt="test" /></a><p id="image2">Image2</p></div>
                <div><a href="home.php?key_word=image4"><img class="imgThree" style="float: left;" src="images/img3.jpg" alt="test" /></a><p id="events">Events</p></div>
                <div><a href="home.php?key_word=image4"><img class="imgFour" src="images/img4.jpg" alt="test" /></a><p id="image4">Image4</p></div>


                </div>

</div><!--end of main content-->
        </div><!--end of wrapper-->
            </body>
</html>

Also, I styled the dimensions of the image by the css

4

But I would rather have the text over the image rather than a caption type text i.e. with z-index in mind

5

cssbonding,

Your code does not demonstrate an issue.

The code that I posted is a working page (notice it starts with <!doctype> and ends with </html> and has everything needed in the middle). It is loosely based on your code and your description.

Copy that code to a new file with a name that ends in .htm or .html. Double-click it and open it in your browser. (That’s what working pages are for). Then answer the question, does this demonstrate what you need or not? If not, what do you need?

6

No it doesn’t demonstrate what I need, I want text overlay on an image, no below, on the side or above the image

7

Well, hmmmmm. You can see from the screenshot that the text does indeed overlay the image. It’s positioned over the lower part of each image, but can be raised higher if desired.

You could post a screenshot showing how it appears to you. That might be a useful clue.

Thanks for the feedback. Perhaps someone else will give it a go.

Cheers.

8

Excuse me, it was me being stupid again, thank you for the help

9

:lol: No probs, cssbonding.

I realize that the code that I posted is very different from the model that you posted. Yours seemed overly complicated so I took the liberty of posting a simpler example. If I need to make some “adjustments” so it works for you in your environment, just let me know and I’ll be glad to tweak; or if you simply want an explanation about how any of it works, just ask.

Hope you noticed that the images will resize so they are always 40% of the width of the browser window.

Once again,
Cheers :slight_smile:

10

The reason why the CSS seems overly complicated, I’m still rather noob at CSS, considering that I am a lone developer, I would say it’s rather good, no disrespect to you :slight_smile: Thanks again