CSS Layout Problems

Apostle posted this at 20:59 — 23rd February 2004.

They have: 2 posts

Joined: Feb 2004

Thank you for looking at this

I'm attempting to use css absolute positioning where I used to use tables, and I'm having a bit of difficulty. I want to use a 3 column design (Yes, I know, standard and cliche) with the middle column being about 500 pixels wide, and the side columns each being about 130 pixels wide. However, my problem is positioning them. They don't seem to want to stay in the areas I want them to (obviously my error).

I'm using the following code on the page:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "3column.css";
</style>
</head>

<body> 
<img src="/images/logo.jpg" alt="Logo" width="750" height="115" />
<div class="link-list1"> <img src="/images/nav.gif" alt="Navigation" /><br />
  - <a href="http://www.theapostleofgod.com" >Home</a> <br />
  - <a href="/tos">Original Series</a> <br />
  - <a href="/tng/index.html"> Next Generation</a> <br />
  - <a href="/ds9">Deep Space 9</a> <br />
  - <a href="/voy">Voyager</a> <br />
  - <a href="/ent">Enterprise</a> <br />
  - <a href="/mov">Movies</a> <br />
  - <a href="/forums/">Forums</a> <br />
  - <a href="/store/">Store</a> <br />
  - <a href="/about/">FAAQ</a> </div>
<div id="main">

<img src="http://theapostleofgod.com/mov/tmp/tmpfull/0001t.jpg" /> <img src="http://theapostleofgod.com/mov/tmp/tmpfull/0001t.jpg" />
  <p class="main">
This is a test page :) This is only a test. Stop making fun 
    of me! Checking to see if it wrap... yes, it does!</p>
</div>
<div class="link-list2">
- <a href="http://www.section31.com" title="Section 31 appears to be down.">Section 
              31</a> <br />
              - <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega 
              Project</a> <br />
              - <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek 
              Today</a> <br />
              - <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN 
              </a><br />
              - <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a> 
</div>

</body>
</html>

'
and the following css

/* Properties that both side lists have in common */
div.link-list1 
		{
	width:133px;
	position:absolute;
	top:150px;
	font-size:80%;
	padding-left:1%;
	padding-right:1%;
	margin-left:0;
	margin-right:0;
	color: #bccbdc;
	left:12px;
	visibility: inherit;

		}
div.link-list2 
		{
        width:133px;
        position:fixed;
        top:150px;
        font-size:80%;
        padding-left:1%;
        padding-right:1%;
        margin-left:0;
        margin-right:0;
	color: #bccbdc;
	
		}		
#main {
	top: 0px;
	width:500px;
	margin-left: 133px;
        padding-left:1em;
        padding-right:1em;
	}

BODY 	
	{
	color:#bccbdc;
	BACKGROUND-COLOR: #000000;
	}
A:link 
	{
	COLOR: #597795; TEXT-DECORATION: underline
	}
A:active 
	{
	COLOR: #597795; TEXT-DECORATION: underline
	}
A:visited 
	{
	COLOR: silver; TEXT-DECORATION: underline
	}
A:hover {
	COLOR: #597795; TEXT-DECORATION: underline
	}
A:mailto
	{
	COLOR: #597795; TEXT-DECORATION: underline
	}

'
On my test page in Firebird, my navbars are both to the left, on top of each other

I need to put the second one to the right of the main area.
The test page I have up can is theapostleofgod.com/xhtml.html

Any help is greatly appreciated!

Apostle posted this at 21:43 — 23rd February 2004.

They have: 2 posts

Joined: Feb 2004

Problem solved...