Just started playing with CMS made simple and really enjoying it although I seem to be having a little problem getting 3 columns to display properly. (Using just one seemed to work fine).
It would be great if someone could help me identify what's going wrong in my CSS/HTML (the content doesn't seem to be aligning and its jumping out of the wrapping).
My current HTML
Code: Select all
<!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>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
</__body>
<div id="wrap">
<div id="upPhase"><img src="http://jameseh.info/test/uploads/images/phazetop.jpg" class="stretch" alt="upperPhase" />
</div>
<div id="header"><img src="http://jameseh.info/test/uploads/images/bannerV31.jpg" alt="Test Banner" width="1000" height="118" />
</div>
<div id="topImg">
{global_content name='rotator'}
</div>
<div id="menu">
{menu template="minimal_menu.tpl" number_of_levels='1'}
</div>
<div id="leftcol">
{content block="Textblock-2"}
</div>
<div id="rightcol" align='center'>
{content block="Textblock-3"}
</div>
<div id="content">
{content}
</div>
<div id="footer">{global_content name='footer' number_of_levels='1'}
</div>
</div>
<__body>
</__html>And the CSS:
Code: Select all
body {
margin:0;
background-repeat:repeat-x;
background-color:#FBF2D5;
text-align:center;
}
h1 {
font-size: 18px;
color: #143e11;
margin-bottom: 5px;
}
#upPhase {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 450px;
z-index:-1;
}
.stretch {
width:100%;
height:65%;
}
#wrap {
background: #FBF2D5;
color: #303030;
margin: 0 auto;
width: 1000px;
padding: 0;
border: 1px solid #000;
}
#header {
padding: 0px;
height: 135px;
border-bottom-width: thin;
border-bottom-style: solid;
background-color: #FFFFFF;
}
.banner {
float: left;
}
#topImg
{
cursor: pointer;
overflow: hidden;
position: relative;
width: 1000x;
height: 230px;
}
#topImg img
{
border: 0;
cursor: pointer;
width: 1000px;
height: 230px;
}
#menu {
color: #fff;
width: 1000px;
height:10px;
font-family: Trebuchet MS;
background-color: #143e11;
height: 20px;
}
#menu ul {
text-align: center;
margin: 0 50px 0 0;
font-size: 14.5px;
}
#menu li {
display: inline;
text-align: center;
}
#menu li a {
padding: 0 0 0 15px;
color: #ffffff;
text-decoration: none;
}
#leftcol{
float: left;
margin-left: 0px;
margin-right: 0px;
width: 150px;
padding: 2px;
}
#rightcol{
float: right;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 2px;
width: 150px;
padding: 0px;
width:150px:
color:#143e11;
background-repeat:no-repeat;
background-color:#FBF2D5;
}
#content {
text-align:left;
width:700px;
font-size:14px;
font-family: Trebuchet MS;
padding:2px 2px;
color:#143e11;
background-repeat:no-repeat;
background-color:#FBF2D5;
}
#footer {
background-color: #143e11;
text-decoration:none;
font-family: Trebuchet MS;
font-size:13px;
color: #FFFFFF;
padding-top:0px;
width: 1000px;
height: 20px;
}
#footer a {
color:#fff;
text-decoration:none;
}
#footer a:hover {
color:#FFF;
}
Many thanks,
James
