For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
lleighh
Forum Members
Posts: 59 Joined: Tue Apr 11, 2006 2:40 pm
Post
by lleighh Fri Sep 08, 2006 11:39 am
I'm trying to get my right column to align at the top with the two other columns (
http://www.heartsandhandsforhaiti.org ).
I've tinkered around with css and templates (including mark's wireframe) but I'm not getting anywhere.
Here's the css
Code: Select all
#extraleft {
float: left;
width: 110px;
margin: 0 0 100px 0;
padding: 2px;
font-size: 0.9em;
line-height: 1.5em;
z-index: 1;
}
#extraright {
float: right;
width: 110px;
padding: 2px;
font-size: 0.9em;
line-height: 1.5em;
}
#extras p {
margin: 0 0 1.5em 0;
}
#content_old {
margin: 0 100px 10px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 2px;
line-height: 1.6em;
text-align: left;
background: #FFF;
}
#container {
width: 760px;
background: #EFEFEF;
margin: 0 auto;
}
#content {
width: 760px;
background: #D1E2F6;
padding: 0px;
}
#main {
line-height: 1.6em;
padding: 2px;
text-align: left;
background: #FFF;
margin: 0px 130px 0px 130px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
#main h2 {
font-size: 24px;
color: #069;
margin: 5px 0 5px 0;
font-family: bangle;
}
#main img {
padding: 0px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}
Here's the template
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" xml:lang="en" lang="en">
<head>
<!-- Type the title of your site here -->
<title>Hearts and Hands for Haiti - {title}</title>
{metadata}
{stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<!--[if IE 6]>
<__script__ type="text/javascript" src="/modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<__script__ src="uploads/javascript/sucker.js"></__script>
{global_content name='JavaScript for IE page width'}
</head>
</__body>
<div id="container">
<div>
<a href="index.php"><img src="uploads/images/logo1.jpg" width="760" height="80" alt="Home" /></a>
</div>
<img src="uploads/images/front.jpg" width="760" height="152" alt="Love, Hope, Faith" />
<!-- Start Navigation -->
<div id="menu_horiz">
<div class="menu-vert">
{cms_module module='menumanager' template='hhh01 : andreas01 : andreasmenu' number_of_levels='2'}
</div>
</div>
<!-- End Navigation -->
<div id="content">
<div id="extraleft">
{global_content name='leftside'}
</div>
<div id="main">
<h2>{title}</h2>
{content} </div>
<div id="extraright">
{global_content name='side'}
</div>
</div>
<!-- Start Footer -->
<div id="footer">
{global_content name='footer'}
<!-- End Footer -->
</div>
</div>
<__body>
</__html>
... i'm running cmsms v .13
lleighh
Forum Members
Posts: 59 Joined: Tue Apr 11, 2006 2:40 pm
Post
by lleighh Fri Sep 08, 2006 12:28 pm
Note: I've tweaked the css and template and now the right column is behaving but the center isn't
new css
Code: Select all
#extraleft {
float: left;
width: 110px;
margin: 0 0 100px 0;
padding: 2px;
font-size: 0.9em;
line-height: 1.5em;
z-index: 1;
}
#extraright {
position: relative;
top: 0px;
float: right;
width: 110px;
padding: 2px;
font-size: 0.9em;
line-height: 1.5em;
}
#extras p {
margin: 0 0 1.5em 0;
}
#content_old {
margin: 0 100px 10px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 2px;
line-height: 1.6em;
text-align: left;
background: #FFF;
}
#container {
width: 760px;
background: #EFEFEF;
margin: 0 auto;
}
#content {
width: 760px;
background: #D1E2F6;
padding: 0px;
}
#main {
line-height: 1.6em;
position: relative;
float: left;
top: 0px;
left: 130px;
padding: 2px;
width: 500px;
text-align: left;
background: #FFF;
margin: 0px 130px 0px 0px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
revised template:
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" xml:lang="en" lang="en">
<head>
<!-- Type the title of your site here -->
<title>Hearts and Hands for Haiti - {title}</title>
{metadata}
{stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<!--[if IE 6]>
<__script__ type="text/javascript" src="/modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<__script__ src="uploads/javascript/sucker.js"></__script>
{global_content name='JavaScript for IE page width'}
</head>
</__body>
<div id="container">
<div>
<a href="index.php"><img src="uploads/images/logo1.jpg" width="760" height="80" alt="Home" /></a>
</div>
<img src="uploads/images/front.jpg" width="760" height="152" alt="Love, Hope, Faith" />
<!-- Start Navigation -->
<div id="menu_horiz">
<div class="menu-vert">
{cms_module module='menumanager' template='hhh01 : andreas01 : andreasmenu' number_of_levels='2'}
</div>
</div>
<!-- End Navigation -->
<div id="content">
<div id="extraleft">
{global_content name='leftside'}
</div>
<div id="extraright">
{global_content name='side'}
</div>
<div id="main">
<h2>{title}</h2>
{content} </div>
</div>
<!-- Start Footer -->
<div id="footer">
{global_content name='footer'}
<!-- End Footer -->
</div>
</div>
<__body>
</__html>
Dr.CSS
Moderator
Posts: 12711 Joined: Thu Mar 09, 2006 5:32 am
Post
by Dr.CSS Sat Sep 09, 2006 9:21 am
What is it doing that you don't want it to?
lleighh
Forum Members
Posts: 59 Joined: Tue Apr 11, 2006 2:40 pm
Post
by lleighh Sat Sep 09, 2006 9:39 pm
thanks, mark. i figured out the order thing but now i've got that pesky extra blue section at the bottom of every page. what's up with that?
