News module on CSSMenu top + 2 columns template [SOLVED]

Bonewalker · Post by **Bonewalker** » Wed Aug 26, 2009 4:49 pm

Hello All,

When I add the News module to the CSSMenu top + 2 columns template, any text in the sidebar gets pushed down without the normal borders and main page expanding with it, so it looks kind of out of place. Would anyone have any ideas for me about how to make the main page expand with the text in the Sidebar?

Link: http://www.baldwinrec.org

CMSMS version 1.5.2 running on Linux/MySQL.

Thanks much.

Deak · Post by **Deak** » Thu Aug 27, 2009 6:07 am

Stick a clear after your two float column divs:

Bonewalker · Post by **Bonewalker** » Thu Aug 27, 2009 3:18 pm

Deak wrote: Stick a clear after your two float column divs:

Hmm...I guess I am confused. I don't see any floating divs other than the print button. Below is the code I inserted the news code from another template into this one:

Code: Select all

{process_pagedata}
<!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">
{* Change lang="en" to the language of your site *}

<head>

<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}


{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
	var nw="auto",w=document.documentElement.clientWidth;
	if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}


<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}

</head>

</__body>

<div id="pagewrapper">

    {* start accessibility skip links *}
    <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    {* end accessibility skip links *}


    <hr class="accessibility" />
    {* Horizontal ruler that is hidden for visual browsers by CSS *}


   {* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>
   {* End Header *}


      {* Start Navigation *}
      <div id="menu_vert">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
      </div>
      {* End Navigation *}


   {* Start Search *}
   <div id="search">
          {search}
   </div>
   {* End Search *}


   {* Start Breadcrumbs *}
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   {* End Breadcrumbs *}


   {* Start Content (Navigation and Content columns) *}
   <div id="content">

      {* Start Sidebar *}
        <div id="sidebar" class="hascontent">

       {* Start News *} // **** I added this News item here *****************************************
         <div id="news">
         <h2>Announcements</h2>
          {news number='1' detailpage='news'}
         </div>
         {* End News *}

      {content block='Sidebar'}
      </div>
      </div>
      {* End Sidebar *}

      {* Start Content Area *}
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true}</div>
         <h2>{title}</h2>
         {content} <br />

         {* Start relational links *}
	 <div class="hr"></div>
	 <div class="right49">
	 	<p>{anchor anchor='main' text='^ Top'}</p>
	 </div>
         <div class="left49">
            <p>{cms_selflink dir="previous" label="Previous page: "} <br />
            {cms_selflink dir="next"}</p>
         </div>
         {* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
	 {* End relational links *}

      <hr class="accessibility" />
      </div>
	  {* End Content Area *}


   </div>
   {* End Content *}


   {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   <div id="footer">
      {global_content name='footer'}
   </div>   
   {* End Footer  *}


</div>{* end pagewrapper *}
<__body>
</__html>

sn3p · Post by **sn3p** » Thu Aug 27, 2009 5:31 pm

The floats are prolly defined in the CSS.
Add the clear div after the accessibility hr:

Code: Select all

<hr class="accessibility">
<div style="clear:both;"></div>

Bonewalker · Post by **Bonewalker** » Thu Aug 27, 2009 6:31 pm

Thanks all! That did the trick. Although the accessibility line was in the template code and I overlooked it somehow initially.

CMS Made Simple Forums

News module on CSSMenu top + 2 columns template [SOLVED]

News module on CSSMenu top + 2 columns template [SOLVED]

Re: News module on CSSMenu top + 2 columns template

Re: News module on CSSMenu top + 2 columns template

Re: News module on CSSMenu top + 2 columns template

Re: News module on CSSMenu top + 2 columns template [SOLVED]