...

View Full Version : Content Moves Around.



Louu
04-15-2011, 12:25 PM
According to browser and page size my content moves around. How do I make it so it stays in one position. This is my coding:

<style>

body
{background-image: url("http://i54.tinypic.com/309j1tw.png");
background-position: 50% 50%;
background-repeat: repeat-y ;

}



p, td
{font-family: Century Gothic;
font-size: 11px;
font-weight: 500;
color: #FFFFCC;
text-decoration: none;}



b
{font-size: 12px;
text-decoration: bold;
margin: 0px;
font-weight: 650;
color: #999966;
text-align: left;}

i
{color: #333333;
font-style: italic;}

u
{text-decoration: underlined;
color: #000000;
font-size: 11px;
}


s
{text-decoration: strikethrough;
colour: #333333;
font-size: 12px;
}

h1
{
font-size:19px;
line-height:18px;
text-align:right;
background-color: 999966;
border-bottom: 1px dotted #330000;
color:#333333;
font-family:Century Gothic;
text-decoration: none;}

h2
{
font-size:12px;
line-height:13px;
text-align:right;
background-color: CCCC99;
border-bottom: 1px dashed #333333;
border-top: 1px dashed #333333;
color:#000000;
font-family:Century Gothic;
text-decoration: none;}

h3
{
font-size:10px;
line-height:11px;
text-align:left;
background-color: ;
border-bottom: 1px dashed #999966;
color:#000000;
font-family:Arial;
text-decoration: none;}


a:link,
{font-family: Century Gothic;
font-size: 10px;
color:#000000;
text-decoration:none;
letter-spacing: 1px;}

a:hover,
{font-family: Century Gothic;
font-size: 10px;
color: #333333;
letter-spacing: 1px;}




</style>
<br>


<div style="position: absolute; top:100px; left:482px; width:464px; height:600px; overflow:auto;">

<center>
<img src=http://i56.tinypic.com/258wfic.png
>
</center>

<h1> Home </h1>
<b>Hello<br>
</b>



</div>

<div style="position: absolute; top:100px; left:316px; width:145px; height:600px; overflow:auto;">
<h2>Home</h2>
<a href=""><h3>Home Page</h3></a>
<br>
<h2>Club Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Site Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Siggys</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3>


</center>

abduraooft
04-15-2011, 12:39 PM
<div style="position: absolute; top:100px; left:482px; width:464px; height:600px; overflow:auto;">
Absolute has some pitfalls (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/) and therefore it shouldn't be used everywhere to layout the page. Make use of floats instead, when you need to have multiple columns. Have a look at http://bonrouge.com/2c-hf-fixed.php to see some good CSS based layouts.

teedoff
04-15-2011, 03:31 PM
You should look into some more modern html coding practices. <center> tag is obsolete and should instead be done with a page wrapper(div), a width, and auto left and right margins in your CSS.

Also, you should try placing all those links in an unordered list instead on all thos heading tags. Not that it doesn't "work", its just not as well formed and semantic as a well formed list.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum