Maybe this is too much to ask? Need template & css help.

If you look at this site http://www.themovietimeline.net/modx

I want the stuff that’s in the left sidebar to display on the right side, and viceversa. I don’t understand which parts are "right" and "inner-right" etc. I don’t think I even need the "inner-right" and "inner-left" #div’s, but it just messes things up if I delete them. Maybe if somebody can give me a link to a good css tutorial, maybe that would help me out more. I don’t know.

Here is my template:

<!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" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
<script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script>
<script src="assets/templates/modxhost/drop_down_menu.js" type="text/javascript"></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? &parents=`2` &display=`2` &total=`20` &removeChunk=`Comments` &tpl=`nl_sidebar`]]
<div id="recentdocsctnr">
<h2>Most Recent:</h2>
<a name="recentdocs"></a>[[ListIndexer?LIn_root=0]] </div>
<h2>Login:</h2>
<div id="sidebarlogin">[!WebLogin? &tpl=`FormLogin` &loginhomeid=`[(site_start)]`!]</div>
<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" title="Ajax CMS and PHP Application Framework">Powered
by MODx</a> &nbsp;<a href="http://www.modxhost.com/" title="Template Designed by modXhost.com">Template &copy; 2006
modXhost.com</a>

MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved
from [^s^]. <a href="http://www.simplescripts.com" title="install MODx">Install MODx</a> <a href="http://www.hostmonster.com" title="web hosting">web hosting</a> </p>
</div>
<!-- end footer -->
</div>
<!-- end outer div -->
</div>
<!-- end wrapper -->
</body>
</html>





Here is the layout css:
/* commented backslash hides from ie5mac \*/
html{
height:100%;
margin:0;
padding:0
}
/* end hack */
html,body {
padding:0;
margin:0;
background-color: #c2865c;
font-size: 11px;
font-family: "Trebuchet MS", verdana, sans-serif;

}
body{
text-align:left;
min-width:900px;/* for mozilla*/
background-color: #c2865c;
height:100%;
background: url (images/background-movies-new.gif)repeat-y left top;
}
#wrapper {
background: url(images/background-movies-new.gif) repeat-y 50% 0%;
_height: 82px;
}

#outer{
height:99.9%;
min-height:100%;
width:900px;
text-align:left;
margin:auto;
position:relative;
overflow:visible;
background: url (images/background-movies-new.gif)repeat-y left top;
}

/* mac hide \*/
* html #outer{
width:900px
}
/* end hide*/

html>body #outer{
height:auto;
} /*for mozilla as IE treats height as min-height anyway*/

#inner{
width:100%;
padding-top:143px;/*needed to make room for header*/
}

#header{
position:absolute;
top:0px;
left:0px;
width:900px;
height:93px;
z-index:74;
background: url(images/themovietimeline-ads-banner.gif) no-repeat left top;

}

#ajaxmenu{
position:absolute;
top:93px;
left:0px;
width:900px;
height:43px;
z-index:65;
background: url(images/header_776x43.jpg) no-repeat left top;
}
#logo {
position:absolute;
top:26px;
left:10px;
width:237px;
height:63px;
text-indent: -5000px;
z-index:300;
background: url(images/logo_237x63.gif) no-repeat left top;
}
/* mac hide \*/
* html #outer, * html #header {width:780px}
/* end hide*/
#footer {
color: #ffffff;
width:900px;
clear:both;
height:82px;
text-align:left;
left:0px;
bottom:0px;
position: absolute;
background: url(images/foot_776x82_2.jpg) no-repeat left top;

}
#footer p {
margin-top: 10px;
}
#footer p a {
text-decoration: none;
color: #ffffff;
}
* html #footer{
margin-bottom:-1px
}/* ie rounding bug*/

/* mac hide \*/
* html #footer {
/*only ie gets this style*/
height:82px;
/* for ie*/
}
/* end hide*/

div,p {
margin-top:0px;
}/*clear top margin for mozilla*/

#right {
position:relative;/*ie needs this to show float */
width:725px;
float:right;
padding-left: 0px;
z-index: 56;
}
#right-inner {
width: 725px;
padding-right: 9px;
text-align: left;
}
#right-inner h2 {
font-size: 15px;
}
#left {
width:165px;
float:left;
z-index: 55;
}
#left-inner {
padding-left: 9px;
padding-right: 9px;
text-align: left;
}
#clearfooter {
width:100%;
height:82px;
clear:both;
} /* to clear footer */

html>body #minHeight{
float:left;
width:0px;
height:100%;
margin-bottom:-82px;
} /*safari wrapper */
#content {
z-index: 300;
padding-bottom: 7px;
}




#content h2 {
font-size: 15px;
color: #618200;
background: url(images/bullet_17x21.gif) no-repeat left top;
padding-left: 19px;
line-height: 24px;
position: relative;
z-index: 999;
}

h3#post- {
font-size: 12px;
color: #618200;
background: url() no-repeat left top;
padding-left: 0px;
}

#content p {
font-size: 12px;
color: #444444;
line-height: 18px;
_line-height: 16px;
}

#content p a {
color: #618200;
}

#content p a:hover {
background-color: #618200;
color: #ffffff;
}


#footer p {
padding: 8px;
}





.FSF_searchResults {
font-size: 12px;
color: #444444;
line-height: 18px;
_line-height: 16px;
}


.FSF_extract {
font-size: 12px;
color: #444444;
line-height: 18px;
_line-height: 16px;
}


.FSF_resultLink {
color: #618200;
}

.FSF_extract {
font-size: 12px;
color: #444444;
line-height: 18px;
_line-height: 16px;
}

.highlight {
font-size: 12px;
background-color: #f2f2f2;
color: #618200;
font-weight: bold;
line-height: 18px;
_line-height: 16px;

}

img {
border: dotted 1px #444444;
}

#content ul li{
list-style-image: url(images/bullet_11x8.gif);
margin-bottom: 0.5em;
font-size: 110%;
}

.LIn_shortMode {
list-style-type: none;
margin: 0;
padding: 0;

}

.LIn_desc {
display: none;
}
.LIn_date {
font-style: italic;
margin-left: 5px;
}

#content a, #sidebar a
{
color: rgb(97, 130, 0);
}

#content a:hover, #sidebar a:hover
{
background-color: rgb(97, 130, 0);
color: rgb(255, 255, 255);
}

In your styling, swap the "float:right" and "float:left" declarations. Add salt, pepper and width adjustments to suit taste ...
MattC

That was easy, but what about the names? #right is on the left, #left is on the right? What would happen if I renamed them to match their float?

As long as the names are consistent between the styling and the html, you can make them whatever you want.
MattC

Alright cool thx. Another question tho. I am trying to make it look like this site here: http://www.themovietimeline.net/index.html

I could use chunks for the timeline area (the movie 10,000 b.c. or The Scorpion King) right?
How do I get the chunks to display on different sides of the page, the left or the right? Is this where the "inner-right" and left would come in?

Yes, your content could go in chunks. You’d have CSS styling associated with the different chunks or blocks of content and depending on how these were positioned/ordered they would appear at the top, bottom, left, right, middle, middle-right-in-the-upper-half, etc.

It would probably be worthwhile to go through the tutorial here :
http://codingpad.maryspad.com/2009/03/28/building-a-website-with-modx-for-newbies-part-1-introduction/
Some parts of it may be old-hat for you, but it does an excellent job of taking a relatively straightforward layout and breaking it up into pieces that are easy to manipulate in MODx.

Your biggest issue, IMHO, is that your layout isn’t exactly straightforward . Nevertheless, I was able to take that swansong example and in about a half hour make it *generally* look like your layout (header and nav span the top, leftsidebar with links, "banner-b" takes up the upper middle and rightsidebar takes the place of the main content.)

Hope this helps...
MattC

Quote from: mconsidine at Mar 24, 2010, 08:04 AM

Yes, your content could go in chunks. You’d have CSS styling associated with the different chunks or blocks of content and depending on how these were positioned/ordered they would appear at the top, bottom, left, right, middle, middle-right-in-the-upper-half, etc.

It would probably be worthwhile to go through the tutorial here :
http://codingpad.maryspad.com/2009/03/28/building-a-website-with-modx-for-newbies-part-1-introduction/
Some parts of it may be old-hat for you, but it does an excellent job of taking a relatively straightforward layout and breaking it up into pieces that are easy to manipulate in MODx.

Your biggest issue, IMHO, is that your layout isn’t exactly straightforward . Nevertheless, I was able to take that swansong example and in about a half hour make it *generally* look like your layout (header and nav span the top, leftsidebar with links, "banner-b" takes up the upper middle and rightsidebar takes the place of the main content.)

Hope this helps...
MattC

Yeah, I’m going through that tutorial right now. I’m just a moron when it comes to code. I hate it. I know part of my problem is that I get bored with the tutorials and just start tinkering with things myself. I guess I’m making progress, but trying to get those "ditto’s" to work right is a pain.
Here’s what I’ve gotten done. It’s taken me at least 4 hours. http://www.themovietimeline.net/modx/

Don’t feel bad, that’s how I learned. Of course, it’s taken me what, five or six years now? to get where I am...