Can Anyone Make This Code Float Or Liquid? [Archive]

NADB

12-22-2006, 10:09 AM

I would like to say thanks in advance if someone could help me with this. I would like to get this section of code to float up or down as page strecth down or up. I hope I asked that right! Here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>TITLE>
<style type="text/css">
a {color#0000F2}
</style><style type="text/css">
.linkone a {
color:0000F2;
}

.linktwo a {
color:B91806;
}

.linkthree a {
color:000000;

}

.linkfour a {
color:ffffff;

</style>
<style>

</style>

<STYLE type="text/css">
div#container
{
width: 1358px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body
{
text-align: center;
margin: 0;
}
</STYLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<DIV id="container">
<IMG src="" alt="" align="top" border="0" width="420" height="0" style="position:absolute;left:192px;top:125px;width:420px;height:0px;z-index:0">
<IMG src="" alt="" align="top" border="0" width="822" height="2" style="position:absolute;left:105px;top:527px;width:822px;height:2px;z-index:1">
<IMG src="" alt="" align="top" border="0" width="822" height="6" style="position:absolute;left:105px;top:530px;width:822px;height:6px;z-index:2">
<DIV style="position:absolute;left:153px;top:536px;width:76px;height:18px;z-index:3" align="left">
<p class="linkone"><font face="'arial', serif" class="size10" color="ffffff"><a target="_self" href="http://"><b>Home </a><br></b></font></p>
</DIV>
<DIV style="position:absolute;left:282px;top:536px;width:121px;height:18px;z-index:4" align="left">
<p class="linkone"><font face="'arial', serif" class="size10" color="ffffff"><a target="_self" href="http:///page.asp?page_id=14682"><b>About Us </a><br></b></font></p>
</DIV>
<DIV style="position:absolute;left:435px;top:536px;width:137px;height:18px;z-index:5" align="left">
<p class="linkone"><font face="'arial', serif" class="size10" color="ffffff"><a target="_self" href="http:///page.asp?page_id=14684"><b>Private Policy </a><br></b></font></p>
</DIV>
<DIV style="position:absolute;left:795px;top:536px;width:100px;height:18px;z-index:6" align="left">
<p class="linkone"><font face="'arial', serif" class="size10" color="ffffff"><a target="_self" href="http:///page.asp?page_id=14686"><b>Contact Us </a><br></b></font></p>
</DIV>
<DIV style="position:absolute;left:617px;top:536px;width:123px;height:18px;z-index:7" align="left">
<p class="linkone"><font face="'arial', serif" class="size10" color="ffffff"><a target="_self" href="http:///page.asp?page_id=14685"><b>Terms Of Use </a><br></b></font></p>
</DIV>
<DIV style="position:absolute;left:771px;top:553px;width:161px;height:12px;z-index:8" align="left">
<FONT style="font-size:9.3px" color="#000000" face="Arial"> </FONT>
</DIV>
</DIV>
</BODY>
</HTML>

mwinter

12-22-2006, 03:42 PM

I would like to get this section of code to float up or down as page strecth down or up. I hope I asked that right!

Not really. Do you mean you want to fix the position so that whilst the page scrolls up or down, it stays still?

In any case, the markup you posted is a mess.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

No newly-created document should be using the Transitional document type. We are past presentational markup: CSS is quite sufficient, now. Use a strict document type.

<TITLE>TITLE>

Syntax error.

a {color#0000F2}

Property names need to be separated by a colon from the accompanying value. A color declaration should also be paired with a background declaration. One cannot rely on defaults being the same across all visitors, and they won't be.

.linkone a {
color:0000F2;

Hexadecimal colour notation must begin with a hash symbol (#). This error is frequently repeated.

<style>
<!--

Missing type attribute.

The practice of "hiding" the content of script and style elements is outdated and has been unnecessary for years.

a{text-decoration:none}

Never remove the underline on all links. Where, through locational context alone, it's obvious that something is a link, it's acceptable. However, glyph style or colour should never be used to identify a link within text.

div#container
{
width: 1358px;

How wide? Creating horizontal scrollbars is among the worst sins in Web development.

<BODY bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000">

Remove all of those attributes: use CSS.

<IMG src="" alt="" align="top" border="0" width="420" height="0" style="position:absolute;left:192px;top:125px;width:420px;height:0px;z-index:0">
<IMG src="" alt="" align="top" border="0" width="822" height="2" style="position:absolute;left:105px;top:527px;width:822px;height:2px;z-index:1">
<IMG src="" alt="" align="top" border="0" width="822" height="6" style="position:absolute;left:105px;top:530px;width:822px;height:6px;z-index:2">

What's all that about? Images with no content, either visual or textual?

<font face="'arial', serif" class="size10" color="ffffff">

The font element is evil. Never use it.

<a target="_self" href="http://">

That is an invalid URI. Presumably you meant "/".

<b>Home </a><br></b>

Overlapping elements.

These last few errors are repeated several more times.

Private Policy

The term is "privacy policy".

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>…</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}
body, body * {
font: 100%/1.2 Arial, sans-serif;
}
body {
background: #ffffff;
color: #000000;
padding: 0.5em;
}

.footer, .footer .navigation {
border-top: solid #000000;
}
.footer {
border-top-width: 1px;
font-size: 85%;
margin-top: 1em;
}
.footer .navigation {
border-top-width: 3px;
margin-top: 2px;
padding-top: 0.25em;
text-align: center;
}
.footer .navigation a:link, .footer .navigation a:link:hover,
.footer .navigation a:visited, .footer .navigation a:visited:hover {
background: transparent;
color: #0000f2;
}
.footer .navigation a:link, .footer .navigation a:visited {
text-decoration: none;
}
.footer .navigation a:link:hover, .footer .navigation a:visited:hover {
text-decoration: underline;
}
.footer .navigation li {
display: inline;
margin: 0 0.4em;
}
</style>
</head>

<body>
<div class="footer">
<ul class="navigation">
<li><a href="/">Home</a></li>
<li><a href="/page.asp?page_id=14682">About Us</a></li>
<li><a href="/page.asp?page_id=14684">Privacy Policy</a></li>
<li><a href="/page.asp?page_id=14686">Contact Us</a></li>
<li><a href="/page.asp?page_id=14685">Terms of Use</a></li>
</ul>
</div>
</body>
</html>