Menu help and aligning news summary

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"
Post Reply
ninja-lewis
New Member
New Member
Posts: 9
Joined: Sun Oct 02, 2005 8:18 pm

Menu help and aligning news summary

Post by ninja-lewis »

I'm in the processing of adapting this template to work with CMSMS using the standard templates as a guide.

So far I have this. The main issue so far is the menu; for the life me I can't figure out how to have the gaps between the menu items so that you can see the background between them.

The other issue I have is the news summary on the right hand side. I want to have it inline with and just below the 'Latest News' rather than a down a bit and indented. I've tried editing the code for both the news summary and the actual template but there doesn't appear to be anything dealing with these two properties. Can anyone advise?

The code for the page template is:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.marchmontstgiles.org.uk/cmsmadesimple/admin/edittemplate.php?template_id=22"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>Marchmont St Giles - {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 -->

<!--[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 class="container">

    <!-- 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 -->

<div id="spacer">
</div>
  <__script__ type="text/javascript" src="http://www.makepovertyhistory.org/whiteband_small_right.js"> </__script>


<br style="clear:both;" />

<div class="header"></div>
<h2 class="accessibility">Navigation</h2>
{cms_module module='menumanager' template='cssmenu.tpl'}
 <hr class="accessibility" />


<div class="box">
<div class="left">

<div id="sub1">
{content}
</div>
  <br />
<a href="http://www.fairtrade.org.uk/" title="The Fairtrade Foundation" id="fairtrade"></a>
<a href="http://www.christian-aid.org.uk/" title="Christian Aid" id="aid"></a>
<a href="http://www.churchofscotland.org.uk/" title="The Church of Scotland" id="cos">></a>

 <br style="clear:both;" />
 

</div>

<div class="right">

<h3 align="justify" class="purple">LATEST NEWS</h3>
<div class="indent">
      <!-- Start News -->
      <div id="news">
           {news limit=2 detailpage='news' moretext="more..." number=2}
      </div>
      <!-- End News -->
</div>
</div>

<div class="right">

<h3 align="justify" class="purple">LATEST EVENTS</h3>
<div class="">
<h4><a href="event.htm" title="descriptive title for event">Event Header </a></h4>

	<p>Lorem ipsum dolor sit amet</p>

 
    <p class="small_right">» Date </p>
</div><div class="indent">
<h4><a href="event.htm" title="descriptive title for event">Event Header </a></h4>

	<p>Lorem ipsum dolor sit amet</p>

 
<p class="small_right">» Date</p>
</div>
</div>


<p> </p>
</div>


<br style="clear:both;" />
<div id="footer">
<p>© 2006 marchmont st giles  | All rights reserved | designed by <a href="http://www.contemporarymultimedia.com" target="_blank">contemporary multimedia </a><br />
0121 282 8282 | <a href="mailto:webmaster@marchmontstgiles.org.uk">webmaster@marchmontstgiles.org.uk</a> <br /> 
</p>

<div id="spacer2"></div>

</div>
</div>

<__body>
</__html>
Stylesheet:

Code: Select all

* {margin:0; padding:0;}
html {margin:0; padding:0;}
body { 
font: 0.8em "Helvetica", verdana, Sans-Serif; 
background:#eee; 
color:#222; 
text-align:center; 
line-height:1.4em; 
padding:0.6em 0; 	
background-image: url(uploads/images/background.png);
}

/* ############## LAYOUT ################ */
#spacer {
height:40px; 
width:300px; 
margin: 0  0 5px; 
float:left; 
display:inline;
}

#spacer2 {
width:100px; 
height: 46px; 
display:inline; 
float:right; 
padding:15px 0 0;
}

.header {
margin:0 0 15px 0; 
height:200px; 
border:15px solid #fff; 
background:#fff url(uploads/images/header.jpg) no-repeat 0 0; 
padding:0; 
vertical-align:bottom;
}

#footer {
text-transform: lowercase;
border-top:1px solid #eee; 
padding:0 0 1em; 
margin:0; 
text-align:center;
}

.container {
width:750px; 
margin:0 auto; 
text-align:left; 
}

.left {
width:480px; 
float:left; 
display: inline; 
margin:0; 
}

.right {
width:209px; 
margin: 0 0 0 30px; 
float:left; 
display: inline 
}

.box {
margin:0 0 10px; 
padding:15px; 
background:#fff;
}

.indent {border-bottom:1px solid #eee;
}

/* ############# TYPO ################### */

p { padding:0 0 1em 0; }

.right p {font-size:100%; line-height:1.3em;}

h1,h2 {font-family: "Helvetica", Georgia, Serif; font-weight: normal;}
h3,h4 {font-family: Helvetica, "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, Sans-Serif;}
h2 {font-size:1.4em; padding:0.3em 0; text-transform: uppercase; line-height:135%;}
h3 {font-size:0.9em;padding:0.3em 0; text-transform: uppercase; letter-spacing:0;margin:0.8em 0 0 0;}
h4 {font-size:1em; margin:0.6em 0 0.3em; }
h3.purple {background-color:#8365B3; color:#fff; padding:0.3em 10px 0.2em 10px; margin:0 0 1.1em 0;}


/* ############# Listor ################### */
ul, ol {list-style:none; font-size:100%; line-height:1.4em; margin:0 0 1em 25px; }
li {list-style-type:square;padding:0.1em 0;}

ol li {list-style: decimal;padding:0.3em 0;}

.right ul {margin:0 0 0.5em 25px; padding:0; font-size:90%; line-height:1.3em;}
.right li {list-style-type:square; padding:0.2em 0; border:none; }


.right .indent ul {margin:0 0 0.5em 0; padding:0; font-size:90%; line-height:1.3em;}
.right .indent li {list-style-type:none; padding:0.2em 0; border:none;}

.right .grey_box ul {margin:0 0 0.5em 15px;}




/* ################### menu ################ */

/* hide from IE mac \*/

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper clears the floating elements of the menu */

#menuwrapper { 
        overflow: hidden; 
        background-color: #ECECEC;
        border-bottom: 1px solid #C0C0C0;
        width: 100%;
        }

/* Set the width of the menu elements at second level. Leaving first level flexible. */

#primary-nav li li { 
        width: 200px; 
       }


/* Unless you know what you do, do not touch this */ 

dfn {
   position: absolute;
   left: -1000px;
   top: -1000px;
   width: 0;
   height: 0;
   overflow: hidden;
   display: inline;
}

#primary-nav, #primary-nav ul { 
	list-style: none; 
	margin: 0px; 
	padding: 0px; 
	}
#primary-nav ul { 
	position: absolute; 
	top: auto; 
	display: none; 
	}
#primary-nav ul ul { 
	margin-top: 1px;
 	margin-left: -1px;
	left: 100%; 
	top: 0px; 
	}
	
#primary-nav li { 
	margin-left: -1px;
	float: left; 
	}
#primary-nav li li { 
	margin-left: 0px;
	margin-top: -1px;
	float: none; 
	position: relative; 
	}

#primary-nav {
  display:table; /* ignored by IE */
  padding:0; 
margin:0;
  list-style-type:none;
  white-space:nowrap; /* keep text on one line */
  border:0; /* add a border to show size of menu */
  }
#primary-nav li {
  display:table-cell; /* ignored by IE */
  }
#primary-nav li a, .menu li a:link .menu li a:visited {
  display:block; /* for all browsers except IE */
  padding:4px 16px;
  color:#888; 
  background:#d8d8d8; 
  border-right:1px solid #eee;
  text-decoration:none;
  }

#primary-nav li a:hover {
  color:#8365B3; 
  background:#fff;
 }

#primary-nav li.menuactive {
  color:#333; 
  background:#fff;
cursor:default;
  }

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth { 
	background-image: url(modules/MenuManager/images/arrow.gif); 
	background-position: center right; 
	background-repeat: no-repeat; 
	}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh { 
	  color:#8365B3; 
  background:#fff; 
	}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { 
	display: none; 
	}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul { 
	display: block; 
	}


/* IE Hacks */

#primary-nav li li { 
	float: left; 
	clear: both; 
	}
#primary-nav li li a { 
	height: 1%; 
	}
-->


/* ############# links ################### */
a {color:#6568D9; text-decoration: none; font-weight:bold; cursor:pointer;}
a:link {color:#6568D9 ;}
a:visited {color:#6568D9 ;}
a:hover {color:#222;}

a img {color:#fff;}

/* ###### Supports ########## */


a#sub1{ width:468px; height:60px; display:block; text-indent:-9999px; float:left; margin: 8px 0 0 0; } 
a#sub2{ width:468px; height:60px; display:block; text-indent:-9999px; float:left; margin: 8px 0 0 0; } 
a#sub3{ width:468px; height:60px; display:block; text-indent:-9999px; float:left; margin: 8px 0 0 0; } 

a#fairtrade {background: transparent url(uploads/images/vftj.png) no-repeat 0 0; width:95px; height:68px; display:block; text-indent:-9999px; float:left; margin: 8px 0 0 0;} 
a#aid{background: transparent url(uploads/images/fairtrade.png) no-repeat 0 0; width:123px; height:68px; display:block; text-indent:-9999px; float:left; margin: 8px 0 0 0 ; } 
a#cos{background: transparent url(uploads/images/christian_aid.png) no-repeat 0 0; width:158px; height:68px; display:block; text-indent:-9999px; float:left; margin: 8px 0 0 0 ; }
News Summary:

Code: Select all

<!-- Start News Display Template -->
{foreach from=$items item=entry}
<div class="NewsSummary">

<div class="NewsSummaryLink">
	{$entry->titlelink}
</div>

{if $entry->formatpostdate}
	<div class="NewsSummaryPostdate">
		{$entry->formatpostdate}
	</div>
{/if}

{if $entry->summary}
	<div class="NewsSummarySummary">
		{eval var=$entry->summary}
{$entry->summary|truncate:30:"...":false}

	</div>

	<div class="NewsSummaryMorelink">
		[{$entry->morelink}]
	</div>

{else if $entry->content}

	<div class="NewsSummaryContent">
		{eval var=$entry->content}
	</div>
{/if}

</div>
{/foreach}
<!-- End News Display Template -->
Any help would be much appreciated.
Top
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: Menu help and aligning news summary

Post by kermit »

div#news {margin-left:0;margin-top:0}
h3.purple {margin-bottom:0;}
#primary-nav li {margin-left:10px;}

and you need to wrap your 'latest events' block in a div styled similar to the news in order for it to match the news summaries.


tip: get firefox, the web developer toolbar, firebug and html validator.. you will wonder what you ever did without them.
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
Top
Post Reply

Return to “Layout and Design (CSS & HTML)”