Member Avatar for rotten69

Hi everyone,

I have had this question for a very long time and am not sure about fixing the problems with different screen sizes. Recently, I designed a website on 10 inch screen laptop and when I opened it on the other laptop that is 15 inch screen. I could see the navigation bar elements were very much everywhere. I'd like to know how to fix this problem. I want my website to be viewed as it was designed on all screens.

I am sure there are some people who have got the same query.. If this thread is made sticky in this forum, that be very useful to others, I think.

Cheers,

  • 4 Contributors
  • 12 Replies
  • 153 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Oxiegen
Member Avatar for Oxiegen

Add a div and use it as a wrapper and put all the content in that.
You can use either an external CSS and create a class for the wrapper and state a width and height, or use an inline-style to state width and height.

<body>
    <div class="wrapper">
        --- CONTENT ---
    </div>
</body>

<body>
    <div style="width: ?px; height: auto;">
        --- CONTENT ---
    </div>
</body>
Member Avatar for rotten69

What are you trying to show here? Using a div and giving an Id or class id in order to call it in an external CSS file? So, Applying auto to the props width an height will solve the problem? I will try it in the morning and get back with a def answer.

Member Avatar for JorgeM

If you post your CSS and HTML, it would be easier to help you.

Member Avatar for Oxiegen

I only put auto on the height.
Because you stated that you wanted your design to look similar on other screens as it does on a 10 inch monitor.
Then you need to figure out what the optimum width is based on the smaller screen, but height should be set to auto because content has a tendency to grow vertically.

I showed two ways to do the same thing.

Member Avatar for rotten69

Yeah, the problem is with the width. How do I configure it? What is the best solution?

Member Avatar for JorgeM

If you are using CSS, set the width property to a specified value for the outer div. For example..

{width:1000px;}

Member Avatar for Oxiegen

It all pretty much comes down to screen resolution.
Which is a tricky thing to predict.
If your 10 inch monitor have a maximum resolution of 1024x768 pixels.
Then I would say that about 1000px is the maximum limit of the width that you can set.

Luckily CSS provides you with two tags that allows you to create a range of widths.
min-width
max-width

<body>
    <div style="min-width: 920px; max-width: 1000px; height: auto;">
        --- CONTENT ---
    </div>
</body>

But if you feel like experimenting a bit, then you can lock the width.
Replace ? with a numeric value.

<body>
    <div style="width: ?px; height: auto;">
        --- CONTENT ---
    </div>
</body>
Member Avatar for almostbob

% as layout dimensions, current best practice,
scalar units that auto adjust to window size resolution user preference and device ability
there are 800 px in a 15 inch crt
2670 in a 7 inch iphone
3020 in this 19 inch led monitor
px will never look the same, and never work in any device except the one the screen was laid out on

body {width:98%;}
.menu { width:19% }

produce 5 autosizing menu items
(rough as guts, this is an airport lounge)
all the pixel hacks ever described, do NOT work in every device
look stupid as a narrow central column in a widescreen device
push content offscreen in small devices or partscreen windows

Member Avatar for Oxiegen

True enough.
But it has to be agreed upon that both methods has their merrits and drawbacks.
My experience with using % is that things has a tendency to move around alot and not always staying in the shape or place I want them to. :)

It's fair to say that a container (body, div and so on) with a width set in % absolutely do adjust to any changes in resolution and/or browser window size.
But you also have to take into consideration the content within the container, and whether or not you care if it looks good on a cell-phone if you only target computer monitors.
In some instances it is justifiable to accept both vertical and horizontal scrollbars. Even if you don't like them. :)

So, my suggestion to rotten69 is to experiment with both techniques to see what suits you the best.

Member Avatar for rotten69

Thanks for the responses. The only trouble I experienced was the menu. I viewed the website on 10 inch screen and it was perfect however, viewing it on 15 inch screen was kinda dodgy. What would happen if I set the width to 100% for the menu and content-div? I wonder if this would overcome problems with autosizing.
what does the property 'auto' do?

Member Avatar for rotten69

I have never used ? mark in css. What is it supposed to do?

> But if you feel like experimenting a bit, then you can lock the width.
> Replace ? with a numeric value.
> 
>     <body>
>     <div style="width: ?px; height: auto;">
>     --- CONTENT ---
>     </div>
>     </body>
Member Avatar for Oxiegen

The question mark (?) was just an indicator telling you to put a numeric value there.
A question mark is also known as an "unknown". :)

Auto is not a property, it's a valid value to simply allow the container to expand depending on whatever the size of the content without regards.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.