Hello, I need some help with a project I am working on.
I can’t use position: absolute" within any CSS.
I need to create a Gallery Div, with 3 images inside that div, with a border around that, the images need to resize to fit in the div and line up together, then I need a piece of Text over the top of the 3 images.
Can anyone help me with the Code please, I’m really struggling, I’ve tried z-index: -1; doesn’t seem to work…
If anyone can help me with the code much appreciated. Thanks
Hi @darkxangel84, and welcome to the forums.
Do you have a test site you can link to? If not, then can you post the code you have so far, both HTML and CSS, so we can take a look at it and see where the problem lies.
(If you need help with posting code, you can find it here: Forum Posting Basics. Formatting code in Discourse is not always intuitive. )
Hello, thanks for your reply.
I have a image but I am not allowed to post it up…
maybe this link works - http://s760.photobucket.com/user/Dark_Angel_15_2010/media/Code%20help_zpswih2arbm.png.html
the code I have is
#gallery {
background-color: rgb(0,91,57);
max-width: 100%;
margin: 0 auto;
box-sizing: border-box;
border: 5px rgb(254,46,49) solid;
float: left;
}
#gallery img {
width: 20%;
}
#gallery span {
font-size: 26px;
color: rgb(254,46,49);
font-family:Arial, Helvetica, sans-serif;
text-shadow: #000;
z-index: 2;
}
HTML
<div id="gallery">
<span> Advertise something here </span>
<img src="images/image1.jpg"><img src="images/image2.jpg"><img src="images/image3.jpg">
</div>
z-index will only work on a box with a position of relative, absolute or fixed. (see http://reference.sitepoint.com/css/z-index) The default value is static, so z-index will have no effect.
You need to add
display: block;
position: relative;
to #gallery span.
To position the text where you want it, text-align: center; will centre it horizontally, and you can use top: 50px; or top; 4em; to position it vertically, adjusting the value to suit.
Could I send you a PM? As I’ve nearly got it done, i just needs a tiny bit of tweaking…
Please share what you have so far. Perhaps there are other options than tweaking.
I looked at the two images; one showing a row of three images inside a border with some text on top and one showing an outline mockup of the same. This can be solved several ways depending what the conditions are. Now I’m a bit confused of the conditions you say you have and what the posted code say. Your images shows quite well what you want but maybe some more info could help to get the whole picture. If it matters, what can you tell of:
What are the conditions the gallery container and content must meet?
Like what the image dimensions are to use, resizing to fit in what way?
The images and text should centre both vertically and horizontally?
Can the overlayed text line become too long and allowed to wrap?
Is the gallery html you posted allowed to be changed in any way?
Or do you rather experiment with a code example using the html you already posted? 
Hi there.
So I have a website page set to 100%
I need this gallery div to be probably about 90% so it’s not fully across the page. But the background behind needs to be Green.
Then I need 3 images all to fit inside this gallery div with a border around them. So I think the size of the images width and height needs to be in the css… as the images are too big and different size squares.
I’m not allowed to resize them. So how is that done?
Then I need a span with the text over the top of the 3 images saying ‘Advertise something here.’
I hope this helps. If you have any code for it that be great…
Thanks for the info. I see no problem so far, but still the number of options in how to do this can narrow down more in order to simplify things. Please check.
It’s much easier for anyone to step in when the conditions you must meet are clear. I think many here can give you a hand if some of these questions are ironed out. (If this happens to be a school project, please say so.)
Maybe I’ll find some spare time later to toss up an example after these questions.
Can I send you a link of what I need and what I got so far? It’s not a school project it’s just a project for a job. But I think I’m gonna run out of time only got till Tuesday. But I still wanted to learn it.
Is there any way I can PM you ? Thanks
I need to build this site - see link to image design… http://i760.photobucket.com/albums/xx249/Dark_Angel_15_2010/full-web-image-with-notes_zps9ghlpe46.jpg
I’m having problems with the bits that say “Advertise something here”…
so it’s 3 images, inside a div called Gallery…
with red border, and the span text over the top…
I have uploaded what I have built so far to this URL - http://testing.aimee-tacchi.co.uk/
as you can see, I got the 2 bits left to do… any help?
I just saw your post, I was going to post an example code trying to meet what you ask and what the images show with some explaining comments.
I’ll follow the links after I posted this if it can help some.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>http://www.sitepoint.com/community/t/need-help-with-adding-text-over-the-top-of-3-images/200702/7</title>
<style>
/* to make it simplier this example has added a span to contain the images */
#gallery{
margin:auto;
border:5px solid red;
box-sizing:border-box;
width:90%;
overflow:hidden; /* hide the overflow of height differences */
background:green;
}
#gallery span{
display:inline-block; /* will align vertically with the images, but also center */
margin-right:-100%; /* negate the width to have both spans on top of each other sharing the same line and vertical alignment */
width:100%; /* get full width to center at, while staying aligned with the images */
color:red;
text-align:center; /* within its own full width */
font:900 25px/.6 arial, sans-serif; /* the very low line-height is in case the text becomes too long and wrap */
}
#gallery span:first-child{
position:relative; /* raise to foreground by new stacking level */
}
#gallery img{
margin:-15px 0; /* neg margin to hide eventual height differences */
width:33.333%; /* shrinking the three images avoids a line wrap */
max-width:245px; /* any preferred width */
vertical-align:middle; /* the middle of the line's tallest object */
}
</style>
</head><body>
<div id="gallery">
<span>Put text on top of these images in a span</span><span><!-- to avoid inline whitespace showing; keep these span tags together or comment out any html whitespace between them -->
<img src="images/image1.jpg"><img src="images/image2.jpg"><img src="images/image3.jpg"></span>
</div>
</body></html>
Thank you very much! it has got rid of the top bit of space, but it still isn’t correct… 
could you have a look at my link please. Much appreciated!
Looked at your site again, I can’t see any changes yet.
If you add a span to wrap the three images you can actually try my code above as it is. (Made an edit to make sure.)
I think it will work as you wanted if you adjust some of it. The comments is meant to explain how parts relate when you try different settings.
Please post if; for some reason you can’t add the html span to contain the images, you’ll need some other css to get the result. Or take another approach.
Hi there, it looks like this now
http://i760.photobucket.com/albums/xx249/Dark_Angel_15_2010/update%20website%20layout_zpsliruwl7h.png
this is with your code!
I need it to looks like this - http://i760.photobucket.com/albums/xx249/Dark_Angel_15_2010/full-web-image-with-notes_zps9ghlpe46.jpg
I need it to looks like this
Actually, I think it does, if you bother to adjust different values. Info I posted questions about.
Below is your site with my code example implemented by browser inspector.
Hi thanks for replying, but how do I get it so the background is green at the sides. I tried to add a background colour to the page div and that didn’t do anything.
Also would you be able to help me with the other bit at the bottom that says advertise something here. With the red block that sticks out each side…
Like in the design picture.
Please, you can’t link to an image of a page in progress and ask what is wrong with the code. To answer would be to making assumptions of how you choose to code such, I don’t know you so I wont even try!
It could be an old saying; That an image speaks a thousand words visualizing the result, but code speaks a thousand images showing how it is done.
The example code you’ve got covers what you originally wanted help with. If you need help using it to get the result you want; link to an updated page and describe the problem.
The other bit you ask about in that image would better use a different very basic approach. But I think you have problems with the whole page in different aspects, and I believe many here are able to help you find and mend it all.
Why not update the page you were linking to in post #10 with and keep it updated before you post what problems you have trying to achieve what you want. That would be very helpful.
I’m asking nice and friendly: Please make it less time consuming to help you!
Hello, sorry I have updated the code now, I think I have sorted that gallery div now, all it needs is a white border around it’s text, with a drop shadow of black behind it. I think I have given it the drop shadow but I don’t think the white border for the text is working if that is possible. - http://testing.aimee-tacchi.co.uk/
All that needs fixing, is making it all centre. I did try a clearfix, but it doesn’t seem to have helped align the main container.
I do appreciate your help and I am wanting to learn.
Thank you
Thanks for the updatings!
I see you have removed most unnecessary floats and getting things to centre. Well done.
Looks like you want to clear the content in #main by an extra “.clear-fix” div, but the clear property makes the div clear the floats that came before the div in the html. I suggest you loose that clear-fix div and instead use an :after pseudo element on the #main div to clear its content. (Whish I had a ready link about clearing techniques here, try a SitePoint search.) E.g.:
#main:after {
display: table;
content: "";
}
Noticed the large font in the gallery span text will wrap its line in a narrow viewport causing the gallery be taller than the images. Doesn’t look good when the image height differences is visible. So the gallery code needs some improvements.
Suggestions you can try:
Keep posting. 
Have you ever given the site a run through the HTML validator? You really, really should.
https://validator.w3.org/nu/?doc=http%3A%2F%2Ftesting.aimee-tacchi.co.uk%2F