CODEWITHSUNDEEP
htmlcss
user2545642
user2545642

Reputation: 345

How can I make my web page look good in browser windows of different sizes?

I've got a question about optimizing webpages... hmm, let me start over from the beginning.

HTML Code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <title></title>
</head>
<body>

    <div id="header"> Text... </div>
    <div id="body"> </div>

</body>
</html>

CSS Code:

#header
    {
        background-color: green;
        width: 50%;
        height: 25%;
        left: 25%;
        position: absolute;
    }

#body 
    {
        background-color: red;
        width: 50%;
        height: 55%;
        left: 25%;
        top: 25%;
        position: absolute;
    }

The problem is that whenever I minimize the window a bit, my divs shrinks together. That's not how I want it to appear. After figuring out a while how to solve this problem I came up with this "great" idea to make a div wrap that cover all the other divs.

So then my divs need a wrap right?

<div id="wrap"> 
    <div id="header"> </div>
    <div id="body"> </div>
</div>



#wrap {
    width: 600px;
    height: 800px;
    position: absolute;
}

Now in my css code I need to set the px of height and width of the wrap div, right? Now this will work but the problem is. How do I get to optimize this then on another computer screen? I mean this wouldn't work on all the users right?

Anyway.. Let me repeat the question once again... How do I my webpages to optimize to minimizing windows in the browsers and to work on all screens? I mean everything has to relate to pixels right? Now how the ** is that suppose to work If all the screen has different size's? I mean then you need to use the % to make it work. I don't want you guys to mainly sort of this exactly problem but give me some advice how to generally optimize a webpage in the best way.

Upvotes: 1

Views: 2020

Answers (2)

Mike Phils
Mike Phils

Reputation: 3505

Four your above code: you can use:

#wrap {
margin:0 auto;
    width: 600px;
    height: 800px;
    position: absolute;
}

instead of

#wrap {
    width: 600px;
    height: 800px;
    position: absolute;
}

And to make make your webpage look same when window is re-size or you have to learn abut Responsive Web Development. Start using media queries in you pages. For responsive design use media queries: Here is good example of media queries . Also learn how to use it.

Upvotes: 1

user238801
user238801

Reputation:

Ok here is what I usally do:

Whenever I want to create a website that doesn't fill 100% of the page I create a wrapper around ALL the content, like you did. You can either do this with fixed values or with % values. In case you want to use % values it's often smart to use min-width or max-width for your wrapper. This way you only need to define fixed values once and all the inner content can be defined by using %. This helps especially if you want to resize the whole content later on, if your realize that it might look better with a little bit more width.

Height values rarely use % values, only use % values for the height if you are using a fixed height for your container. If you want to create different layouts for different screen resolutions you can always have a look at the @media tag which allows you to create resolution specific css code. This however is only recommended for a small set of resolutions, let's say, 2 different resolutions for desktop computer and maybe 2 different resolutions for mobile phones (4 different css definitions).

I usually try to use min-width and max-width with % values, and if that isn't possible for example for popup windows or fixed elements like a sidebar I use px values. And if I for example want to support multiple columns for my content if the user has larger screens I make use of @media

I also don't get why you're using absolute positioning. If you just want to center content use margin: 0 auto; on your container. Btw in html5 you can also use the <header> tag if you want to specify a header. Using a div and giving it a class/id isn't wrong but I think you should know that there is some new stuff out there in the world of html5/css3

EIDT: Your title is a little bit confusing, since your question is totally different. For website optimization I strongly recommend http://developer.yahoo.com/performance/rules.html or for advanced optimization you can use https://developers.google.com/closure/ and https://code.google.com/p/closure-stylesheets/

Upvotes: 2

Related Questions