Solved

CSS Align depending on Screen Resolution

Posted on 2013-01-21
8
383 Views
Last Modified: 2013-01-21
Hello All;

This should be a quick one.
The following code is used to align my element, however, the screen resolution differ's for all, so the element is mis-placed depending on on what size the screen is.
How can I adjust, depending on the screen resolution?

<div id="Login" style="display:none; position:absolute; right:200px; top:61px; z-index:100;">
</div>

Open in new window


Thanks All;
Carrzkiss
0
Comment
Question by:Wayne Barron
  • 4
  • 3
8 Comments
 
LVL 18

Expert Comment

by:ingwa
ID: 38801969
Screen resolution is variable so use a variable size measurement instead of px such as em or a specific percentile. em would probably be the best way to go. Then it wouldn't matter what size screen it was it would look the same across them all as it would be relative.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38802029
I tried as you suggested, and with the smaller browsers, it is still shifted badly.

<div id="Login" style="display:none; position:absolute; right:12.000em; top:3.305em; z-index:100;">

Open in new window


I am using the following site, to convert over PX to EM
http://pxtoem.com/

Could you provide a good working conversion?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38802072
As long as you are absolute positioning on a page that does not have ever single position and dimension fixed, you are going to get a shift.  The only solutions are to either make the whole page rigid and non-responsive, or use scripting to detect resolution and then set the position and that will not work if the user has javascript disabled.

If you post a link to the site we might be able to help further.

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38802104
This is one of the sites that is using it this same technique.
You will see it in the Upper Left, for the Login and Register link.
www.stayinshape.us
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 38802518
That is a 20th century table layout that is static and rigid. Using a design like that removes any possibility of fluidity or dynamic repositioning.

A different resolution does not do anything except add or remove scrollbars.

The login div is in a table cell and you cannot move a table cell; and you cannot modify it in this case without changing the whole table; and probably other stuff on the page.

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38802663
Yep, I figured as much.
Having to convert everything over to DIV, at this people, is not an option.
However, in the future it will be.

Thanks for the info Cd&
I will close this one out with your response, as it is about as good as I am going to get at this time.

Also.
Can you provide a good site for demonstrating converting from <table> to <div> layout?

Carrzkiss
0
 
LVL 30

Author Closing Comment

by:Wayne Barron
ID: 38802667
Thanks.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38802985
It is not so much about converting as it is about looking at it differently.  The basic idea is to make markup and design support content and the meaning of the content (semantic web). The old approach is to develop a design and structure and then make the content fit into the design.  The modern approach is to build structure around the content and present the content as the most important thing, not the design.  

Three other thing come ahead of design. Usability, accessibility, and respect for the user.

Perhaps these links will help you get going in the right direction:

http://coboldinosaur.com/pages/The-Perfect-Page.html
http://www.alistapart.com/
http://net.tutsplus.com/articles/the-abcs-of-web-development/
http://www.cssplay.co.uk/
http://css-tricks.com/

At first it takes a little discipline to force yourself to follow standards and develop a "best practices" approach; but you start seeing the benefit when you have to do maintenance, and it is way easier working with code that was built using modern approaches.  You quickly build a bag of tricks that let's you develop quickly because you know exactly how every element is going to behave.

Cd&
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to redirect all users but me properly to another page with htaccess 2 47
P tag not forcing line space 2 23
is this a cms? 8 35
ebay seller html tags 2 5
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

867 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now