Need an image to stay in its place! Options

[SecPoint]

Trying to put a smaller image on the right top side of the image with the girl.
The CSS and the HTML codes are


CSS :

CODE

    .imgbar {
    position:absolute;
    top:39.7%;  
    left:51%;
     background:red;
    margin:-64px 0 0 -64px;
    }

The HTML code is :

CODE

                        <!-- THIS TOP LINK IS THE IMAGE WITH THE SINGER AND THE FRAME AROUND IT -->
            <img style="background:url(http://factorium.nl/_images/idx_main_img/10a.jpg)" src="http://factorium.nl/images/menu/header-frame.png"  height="227" width="325"/>
                
            <!-- THIS BOTTOM LINK IS THE TRIANGULAR BLACK BAR THAT HAS TO COME ON THE TOP RIGHT OF THE TOP LINK -->
            <img class=imgbar src="http://factorium.nl/images/menu/header-frame-right.png">

This is the link of what we want the page to look like (photoshopped) : The "concept"

This is the screenshot of what it's looking like now : What it's like now

Can someone help me please? We need it to work on every resolution.

Thanks!

PS. I've added the page as it is now to the attachments.

This post has been edited by SecPoint: Sep 2 2015, 10:13 AM

[Christian J]

This is the link of what we want the page to look like (photoshopped) : The "concept"

This is the screenshot of what it's looking like now : What it's like now

Those links point to the same image.

PS. I've added the page as it is now to the attachments.

The IMG element lacks the CLASS "imgbar". If the image is "position:absolute" you probably want to make the container of the images "position: relative", so that it becomes a local positioning reference (otherwise the body of the page playes that role).

Also there some syntax errors related that you should fix: validator.w3.org

[pandy]

It seems he wants it at the top of the page. But for that no positioning is needed.

You do need positioning to place the other image on top of the first though. You could also use negative margins, but I think positioning is preferable for this. You also need to put both images in a common container. Like this.

CODE

#imgcontainer   { width: 500px;
                  position: relative }
#top            { position: absolute; top: 0; right: 0 }

HTML

<div id="imgcontainer">
<img src="bigimage.jpg" width="500" height="300" alt="Big image blah blah blah">
<img src="smallimage.jpg" width="50" height="50" alt="Small image blah blah blah" id="top">
</div>

By positioning #container you make it a positioning context for whatever elements it contains, i.e. they will be positioned relative the DIV's edges, not relative the edges of the page, should you position any of them absolute. As you want to put the small image in the top right corner of the large image you need to make the DIV the same width as the large image, or it'll span the whole page and the small image will be as far out to the right as it can get.

[SecPoint]

This is the link of what we want the page to look like (photoshopped) : The "concept"

This is the screenshot of what it's looking like now : What it's like now

Those links point to the same image.

PS. I've added the page as it is now to the attachments.

The IMG element lacks the CLASS "imgbar". If the image is "position:absolute" you probably want to make the container of the images "position: relative", so that it becomes a local positioning reference (otherwise the body of the page playes that role).

Also there some syntax errors related that you should fix: validator.w3.org

Oh my... I didn't notice they were both the same links :/


The link of the image of what it's like now is : this.

[SecPoint]

It seems he wants it at the top of the page. But for that no positioning is needed.

You do need positioning to place the other image on top of the first though. You could also use negative margins, but I think positioning is preferable for this. You also need to put both images in a common container. Like this.

CODE

#imgcontainer   { width: 500px;
                  position: relative }
#top            { position: absolute; top: 0; right: 0 }

HTML

<div id="imgcontainer">
<img src="bigimage.jpg" width="500" height="300" alt="Big image blah blah blah">
<img src="smallimage.jpg" width="50" height="50" alt="Small image blah blah blah" id="top">
</div>

By positioning #container you make it a positioning context for whatever elements it contains, i.e. they will be positioned relative the DIV's edges, not relative the edges of the page, should you position any of them absolute. As you want to put the small image in the top right corner of the large image you need to make the DIV the same width as the large image, or it'll span the whole page and the small image will be as far out to the right as it can get.

YOU. SIR. ARE A GOD! Thank you oh so much!!!
Although, you don't like donuts :/ This is going to be a bit of a problem :/ haha. Jk Thanks so much!!!!

This post has been edited by SecPoint: Sep 3 2015, 05:22 AM

[pandy]

You are welcome.

A note though. Use positioning only when it's needed and with care. You didn't need it for what you used it for before, unless you wanted the positioned bit to be at the bottom of the markup but on the top of the page or something like that.

[SecPoint]

You are welcome.

A note though. Use positioning only when it's needed and with care. You didn't need it for what you used it for before, unless you wanted the positioned bit to be at the bottom of the markup but on the top of the page or something like that..

Will do, can´t thank you enough though... I have been struggling with this for literally ±2 months now.
Thank you again, so much!

[SecPoint]

You are welcome.

A note though. Use positioning only when it's needed and with care. You didn't need it for what you used it for before, unless you wanted the positioned bit to be at the bottom of the markup but on the top of the page or something like that..

Will do, will think of the tips! Can´t thank you enough though... I have been struggling with this for literally ±2 months now.
Thank you again, so much!

[pandy]

I think this concept is what most people have a hard time to get their head around to begin with, that things don't need to be positioned relative the whole page.

This is very dated, but it made it click for me once.
http://www.brainjar.com/css/positioning/

Especially read the bit about containing blocks on the first page and absolute positioning on page 4 or something.

It's in the spec too, but the above is a lighter read.
http://www.w3.org/TR/CSS2/visudet.html#x0

[Sam A]

I suggest just go for Photoshop and you can get some functions to make it smaller and image. I used Photoshop for making website design often. It provides me to various options for image design.