How do I make my webpage scale-able depending on the size of the browser window?


Tags: html,css

Problem :

I just made my first website, and I notice that the elements start to look weird and clumped together if the browser window gets too small or so. I was wondering how to make the elements scalable

Relevant HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Andrew Louis, University of Toronto</title>
    <link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="javascript/jqueryscript.js"></script>
    <script src="javascript/popup.js"></script>
    <script language="JavaScript">
        var i = 0;

        imageObj = new Image();

        images = new Array();

        images[0] = "images/book-black.png";
        images[1] = "images/male-black.png";
        images[2] = "images/telephone-black.png";

        //Start preloading
        for (i = 0; i<=2; i++)
        {
            imageObj.src=images[i];
        }
    </script>
<body>

        <div id="heading"> 
            <span class="border">Andrew Louis</span>
            <div id = "subheading">
            <p> <br /><b>Andrew</b> is a big fan of grandiose ideas that propel change, imaginative software,<br /> innovative web design, and caffè americanos.</p>
            </div>
        </div>

        <!-- <div id="footer">      -->
            <div class="nav_wrapper">
                <ul class = "Fade" id="list_orientation">               
                    <li id="about"><a href="AboutMe.html"><img src = "images/male.png" height = '50' width = '50' /></a></li>
                    <li id="port"><a href="Portfolio.html"><img src = "images/book.png" height = '50' width = '50' /></a></li>
                    <li id="contact"><a href="Contact.html"><img src = "images/telephone.png" height = '50' width = '50' /></a></li>
                </ul> 


            </div>
        <!-- </div> -->



</body>
</html>

Relevant CSS:

.Chunk{
    font-family:'ChunkFiveRomanRegular';
}

.Museo{
    font-family:'MuseoSlab500Regular';
    font-size:20px;
}


.nav_wrapper {
    position:fixed;
    color:#000;
    left: -100px;
    right: 0px;
    bottom: 0px;
    text-align:center;
    height:225px;
    /*background:white;
    border-style:dotted;*/
}

.global_nav{
    position:fixed;
    float:bottom;
    padding:5px;
    color:#000;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align:center;
    height:17px;
    font-size:10px;
    background:white;
}

#portfolio_text{
    text-align:center;
}

#heading{
    font-family:'Lobster1.3Regular';
    color:#D04D21;
    position: absolute;
    font-size:80px;
    top: 10%;
    left: 0px;
    width: 100%;
    height: 1px;
    text-align:center;
    text-shadow: 0 0 2px rgba(0,0,0,0.9);
}

.border{
    border-top: 1px solid #D04D21;/*#000000;*/
    border-bottom:1px solid #D04D21;/*#000000;*/
    padding:20px;
}

.rounded_border{
    border:2px dashed;
    padding:10px 40px; 
    border-radius:25px;
}

body{
background:#FFFFFF;
}

#subheading{
    font-family:'MuseoSlab500Regular';
    text-align:center;
    font-size:25px;
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
}


#list_orientation li a {
    text-decoration:none;
    text-align:center;
    color:black;

}
#list_orientation li{
    display:inline-block;
    padding:50px;
    height:50px;width:50px;
    text-align:center;
    width:20%;
    margin-left:3%;
}


.Fade img{
    border-style:dotted;
    /*  opacity:0.4;
    padding:10px;
    padding-bottom:20px;*/
    background:white;
    border-color:#D04D21;


    padding: 2em 2em 2em 2em;
    -moz-border-radius: 5em;
    -webkit-border-radius: 5em;
    border-radius: 5em;
}

.Fade img:hover{
    background:#D04D21;
    border-color:white;
}

#pup {
  position:absolute;
  z-index:200; /* aaaalways on top*/
  text-align:center;
  font-family:'ChunkFiveRomanRegular';
  padding: 3px;
  margin-left: 10px;
  margin-top: -5px;
  width: 120px;
  border: 1px solid black;
  background-color:white;
  color: #D04D21;
  opacity:0.9;
  font-size: 1em;/*0.95em;*/
}

.Entypo{
    font-family:'EntypoRegular';
    font-size:100px;
}


a{
text-decoration:none;
color:#D04D21;
}


Solution :

This can vary a lot depending on the effect you want to create.

The easiest way would be to set the min-height and min-width of the body (or a new top level div) and have the user scroll in a smaller browser window.

Most solutions you will come up with will probably involve messing around with these min-height and min-widths of various elements!

However, a 'better' solution would be to avoid position: absolute or fixed. These do not scale well. Try using padding and margin on divs to get the desired effect instead.


    CSS Howto..

    how can i create true loop?

    How to make image stretch to a specific paragraph?

    How do you select a radio button in css?

    How do I align columns in thead and tbody when tbody css display attribute is block

    How to apply css for a class within h2?

    How to make columns scroll independently using CSS?

    How I can add highlight effect on outside the area of selection with CSS?

    By CSS, how to make page height not change when an element is moved down

    how to change, in CSS files, src attribute for images dynamically at deploy? (ASP.NET Web Forms)

    How to manage z-index of navigation menu?

    How to have different input text styles in same html form?

    How to read property value of a DIV which is set by a CSS class?

    How to avoid orphaned headings in CSS columns?

    margin-top set by jQuery makes content jump. How can I make it smoothly animate?

    How to override\edit Zurb Foundation base CSS styles?

    How to keep height of parent div with absolute positioned img inside?

    How do you show just the first line of text of a div and expand on click?

    How to remove or reset CSS style using JS?

    How to get an interactive geographic map for a country? [closed]

    How to add separate style to google.visualization.DataTable without changing its own styles

    HTML - How do I insert a tag into each line of a
     block without hard coding?

    How to remove default chrome style for select Input?

    How to remove unwanted white space in CSS

    How do I align my label to the left of my text input box with CSS?

    How set the same height of divs

    How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

    How to assign a Css class on an item based on click

    How to center an image .logo via css? [duplicate]

    How can I get images floated to the left of other definition list elements?

    How do I remove the white space around my html forms?