Best way to handle positioning in a website
Question by user1173371
My positioning of certain items on my web page keep moving slightly when i develop them on a big screen and display on a small screen they are out of position slightly, and vice versa.
this never happened me before but this is also the first site i am developing in asp.net here’s my CSS
#backb{
position:absolute;
left :22%;
bottom:10%;
}
#backf{
position:absolute;
left :12%;
bottom:0%;
}
#avatar{
position:absolute;
left :55%;
bottom:45%;
}
Answer by Starx
There is no such thing as best positioning while designing a page. You should use the techniques that are cross compatible across browsers and different systems.
In your CSS, you are using
position: absolute;
While using this style the element is positioned relative to its first positioned ancestor element. So, by default, its position will be relative to that of <body>.
Next, you are using percentage(%) values of assigning the different positions of the elements. This values are calculated by browser with respect to first relatively positioned ancestor, which is also by default <body>, so every time the resolution changes the template will shift accordingly.
Now, some pointers from me.
- Do not use
position:absoluteunless its absolutely necessary. - Using percentage% values always lead to fluids result, so if you don’t know how to handle it don’t use it.
