...

View Full Version : Text moving around depending on page size.



Louu
04-27-2011, 04:55 PM
My coding is below. I am really annoyed with this issue. My content to the left with all the links is fine. However the content that says hello is not. When I resize the page the content moves up and left. How can I make it to stay where I put it!!!!
PLEASE HELP




[coding]
<html>

<head>
<title></title>
<style type ="text/css">
html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background-color:#669966;
background-image:url("");
}






#wrap {
background:url(http://i1218.photobucket.com/albums/dd406/LhaA/Untitled5.png) repeat-y;
min-height:100%;
width:630px;
margin:auto;
position:relative;
}



#left {
float:left;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-left:500px;
}





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: 600;
color: #CC3333;
text-align: left;}

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

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


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




A:link {text-decoration: none; color: #CC3333}
A:visited {text-decoration: none;color: #CC3333}
A:active {text-decoration: none;color: #CC3333}
A:hover {text-decoration: line-through; color: black;}


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

h2
{
font-size:12px;
line-height:13px;
text-align:right;
background-color: #339900;
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 #CC3333;
color:#000000;
font-family:Arial;
text-decoration: none;}






</style>

</head>

<body>
<LINK rel="stylesheet" type="text/css" href="files/no_underline.css">

<center>
<img src=http://i1218.photobucket.com/albums/dd406/LhaA/Camera-1.png?t=1303834085 border=1
>
</center>

<div id="wrap">
<div style="position: relative; top:0px; left:0px; width:145px; height:600px; overflow:auto; float:left;"><p>
<h2>Heading</h2>
<h3><a href="URL">LINK</a></h3>
<br>
<h2>Heading</h2>
<h3><a href="URL">LINK</a></h3>
<h3><a href="URL">LINK</a></h3>
<h3><a href="URL">LINK</a></h3>
<br>
<h2>Heading</h2>
<h3><a href="URL">LINK</a></h3>
<h3><a href="URL">LINK</a></h3>
<h3><a href="URL">LINK</a></h3>
<br>
<h2>Heading</h2>
<h3><a href="URL">LINK</a></h3>
<h3><a href="URL">LINK</a></h3>
<h3><a href="URL">LINK</a></h3>
<br>
<br>
<i>Graphics and Coding by Lou.</i> <u>Don't steal </u>
</p>
</div>
</div>


<div id="wrap">
<div style="position: relative; top:0px; width:465px; height:600px; left: 165px; overflow:auto; float:main; ;"><p>
<h1>Hello</h1>
</p>
</div>
</div>

</body>
</html>
[coding]

teedoff
04-27-2011, 05:22 PM
Why use heading tags to wrap ALL your links in?/

Have a look at unordered lists.

But to your problem I would suggest you validate (http://validator.w3.org)your mark-up. As it is now it contains a few errors.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum