Need some help

D

dubbd

New Member
I made a design in photoshop, but I am having problems with it not working right when I have alot of text in the body. I was hoping that someone on here may be able to help me with it. I have it designed but I just need help fixing it to where it will work correctly with large amounts of text.

Iam using a CMS script to manage the site, so I had to convert the design to a template.

Here is what the site looks like: www.gznetwork.net/main

here are the files: www.gznetwork.net/main.zip

Any help would be greatly appreciated
 
D

dubbd

New Member
Ok, i tried converting into CSS myself, it looks decent in IE6, but looks terrible in FF.
Here is the page: www.gznetwork.net/main

Here is the css code i used:
Code: 
<style>
body { background-color: #000;
	margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; }
#container { width: 771px;
			 background-color: #000;}
#header { width: 770px; height: 121px; background: #000; margin: 0px 0px;
			 
#button a{ color:#FFF; text-decoration: none; border-bottom:thin; padding: 5px 0px 0px 5px }
#button a:hover{ color:#CC0000; text-decoration: none; font-weight: bold;}
#button a:visited{ color:#FFF; text-decoration: none; font-weight: bold;}
#button {
width: 172;
float: left;
clear: left;
border-right: 0px solid #000;
padding: 5px 0 1em 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
font-size: 12px;
background-color: #331B1C;
color: #FFF;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #000;
margin: 0;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #422F17;
background-color: #331B1C;
color: #fff;
text-decoration: none;
width: 100%;
}
#navtop { width: 172px; height: 53px; margin: 0px; padding: 0px; float: left; background-color: #331b1c;}

#button li a:hover {
border-left: 10px solid #FFF;
background-color: #5C0000;
color: #fff;
}

#content {
	width: 598px;
	background-color: #12111C;
	float: none;
	padding: 1.5em 0px  175px 10px;
	color: #fff;
	margin-right: -173px;
  }
#content a { color: #990000; }
#content a:hover { color: #FFF; }
#content a:visited { color: #990000; }

#footer { padding: 15px 0px  0px 10px;
 color: #fff;
 font-size: 9px;
 text-align: center;
 border-top: solid 1px;
 clear: right;
  }
#footer a { color: #990000; }
#footer a:hover { color: #FFF; }
#footer a:visited { color: #990000; }

Here's what my html looks like in my cms:

Code: 
<html>
<head>
{metadata}
{stylesheet}
<title>{sitename} - {title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container">
	<div id="header"> <img src="/main/images/header.gif" width="770" height="121" alt=""></div>
	
	<div id="navtop"><img src="/main/images/navtop.gif"></div>
	<div id="button">
	
	<ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Artists</a></li><li><a href="#">Downloads</a></li><li><a href="#">Forums</a></li><li><a href="#">Partners</a></li></ul>
	</div>
	<div id="content">
		{content}</div>
		 <div id="footer">Boondox images and name Copyright of Psychopathic Records<br />
  &copy;2006-2007 All Rights Reserved. </div>
</body>
</html>

What am i doing wrong, and what can i do to make it look better?

Thanks
 
You must log in or register to reply here.
Top