Been working on this all night.....

Get Help With All Aspects of Web Design & Design Software

Moderators: Moderator, Global Moderator

Post Reply
fewyn
Newbie
Newbie
Posts: 4
Joined: Sun Jan 23, 2005 8:52 am

Been working on this all night.....

Post by 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]<!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>[/code]

naruto2.css
[code]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;
   }[/code]
fewyn
Newbie
Newbie
Posts: 4
Joined: Sun Jan 23, 2005 8:52 am

Been working on this all night.....

Post by 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
Administrator
Administrator
Posts: 10892
Joined: Sun Apr 25, 2004 1:05 pm

Been working on this all night.....

Post by 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=\':)\' />
Image

[color=\"#41211C\"]It takes years to build up trust and only seconds to destroy it

[/color]
mobil1_oils
Hero Member
Hero Member
Posts: 1873
Joined: Sun May 09, 2004 6:42 am

Been working on this all night.....

Post by mobil1_oils »

[b][i][color=\"gray\"][font=\"tahoma\"][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\' />. [/b][/i][/color][/font]
Sp3culuM
Hero Member
Hero Member
Posts: 662
Joined: Mon May 17, 2004 2:36 pm

Been working on this all night.....

Post by Sp3culuM »

Here you go..

<removed to stop wasting scroll space>
Last edited by Sp3culuM on Tue Jan 25, 2005 12:23 am, edited 1 time in total.
Image
fewyn
Newbie
Newbie
Posts: 4
Joined: Sun Jan 23, 2005 8:52 am

Been working on this all night.....

Post by 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
Hero Member
Hero Member
Posts: 662
Joined: Mon May 17, 2004 2:36 pm

Been working on this all night.....

Post by Sp3culuM »

Easily fixed..

text.html:

[code]<!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>[/code]

naruto2.css:

[code]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;
}[/code]
Last edited by Sp3culuM on Tue Jan 25, 2005 12:25 am, edited 1 time in total.
Image
fewyn
Newbie
Newbie
Posts: 4
Joined: Sun Jan 23, 2005 8:52 am

Been working on this all night.....

Post by 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]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;
}[/code]

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

Return to “Web Design Principles”