• CSS

Posted: **Thu Aug 14, 2008 4:50 pm**

AHHH I need help on my webpage.

CSS Code

a:link {
	color: #0099FF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0033CC;
}
a:hover {
	text-decoration: none;
	color: #0066FF;
}
a:active {
	text-decoration: none;
	color: #FF0000;
}
body {
	background-image: url(../art/things-bg.jpg);
	background-color: #000000;
	margin-left:0px;
	margin-right:0px;
}

#mastercontainer
{
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:10px;
width:800px;
border:thin;
border:#000000;
border:groove;
}

#header
{
margin-left:auto;
margin-right:auto;
width:790;
background-color:#000099;
}

#footer
{
width:800px;
background-color:#000099;
color:#FFFF66;
text-align:right;
clear:both;
}

#linkbar
{
float:left;
width:15%;
padding:5px;
}

#acontent
{
float:right;
width:80%;
padding:5px;
}

#liners 
{ 
background: #cde url(../art/line.jpg) repeat-x 100% 0;
height: 128px;
z-index:-1;
}

WebPage

Code: Select all

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pantheon UO - The Free UO</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
	<div id="liners">
</div>

<div id="mastercontainer" >
	<div id="header" >
	<img src="art/banner.jpg" alt="Banner Image" />	
	</div>
	<p id="acontent" >Site Active:<br />
	  <br />
	  I am not great with PhP, so this site is done in text. If anyone has any suggestions on how to do logins and posting that would help a good bit. This is a site for the Pantheon UO shard. I wanted a truly interactive shard making use of such things as housing laying around Yew. Instead of getting lazy and making them player rentable or buyable houses. I am going to implement NPCs that can be killed, stolen from and collect things in their houses. Also they can be part of the upcoming trick or treat event for halloween. There is little to no staff interaction on this shard unless you page. All events are automatic. <br />
	  <br />
	  PantheonUO is a WIP (Work In Progress) and is not near completion.
	</p>
	<p id="linkbar" >
	<a href="/">News</a><br />
	<a href="/">Downloads</a> <br />
	<a href="/">Rules</a><br />
	<a href="/">Features</a><br />
	<a href="/">Stats</a><br />
	<a href="/">How To</a><br />
	<a href="/">About Us</a><br />
	<a href="/">Create Account </a><br />
  </p>
	<div id="footer" >
	Powered By POL&copy; Emulation - Thank You Scott and Jen &nbsp;
	</div>
</div>
</body>
</html>

http://pantheonweb.hopto.org

That blasted black bar is supposed to be behind everything.

Posted: **Fri Aug 15, 2008 5:04 pm**

Lol...

That is a POL forum (POL is a ultima online (ultima online is a mmorpg) server) you may be confusing this web site with another one.

This is not a web design forum.

search on google for "Web design forum" and ask in the results

Posted: **Fri Aug 15, 2008 5:19 pm**

Nope, I am quite aware of this. I have been here for quite a while and am very familiar with pol. CSS is a script and it is for a website related to a pol server. But thanks for the comment anyhow.

Posted: **Fri Aug 15, 2008 7:40 pm**

Yeah, I know CSS, I'm also a web designer.

But it's a question of organization, while there are people here that knows CSS, this is a POL forum.

Even your website being about POL, your question is about CSS/WebDesign and maybe HTML (I didn't read the question very well).

Posted: **Fri Aug 15, 2008 9:39 pm**

Just ignore it then. I need some help if anyone is interested.

Posted: **Sat Aug 16, 2008 4:18 am**

runtest:
I gave a quick look at your site, but can't seem to find what's wrong.
I use Firefox 3.x on Gentoo Linux, can you explain your problem better?

Posted: **Sat Aug 16, 2008 6:25 am**

There is that black bar at the top. I am trying to get tit behind the content of the site. For looks really. So instead of pushing the site down. I want it to just fall behind everything.

Posted: **Sat Aug 16, 2008 11:09 am**

You could try describing the problem more clearily, so I (and others) wouldn't have to debug e.g. what is the name of the container you want to modify etc.

Anyways, if I understood and read correctly, I suggest you to modify #liners to look like this:

It may need polishing with float statement, this I did not test myself.

Code: Select all

#liners
{
    display: absolute;
    background: #cde url(../art/line.jpg) repeat-x 100% 0;
    height: 128px;
    z-index:-1;
}

Posted: **Sat Aug 16, 2008 2:43 pm**

Ah ok, that did not do it but its the right idea. I want the liner container NOT to push the mastercontainer down. I want the liner container to fall behind the mastercontainer.

Posted: **Sat Aug 16, 2008 11:55 pm**

That should do, I think:

Code: Select all

#liners
{
    position: absolute;
    width: 100%;
    background: #cde url(../art/line.jpg) repeat-x 100% 0;
    height: 128px;
    z-index:-1;
}

Posted: **Sun Aug 17, 2008 12:08 am**

One more thing, so it ends up like this:

Code: Select all

#liners
{
    display: absolute;
    background: #cde url(line0000.jpg) repeat-x 100% 0;
    height: 128px;
    margin-bottom: -128px;
}

Tested using Opera 9.51, Firefox 3 and Internet Explorer 7 - works.

If only I did no other changes...

Posted: **Sun Aug 17, 2008 12:23 am**

For ncrsn:
"display: absolute" is not valid CSS. You should use "position: absolute", instead.

Posted: **Sun Aug 17, 2008 12:31 am**

Good point. So I had a memory failure and the end result can be trimmed even more.

CSS

CSS

Re: CSS

Re: CSS

Re: CSS

Re: CSS

Re: CSS

Re: CSS