can someone check i've done this right and also help add another sidebar?

hi so far i’ve just tried to customise the default modxhost them and want to change it further as i get better at this, can anyone please check what i have done here is right as i’m getting a few problems with the site, also i’d really like to add a left sidebar also making the whole site layout another sidebar width wider... please any help would be great, trying to get my head wrong it but also struggling with my host, so don’t know if my problems are due to them also...

here’s the template with my changes so far:

<!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>[(site_name)] | [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<base href="[(site_url)]"></base>
<link rel="stylesheet" href="assets/templates/modxhost/layout.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/templates/modxhost/modxmenu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/templates/modxhost/form.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/templates/modxhost/modx.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/templates/modxhost/print.css" type="text/css" media="print" />

<script src="assets/templates/modxhost/drop_down_menu.js" type="text/javascript"></script>
<script type="text/javascript">
function setActiveStyleSheet() {
var el= $(’modxhost’);
el.style.background = ’#ffd700’;
el.style.padding = ’10px’;
el.style.display=’block’;
var bgEffect = new Fx.Styles(’modxhost’, {duration: 1000,transition: Fx.Transitions.linear});
bgEffect.start( {’background-color’: ’#f9f9f9’});
return false;
}

function highlight(el,endcolor,duration) {
$(el).style.background = ’#ffd700’;
var fx = $(el).effects({duration: 1000, transition: Fx.Transitions.linear});
fx.start.delay(duration/2,fx,{
’background-color’: endcolor
});
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="minHeight"></div>
<div id="outer">
<div id="inner">
<div id="right">
<div id="right-inner">
<h1 style="text-indent: -5000px;padding: 0px; margin:0px; font-size: 1px;">[(site_name)]</h1>
<div id="sidebar">
<h2>News:</h2>
[[Ditto? &startID=`2` &summarize=`2` &total=`20` &commentschunk=`Comments` &tpl=`nl_sidebar` &showarch=`0` &truncLen=`100` &truncSplit=`0`]]
<div id="recentdocsctnr">
<h2>Most Recent:</h2>
<a name="recentdocs"></a>[[ListIndexer?LIn_root=0]] </div>
<p></p>
<script type="text/javascript"><!--
google_ad_client = "pub-6255187897481898";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "400058";
google_color_text = "000000";
google_color_url = "008000";
google_ui_features = "rc:6";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<h2>Meta:</h2>
<p><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></p>
<p><a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page uses valid Cascading Stylesheets" rel="external">Valid <abbr title="W3C Cascading Stylesheets">css</abbr></a></p>
<p><a href="http://modxcms.com" title="Ajax CMS and PHP Application Framework">MODx</a></p>
</div>
<!-- close #sidebar -->
</div>
<!-- end right inner-->
</div>
<!-- end right -->
<div id="left">
<div id="left-inner">
<div id="content">
<div class="post">
<h2>[*longtitle*]</h2>
[*#content*] </div>
<!-- close .post (main column content) -->
</div>
<!-- close #content -->
</div>
<!-- end left-inner -->
</div>
<!-- end left -->
</div>
<!-- end inner -->
<div id="clearfooter"></div>
<div id="header">
<h1><a id="logo" href="[~[(site_start)]~]" title="[(site_name)]">[(site_name)]</a></h1>
<div id="search"><!--search_terms--><span id="search-txt">SEARCH</span><a name="search"></a>[!AjaxSearch? ajaxSearch=`1` &AS_landing=`8` &moreResultsPage=`8` &showMoreResults=`1` &addJscript=`0` &extract=`0` &AS_showResults=`0`!]</div>
<div id="ajaxmenu"> [[Wayfinder?startId=`0` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &rowTpl=`mh.RowTpl` &innerRowTpl=`mh.InnerRowTpl` &firstClass=`first` &hereClass=``]] </div>
<!-- end topmenu -->
</div>
<!-- end header -->
<br style="clear:both;height:0;font-size: 1px" />
<div id="footer">
<p> <a href="http://modxcms.com" target="_blank" title="Ajax CMS and PHP Application Framework">Powered
by MODx.</a><a href="http://www.modxhost.com/" target="_blank" title="Using modXhost.com framework"> &copy; 2006
modXhost.com</a><a href="http://www.yorkwebsites.co.uk/" target="_blank" title="York Website Design Services">&nbsp;- Empowered by York Websites &copy; 2007&nbsp; <img src="http://www.yorkwebsites.co.uk/images/yorkwebsitesmall.png" alt="York Websites - Design, Hosting &amp; Maintenance" width="35" height="35" border="0" align="middle" /><a href="http://www.insideyork.co.uk/index.php?id=4" title="Admin Login">&nbsp;- Admin Login</a>

MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved
from [^s^]. </p>
</div>
<!-- end footer -->
</div>
<!-- end outer div -->
</div>
<!-- end wrapper -->
</body>
</html>

No, these problems are definitely not related to your host. Frankly, I would start from scratch with a 3 columns layout, instead of hacking away from the default MODx template. You can include then the necessary MODx tags one by one, instead of carrying things like switching CSS with JavaScript with you, what you definitely don’t need.

There are plenty of resources how to build tableless layouts in (X)HTML and CSS:

http://www.glish.com/css/
http://www.maxdesign.com.au/presentation/page_layouts/
http://www.markboulton.co.uk/journal/comments/blueprint_a_css_framework/
http://www.graphic-design-forum.com/css-xhtml/5837-101-awesome-css-resources.html

It might be a bit overwhelming first, but I think you will find a template that comes close to what you want to do somewhere, so you can learn from it.

Take a look in the Repository (link above) and see what templates are available. There may be one that fits your requirements with little or no tweaking.

hi guys, sorry and thanks for your patience, it’s hard for me to get my head round which bits are modx and needed for search, pull down menus and stuff and what is normal css code, plus i’m really new to working in this way... so i’m pretty stuck even after trying to read some of that stuff... which is the repository link?

also my drop down menus stopped working and i don’t know why cos i’m not aware i changed anything in modx manager to affect this?

MODx doesn’t force anything on you. When testing though make sure you’re not logged into the manager or disable the Quickedit plugin to make sure you don’t get front-end editor induced errors. MODx will output exactly what you put into it, and that means if there’s obscure bugs in your CSS/XHTML you’ll see them in your MODx-powered sites!

I typically try to get a static XHTML/CSS site template working as desired then spend time porting it over to Wayfinder and Ditto template chunks.

Ah, sorry, the link to the repository is labeled "Resources".