Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

A problem with CSS, could someone help me?

0 views
Skip to first unread message

PigsCanFly@PKU

unread,
Dec 1, 2006, 3:58:02 PM12/1/06
to
When I write some HTML and CSS code to make a side bar, It occurs to me that
the parts don't join together very well - there are spacing at the joint that
I don't want. Will somebody please help me to figure it out?
Thank you very much.

index.htm

<!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>
<title>Home Page </title>
<link href="Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Container">
<div id="Header">
<h1>
This is the Header</h1>
</div>
<div id="PageBody">
<div id="SideBar">
<img id="SideBarTop" src="Images/SideBarTop.gif" />
<img id="SideBarTitle" src="Images/SideBarTitle.gif" />
<div id="SideBarItem">
This is SideBar News.<br />
This is SideBar News.<br />
This is SideBar News.<br />
This is SideBar News.<br />
This is SideBar News.<br />
</div>
<img id="SideBarTitle" src="Images/SideBarTitle.gif" />
<div id="SideBarItem">
This is SideBar News.<br />
This is SideBar News.<br />
This is SideBar News.<br />
This is SideBar News.<br />
This is SideBar News.<br />
</div>
<img id="SideBarBottom" src="Images/SideBarBottom.gif" />
</div>
<div id="MainBody">
<h1>
This is the MainBody
</div>
</div>
<div id="Footer">
<h1>
This is the Footer</h1>
</div>
</div>
</body>
</html>

site.css

body
{
font: 12px Tahoma;
margin: 0;
}
#Container
{
width: 780px;
margin: 0 auto;
}
#Header
{
width: 100%;
margin: 0;
}
#PageBody
{
width: 100%;
margin: 0;
border: #CCC 1px solid;
}
#SideBar
{
width: 180px;
margin: 0;
clear: left;
float: left;
}
#MainBody
{
margin: 0;
clear: right;
float: right;
}
#Footer
{
width: 100%;
margin: 0;
}
#Menu
{
width: 100%;
background-image: url(Images/MenuBg.gif);
}
#Menu ul
{
list-style: none;
margin: 0;
}
#Menu ul li
{
float: left;
margin: 0 10px;
display: block;
line-height: 25px;
}
.MenuDiv
{
width: 1px;
height: 25px;
background-color: #999;
}
#SideBarTop
{
width: 180px;
height: 7px;
margin: 0;
}
#SideBarBottom
{
width: 180px;
height: 8px;
margin: 0;
}
#SideBarTitle
{
width: 180px;
height: 27px;
margin: 0;
}
#SideBarItem
{
width: 165px;
margin: 0 auto;
background-color: #FFF;
border: #CCC 1px solid;
}

0 new messages