asked on

Make something appear in top corner of page, regardless of resolution

Below you can see what the site I am working on currently looks like:
http://goo.gl/a7AMZ

The following shows what i would like to achieve:
http://goo.gl/hpCa4

You'll notice in the top right corner I added a little box that says "fast delivery times."
I want that box to always be touching the top right corner on everyone's screen, regardless of resolution.

LZ1

If you can get away with just using CSS:

1) Give your element an ID like: #fastDelivery
2) Place the CSS below
3)Let us know

#fastDelivery{position:absolute:top:0px;right:0px;}

Open in new window

Marisa

ASKER

So I put your line of code in the style.css file.

I am assuming I'd place the following in the html file?
<img src="images/delivery.png" id="fastDelivery">

Where do I place it? Can I just place it anywhere, since the css tells it where it will appear?

LZ1

I would place it as the very first thing after the body tag.
<body>
<img src="images/delivery.png" id="fastDelivery">

<rest of code here >

That way you have the best shot of it working consistently cross-browser/cross-resolution.

Marisa

ASKER

Nope, it just puts it at the top left of the page as if there were no id=delivery applied to it.

Do I need to play with these values?
top:0px;right:0px;

LZ1

Are you updating the live link above?

Marisa

ASKER

No. I don't want our customer to see my messed up tests.

LZ1

I totally understand. Can you make a separate page for this issue and make it live? We may end up using Javascript or Jquery to achieve the desired result. Are you opposed to that kind of solution?

Marisa

ASKER

http://goo.gl/PFHoL

As you can see, I'm using the image of the bag to test it. And I called the id "delivery" instead of fastDelivery.

LZ1

How many CSS files are you calling? We should be able to get it with just CSS

#delivery{position:absolute;top:0px;right:0px;}

Marisa

ASKER

#delivery{position:absolute;top:0px;right:0px;}

That exact line is in the style.css file

I'm calling the following:
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />

LZ1

It's not showing up in the CSS file on my side.
Are you sure you uploaded the changes? What line number should I be looking on?

Marisa

ASKER

Sorry. Line 243.

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Marisa

ASKER

I don't know why you were seeing something different. I had the full line in there, but I copied and pasted it exactly as you have it above with the line breaks and it worked!! Thanks so much!!

LZ1

Glad we got it!