asked on 10/7/2011

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.

CSS HTML Web Development

Last Comment

LZ1

10/7/2011

LZ1

10/7/2011

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

10/7/2011

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

10/7/2011

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

10/7/2011

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

10/7/2011

Are you updating the live link above?

Marisa

10/7/2011

ASKER

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

LZ1

10/7/2011

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

10/7/2011

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

10/7/2011

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

10/7/2011

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

10/7/2011

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

10/7/2011

ASKER

Sorry. Line 243.

ASKER CERTIFIED SOLUTION

LZ1

10/7/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Marisa

10/7/2011

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

10/7/2011

Glad we got it!