[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2011-10-07
15
Medium Priority
?
283 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:underrugswept
  • 8
  • 7
15 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 36931766
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

0
 
LVL 1

Author Comment

by:underrugswept
ID: 36932142
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?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36932273
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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Author Comment

by:underrugswept
ID: 36932290
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;
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36932307
Are you updating the live link above?
0
 
LVL 1

Author Comment

by:underrugswept
ID: 36932323
No. I don't want our customer to see my messed up tests.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36932348
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?
0
 
LVL 1

Author Comment

by:underrugswept
ID: 36932443
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.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36932510
How many CSS files are you calling? We should be able to get it with just CSS

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

Author Comment

by:underrugswept
ID: 36932560
#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" />
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36932575
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?
0
 
LVL 1

Author Comment

by:underrugswept
ID: 36932585
Sorry. Line 243.
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 1000 total points
ID: 36932608
There it is now. Had to hard refresh. :)  

But it's only showing this:
#delivery {
    right: 0;
 }

It should be this:
#delivery {
    right: 0;
    position: absolute;
    top: 0px;
}
0
 
LVL 1

Author Comment

by:underrugswept
ID: 36932667
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!!
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36932675
Glad we got it!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question