Been working on this all night.....

[fewyn]

Ok I've been working on this all night..... once I get this working It'll make me like happy /bigwink.gif' class='bbc_emoticon' alt=';)' />

So here is what I got currently [url="http://www.fewyn.com/test.html"]http://www.fewyn.com/test.html[/url] the css is located at [url="http://www.fewyn.com/naruto2.css"]http://www.fewyn.com/naruto2.css[/url]

What I'm trying to do is make it look like my table version of it which is located at [url="http://www.fewyn.com/index_re.php"]http://www.fewyn.com/index_re.php[/url] which works fine but that tables and tables are ugly to look at and don't work the way I want them to.

So I'll love anyone who helps as I've been working on this problem for at least 5 hours and it wants me to claw my eyeballs out.

Thanks

If you don't feel like looking at the source here is the code

test.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/1">
	<title>Fewyn</title>
  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="naruto2.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="blog">
blog entry
</div>
<div id="side">
</div>
</div>

</body>
</html>

naruto2.css

Code: Select all

body {
    background-color: #F5E6BB;
	margin: 0;
	padding: 0; 
	}

#main {
	margin: 20px auto;
	padding: 0;
	width: 777px;
	height: 696px;
	border: 1px solid #000000;
	}

#blog {
    background: url("http://www.fewyn.com/images/layout_03.gif");
	overflow: auto;
	padding: 0;
	text-align: left;
	width: 333px;
	height: 695px;
	}

#side {
	padding: 0;
    background: url("http://www.fewyn.com/images/layout_06.gif");
	background-position: right top;
	margin-left: 333px;
	width: 442px;
	text-align: right;
	height: 696px;
    }

[fewyn]

ignore the links i gave you.... I found a temporary solution but I'd like to get it working with something more similar to the code listed above.

[Tami]

I'll have to look at this again in the morning, fewyn; I'm at the point in my day where even the unanimated smilies are moving around /blink.gif' class='bbc_emoticon' alt=':blink:' /> so if no one else has helped you by the time I drag myself out of bed I'll try to give you a hand. /smile.gif' class='bbc_emoticon' alt=':)' />

by the way, /kgw.gif' class='bbc_emoticon' alt='(kgw)' />

/smile.gif' class='bbc_emoticon' alt=':)' />

[mobil1_oils]

[img]http://forums.killagraphix.com/style_emoticons/default/kgw.gif[/img]

Sorry i'm not much of a coding guru here (as you probably worked out in da chat) but hopefully someone out there will be able to help you fix this, it's been plagueing you for days /blum.gif' class='bbc_emoticon' alt=':P' />. I know what it's like to have a code that looks perfect in code form, but doesn't work properly when executed /blum.gif' class='bbc_emoticon' alt=':P' />.

[Sp3culuM]

Here you go..

<removed to stop wasting scroll space>

[fewyn]

Yea.... that didn't realy work out as i wanted it to.... this is how it should be but i did this much with photoshop.... I've tried everything to get that to work right but it just doesn't work. [url="http://www.fewyn.com/example.gif"]http://www.fewyn.com/example.gif[/url]

[Sp3culuM]

Easily fixed..

text.html:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/1">
<title>Fewyn</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="naruto2.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="blog">

<div class="content">
CONTENT CONTENT CONTENT<br />
CONTENT CONTENT CONTENT<br />
CONTENT CONTENT CONTENT
</div>
<div class="content">
CONTENT CONTENT CONTENT<br />
CONTENT CONTENT CONTENT<br />
CONTENT CONTENT CONTENT
</div>
<div class="content">
CONTENT CONTENT CONTENT<br />
CONTENT CONTENT CONTENT<br />
CONTENT CONTENT CONTENT
</div>
<div class="content">
CONTENT CONTENT CONTENT<br />
CONTENT CONTENT CONTENT<br />
CONTENT CONTENT CONTENT
</div>

</div>

<div id="links">
Link 1<br />
Link 2<br />
Link 3<br />
Link 4<br />
Link 5<br />
</div>

</div>

</body>
</html>

naruto2.css:

Code: Select all

body {
	background-color: #F5E6BB;
}

#main {
	background: url('layout_03.gif');
	margin: 20px auto;
	padding: 3px;
	width: 769px;
	height: 689px;
	border: 1px solid #000000;
}

#blog {
	overflow: auto;
	text-align: left;
	width: 333px;
	height: 695px;
	float: left;
}

.content {
	width: 300px;
	float: left;
	padding: 2px;
	border: 1px solid #000000;
	margin-bottom: 20px;
}

#links {
	width: 300px;
	float: right;
	padding: 2px;
	border: 1px solid #000000;
}

[fewyn]

Yep that will work but I decided to /censored.gif' class='bbc_emoticon' alt='(cens)' /> around with the code and do a bit more hard core searching and ended up doing this.....

Code: Select all

body {
	background-color: #F5E6BB;
	margin: 0;
	padding: 0; 
	}

#main {
	background: url("http://www.fewyn.com/images/layout_03.gif");
	margin: 20px auto;
	width: 775px;
	height: 695px;
	border: 1px solid #000000;
	}

#blog {
	overflow: auto;
	text-align: left;
	padding: 2px;
	width: 333px;
	height: 695px;
	}

#side {
	padding: 0;
	text-align: justify;
	position: absolute; 
	top: 30px; 
	right: 5px; 
	width: 442px;
	height: 696px;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.6em;
	line-height: 1.5em;
	text-align: left;
   }

#footer {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.6em;
	line-height: 1.5em;
	text-align: center;
	}

Thanks guys you actually helped me figure this problem out a bit /bigwink.gif' class='bbc_emoticon' alt=';)' />