CSS positioning

chocolate boy123

Hi I'm after making a college website for an assignment and did it on my laptop moved every element with relative positioning now when I put it on the College computer the elements are shifted how can I stop this? Help needed very badly thank you.

blue4ever

chocolate boy123 wrote: »

Hi I'm after making a college website for an assignment and did it on my laptop moved every element with relative positioning now when I put it on the College computer the elements are shifted how can I stop this? Help needed very badly thank you.

With the laptop the site was most likely in a restrained width - the laptops screen width - say 1000px for example.
Move the site to screen of 1200px and the site might possibly be expanding to that width (width might be set at 100%) thus shifting the elements.

Try restraining the site in a 1000px div (or whatever the laptops width was) and not let it expand.

chocolate boy123

blue4ever wrote: »

With the laptop the site was most likely in a restrained width - the laptops screen width - say 1000px for example.
Move the site to screen of 1200px and the site might possibly be expanding to that width (width might be set at 100%) thus shifting the elements.

Try restraining the site in a 1000px div (or whatever the laptops width was) and not let it expand.

Did it and it changed the width but everything was positioned differently but still all over the place!

Buford T Justice

chocolate boy123 wrote: »

Did it and it changed the width but everything was positioned differently but still all over the place!

Have you widths and padding set as a %age or in px?

chocolate boy123

Have no padding on the site but set width to all different sizes and checked

colm_c

I know it's not what you want to hear, but don't use relative or absolute positioning for the entire site.

Floats and flexbox are some of the best ways to layout.

tricky D

If you want and quicker and definitive answer, it's so much easier to help you out if you post up the full code or page, not just snippets. If you want to strip out certain identifying type stuff, do that. Otherwise we're just guessing in the dark and many people who can help just won't bother.

chocolate boy123

can you explain why relatives positioning is bad? My course is mostly programming so trying to learn most web design on my own.. why is relative not reccomended thank you.

chocolate boy123

Getting worried as I use relative positioning on everything lol

Talisman

It would be easier for people to help you if they can see what you're referring to or the code. Your could create a Code Pen and post a link to it here. You can replace the images with links to placehold.it.

chocolate boy123

No need to post it I think I know the problem, I could be wrong tho. Is it because I've every element relative positioned so when I'm on the bigger screen it's moved differently

chocolate boy123

Started over using flex box for positioning. This will keep the position the same on all screens?

Buford T Justice

It really depends on the what elements you've used and how you've used them.

colm_c

chocolate boy123 wrote: »

Started over using flex box for positioning. This will keep the position the same on all screens?

CSS is somewhat of an artform combined with technical expertise.

I suggest doing some tutorials to better understand how to layout screens in css. There is no one magic fix.

Flexbox is great, but has its limitations including not working in some old browsers.

chocolate boy123

I've used flexbox to do a 3 col layout any good websites with css tutorials?

chocolate boy123

What do ye use to position and why?

Talisman

chocolate boy123 wrote: »

No need to post it I think I know the problem, I could be wrong tho. Is it because I've every element relative positioned so when I'm on the bigger screen it's moved differently

For somebody who needed help very badly, you have provided very little information. The people that might be inclined to help you can only guess as to what issues you are facing.

What is the structure of the content? A basic outline of your HTML would help. Have you used a design pattern or is the structure something you put together yourself?

How do you want the content positioned? The only information you have provided is that you have used relative positioning for all elements. Presumably you have used the positioning attributes (top, left, bottom or right) for these elements.

Flexbox can help you position blocks in container elements. Chris Coyier has put together a very good guide to using Flexbox which may help you. A Complete Guide to Flexbox

Based upon your response, I'm guessing that you haven't defined a container width for the page. By that I mean you wrap the content of the body element in a div and give it an appropriate id attribute such as "page-wrapper". Then in your style sheet you set a width and margins to centre the container.

e.g.

#page-wrapper {
  width: 800px;
  margin: 0 auto;
}

This CSS rule will restrict the width of the container element to 800 pixels and horizontally position it in the centre of the screen. Now no matter how large the screen, the content will be positioned within the centre 800 pixels. You can adjust the width property to suit your initial design. This should be your starting point.

mwrf