Page 1 of 1

Problem with CSS 'width' property

Posted: Wed Sep 14, 2005 9:53 am
by AngusL
I've got a three line layout. I'm trying to reduce the width of the middle line TD, and place another TD beside it as a sidebar.

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. :P It's not even done. :P (Sorry for the formatting of the CSS... At some point, some program has decided to change it for me :roll:)

--
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 -->
				&nbsp;
			</td>
		</tr>
	</table>
</body>
</html>
If you copy and paste these into two files you'll see what I mean - the 'sidebar' style thing over at the right should be indented, in line with the rest of the content. :)

Any ideas? (I've doubtless done something wrong... this is my first time even attempting anything remotely interesting with handwritten XHTML and CSS.

Posted: Wed Sep 14, 2005 10:23 am
by pickle
Your footer cell is still set to width 600. You need to add a " colspan = '2' " into that <td> tag.

Posted: Wed Sep 14, 2005 12:04 pm
by AngusL
Hey that worked perfectly, thanks a bunch!

Now to go research what colspan actually does :lol:

Posted: Wed Sep 14, 2005 4:08 pm
by pickle
The "colspan" attribute tells a particular cell how many columns to span. It works just like a spreadsheet cell that spans multiple columns. There is also a "rowspan" attribute, but you'll have to take a wild guess as to what it does ;)

Posted: Thu Sep 15, 2005 10:09 am
by AngusL
Causes giant kitten eating reptiles to eat my breakfast? :mrgreen:

Thanks guys, I've never hand coded anything much more than little parts of projects. :D