Layout Problems

Clinton · December 9, 2008

When I created my layout it looks fine at the resolution I am using (attached normal image) If I make my resolution to 800x600 (attached small image) it screws everything up. How do I fix this?

CSS File:

A {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1em;}
A:link {color: #33FF33;}
A:visited {color: #33FF33;}
A:hover {text-decoration: none; color: #ff9900;}
A:active {color: red;text-decoration: none}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
background-color: #3344DD;
margin: 0;
padding: 0;
}

div#header {
height: 2em;
margin: 0%;
padding: 0%;
border-bottom: solid #000 3px;
background-color: #3298DC;
}

div#login {
color: #33FF33;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: .8em;
position: relative;
top: 6px;

 }

input.first {
     border : 1px solid Black;
     background-color : #CCCCCC;
     color : #000000;
     font-size : .8em;
     font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-weight : bold;
     height: 15px;
      }

div#backsplash {
height: 22em;
margin: 0%;
padding: 0%;
border-top: solid #000 3px;
border-bottom: solid #000 3px;
background-color: #3298DC;
position: absolute;
top: 10em;
width: 100%;
}

div#leftcolumn {
height: 18em;
width: 25%;
margin: 0%;
padding: 0%;
border-top: solid #000 3px;
border-left: solid #000 3px;
border-right: solid #000 3px;
border-bottom: solid #000 3px;
background-color: #98DC32;
position: absolute;
top: 12em;
left: 1em;
}

div#topcolumn {
height: 10em;
width: 43%;
margin: 0%;
padding: 0%;
border-top: solid #000 3px;
border-left: solid #000 3px;
border-right: solid #000 3px;
border-bottom: solid #000 3px;
background-color: #98DC32;
position: absolute;
top: 12em;
left: 17.8em;
}

div#bottomcolumn {
height: 7em;
width: 43%;
margin: 0%;
padding: 0%;
background-color: #3298DC;
position: absolute;
top: 23em;
left: 17.8em;
  }

div#rightcolumn {
height: 18em;
width: 25%;
margin: 0%;
padding: 0%;
border-top: solid #000 3px;
border-left: solid #000 3px;
border-right: solid #000 3px;
border-bottom: solid #000 3px;
background-color: #98DC32;
position: absolute;
top: 12em;
left: 46em;
}

HTML File:

<html>

<head>

<title>A Work in Progress</title>

<link rel="stylesheet" type="text/css" href="style/primary.css" />

<SCRIPT>
function clearDefaultandCSS(el) {
if (el.defaultValue==el.value) el.value = ""
}
</SCRIPT>


</head>

<body>
        <div id="header">

		<form name="login" action="checkuser.php" method="POST">
		<div align="right" id="login"><topr>Login: <INPUT class="first" TYPE=text name=username size=15 maxlength=255 value="username" ONFOCUS="clearDefaultandCSS(this)"> <INPUT class="first" TYPE=password name=password size=15 maxlength=255 value="password" ONFOCUS="clearDefaultandCSS(this)"> <INPUT class="first" TYPE=submit value="Submit"> <a href="join_form.html">Register</a></topr></form></div>

	</div>

  		<div id="backsplash">
	</div>

	<div id="leftcolumn">
	</div>

	<div id="topcolumn">
	</div>

	<div id="bottomcolumn">
	Blazay Blazay Blazay
	</div>

	<div id="rightcolumn">
	</div>

</body>
</html>

[attachment deleted by admin]

haku · December 9, 2008

Your problem is that you used absolute positioning for everything. Remove your absolute positioning, look into floats. Your design is going to require a re-do, as nothing is going to look the same when you remove the absolute positioning.

dbrimlow · December 11, 2008

position: absolute!!

Why are you surprised that it stays where you tell it to?

position: absolute is NOT meant to be used for a flexible wire-frame layout. By its very definition it is positioned ABSOLUTELY where you tell it to be (regardless of any html within it or around it.

You need to use "floats" for your columns.

Also, setting your body font size at 1em does not give you a relative baseline different than the browser default size (IE @16pixels, Safari @ 13 pixels, firefox @14pixels)

Using 1em in the body font-size is the same as using 100% - it says use the default as a baseline (which is differewnt in each browser).

I personally prefer using "small" which is somewhat more relative across browsers (although still a little large in general @14px across the board). I adjust it by creating a page wrap using .9em - which means 1em is thereafter equal to .9em of small (@12px)

No one has figured out the perfect relative ratio yet - although some have come close (until you get beyond two levels deep).

using 62.7% for the body is similar to 10px. That means you can use an em size based on the actual base 10 "relative" font size you want:

1em = 10px

1.2em = 12px

1.4em = 14px

2.0em = 20px

etc.

This is genius ... until you get two levels embedded into a box and change the font size.

If you are in a box with a font size of 1.2em (12px) and embed a new box with a size of 1em, 1em is no longer based on 10, it is based on a percentage larger - which means 1em now becomes based on 1.2em and not a clean base 10.

Used carefully the 62.7% body size works like magic. But once you lose the base 10 the confusion is worse than this explanation!

invertrio · December 17, 2008

Try using this as a model:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
  <head>
    <title>3-Column Div</title>
    <style type="text/css">
      body {
        background: #3344DD;
        margin: 5px;
      }
      div.header {
        background: #3298DC;
        border: 1px solid #000000;
      }
      div.wrap {
        background: #3298DC;
        border: 1px solid #000000;
        padding: 5px;
      }
      div.center {
        background: #98DC32;
        border: 1px solid #000000;
        margin: 0 210px 0 210px;
      }
      div.left {
        background: #98DC32;
        border: 1px solid #000000;
        float: left;
        left: 0;
        width: 200px;
      }
      div.right {
        background: #98DC32;
        border: 1px solid #000000;
        float: right;
        right: 0;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <p>Some header content.</p>
    </div>
    <div class="banner">
      <p>Banner space.</p>
    </div>
    <div class="wrap">
      <div class="left">
        <p>Some left content.</p>
      </div>
      <div class="right">
        <p>Some right content.</p>
      </div>
      <div class="center">
        <p>Some center content.</p>
      </div>
    </div>
  </body>
</html>

It works in Firefox 3 and IE 7. I don't have other versions to test it with right now.

Sign In

Layout Problems

Recommended Posts

Clinton

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

invertrio

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information