In theory, I should be able to just reduce the 'width: 600px;' to 'width: 400px;'. Unfortunately... this has no effect whatsoever. Here's my CSS and XHTML (ish... not cleaned it properly yet). I know the design is a Bad Thing - table abuse etc, but hey.
--
blogstyle.css
Code: Select all
BODY
{
FONT-SIZE: 10pt;
COLOR: #999988;
FONT-FAMILY: tahoma,arial,sans-serif;
BACKGROUND-COLOR: #222233;
TEXT-ALIGN: justify;
}
H1
{
FONT-SIZE: 13pt;
WORD-SPACING: 0pt;
FONT-FAMILY: helvetica,tahoma,arial,sans-serif;
LETTER-SPACING: 0pt;
}
H1.header
{
FONT-SIZE: 10pt;
FONT-FAMILY: tahoma,helvetica,tahoma,arial,sans-serif;
LETTER-SPACING: 0pt;
COLOR: #AAAA99;
PADDING-TOP: 15px;
PADDING-LEFT: 5px;
}
A
{
COLOR: #999988;
FONT-FAMILY: tahoma,arial,san-serif;
}
TABLE.header
{
PADDING-RIGHT: 0%;
PADDING-LEFT: 0%;
PADDING-BOTTOM: 0%;
BORDER-TOP-STYLE: none;
PADDING-TOP: 0%;
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
BORDER-BOTTOM-STYLE: none;
}
TD.header
{
BORDER-RIGHT: #333333 2px solid;
PADDING-RIGHT: 0%;
BORDER-TOP: #333333 7px solid;
PADDING-LEFT: 0%;
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-IMAGE: url(http://www.freespaces.com/angusl/Banner.jpg);
PADDING-BOTTOM: 0%;
VERTICAL-ALIGN: top;
BORDER-LEFT: #333333 2px solid;
WIDTH: 400px;
PADDING-TOP: 0%;
BORDER-BOTTOM: #333333 1px solid;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 150px;
max-width: 400px;
max-height: 150px;
}
TD.main
{
BORDER-RIGHT: #333333 2px solid;
PADDING-RIGHT: 0%;
BORDER-TOP: #333333 1px solid;
PADDING-LEFT: 0%;
PADDING-BOTTOM: 0%;
OVERFLOW: hidden;
BORDER-LEFT: #333333 2px solid;
WIDTH: 400px;
PADDING-TOP: 0%;
BORDER-BOTTOM: #333333 1px solid;
BACKGROUND-COLOR: #111111;
max-width: 400px;
}
TD.sidebar
{
BORDER-RIGHT: #333333 2px solid;
PADDING-RIGHT: 0%;
BORDER-TOP: #333333 1px solid;
PADDING-LEFT: 0%;
PADDING-BOTTOM: 0%;
OVERFLOW: hidden;
BORDER-LEFT: #333333 2px solid;
WIDTH: 200px;
PADDING-TOP: 0%;
BORDER-BOTTOM: #333333 1px solid;
BACKGROUND-COLOR: #111111;
max-width: 200px;
}
TD.footer
{
BORDER-RIGHT: #333333 2px solid;
PADDING-RIGHT: 0%;
BORDER-TOP: #333333 1px solid;
PADDING-LEFT: 0%;
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-IMAGE: url(http://www.freespaces.com/angusl/Footer.jpg);
PADDING-BOTTOM: 0%;
VERTICAL-ALIGN: top;
BORDER-LEFT: #333333 2px solid;
WIDTH: 600px;
PADDING-TOP: 0%;
BORDER-BOTTOM: #333333 7px solid;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 50px;
max-width: 600px;
max-height: 50px;
}
IMG.link
{
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
BORDER-LEFT: 0px;
BORDER-BOTTOM: 0px;
}index.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" lang="en" xml:lang="en">
<head>
<title><$BlogPageTitle$> :: Angus Lepper's Blog</title>
<$BlogMetaData$>
<!-- http://www.freespaces.com/angusl/blogstyle.css -->
<link rel="stylesheet" type="text/css" href="blogstyle.css" />
</head>
<body>
<table class="header" align="center">
<tr>
<td class="header">
<h1 class="header">Home</h1>
</td>
</tr>
<tr>
<td class="main">
<!-- BLOG CONTENT GOES HERE -->
<h1>Hello World!</h1>
</td>
<td class="sidebar">
<!-- Blog Description -->
<p><$BlogDescription$></p>
<!-- Mini-profile -->
<$BlogMemberProfile$>
<br />
<b>Previously:</b>
<p>
<!-- Permalinks to recent previous posts -->
<BloggerPreviousItems>
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a><br />
</BloggerPreviousItems>
</p>
<MainOrArchivePage>
<b>Archives</b>
<p>
<!-- Links to archived posts -->
<BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a><br />
</BloggerArchives>
</p>
</MainOrArchivePage>
<p>
<!-- 'I power Blogger' tag image -->
<a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger [link to Blogger main]" class="link" /></a>
</p>
</td>
</tr>
<tr>
<td class="footer">
<!-- Quote will go here - aligned over image -->
</td>
</tr>
</table>
</body>
</html>Any ideas? (I've doubtless done something wrong... this is my first time even attempting anything remotely interesting with handwritten XHTML and CSS.