CODEWITHSUNDEEP
htmlcssimageoverlay
Markus
Markus

Reputation: 4038

html banner with overlaying images and texts

Im looking for a way to dynamically create banners who can get placed on other pages. The banner consists a background image, two overlaying images and two text labels on top of this background image.

Is it right that I only can use absolute positioning to achieve a overlaying elements? How can I make sure, that the banner in its own gets placed relatively in the integrated page?

I guess I need to be able to place elements absolute inside a relative box. Is this possible?

Thanks Markus

Upvotes: 3

Views: 10648

Answers (1)

jonagoldman
jonagoldman

Reputation: 8754

It is possible. The containing element need to have position:relative and all the inner elements that you want to place need to have position:absolute; and also the position x and y like this: top:10px; right:20px or bottom:10px; left:230px

So for example:

CSS:

#banner_wrap {position:relative; width:860px; height:60px;}
#inner_element {position:absolute; top:10px; left:20px; width:40px; height:40px;}

HTML

<div id="banner_wrap">
   <div id="inner_element"></div>
</div>

If you want them to be dynamic then you can change the CSS for the specific page.

Upvotes: 6

Related Questions