CMS Made Simple Forums

Hi
This is not really a CMS question, but you all seem so helpful I thought I would try - I don't much about html etc so this might seem basic.

On my site www.christchurchguildford.com I am using the news module - with results shown in the lower half of the home page

As you can see there is big space between the heading and the summary text. I would like to remove this so that the news items are closer together. I can't see where this space is defined - or is it automatic? In which case what can I do to over-ride this. I'm sure it can be done!

My News Summary Template is:-



{foreach from=$items item=entry}



{$entry->titlelink}


{if $entry->summary}

{eval var=$entry->summary}


[{$entry->morelink}]


{else if $entry->content}


{eval var=$entry->content}

{/if}


{/foreach}


And my News Style sheet is this:-

div#news {
  margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  border: 1px solid #000;
  background: #FFE9AF;
}

div#news h2 {
   line-height: 2em;
   background: #fff;
}

.NewsSummary {
    /* padding: 0.5em 0.5em 1em;  padding for the news article summary */
    /* margin: 0 0.5em 1em 0.5em; margin to the bottom of the news article summary */
    border-bottom: 1px solid #ccc;
}

.NewsSummaryPostdate {
  font-size: 90%;
  font-weight: bold;
}

.NewsSummaryLink {
    font-weight: bold;
    padding-top: 0.2em;
    margin: 0 0 0 0;
}

.NewsSummaryCategory {
  font-style: italic;
  margin: 5px 0;
}

.NewsSummaryAuthor {
  font-style: italic;
  padding-bottom: 0.5em;
}

.NewsSummarySummary, .NewsSummaryContent {
  line-height: 120%;
  margin 0 0 0 0;
}

.NewsSummaryMorelink {
/* padding-top: 0.1em; */
  text-align: left;
}

#NewsPostDetailDate {
  font-size: 90%;
  margin-bottom: 5px;
  font-weight: bold;
  }

#NewsPostDetailSummary {
   line-height: 150%;
   }

#NewsPostDetailCategory {
  font-style: italic;
  border-top: 1px solid #ccc;
  margin-top: 0.5em;
  padding: 0.2em 0;
}

#NewsPostDetailContent {
  margin-bottom: 5px;
  line-height: 150%;
  }

#NewsPostDetailAuthor {

  padding-bottom: 1.5em;
  font-style: italic;
}


/* to add specific style to the below divs, uncomment them. */

/*
#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}
*/

David,

when you check the source of the page opened, the summary of the news is packed inside a , so I guess that the styling of the is creating the space between paragraphs. The stylesheet that styles the is you main stylesheet attached to the template.

Ronny

Hi Ronny
Thanks for the reply. I have looked to see if the is defined specifically - and it doesn't seem to be there.
I said I was not very good at this! The main template is below, if you get the time could you see where it could be defined - or can I add a new entry that would overrride it?
Thanks
DG

/* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas
Version: 1.0(July 25, 2005)Screen layout: */

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(uploads/andreas01/bg.gif) top center repeat-y;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 860px;
}

#header {
clear: both;
margin: 10px 0 0 0;
padding: 0;
height: 30px;
}

#header h1 {
width: 300px;
font-size: 1.6em;
margin: 5px 0 5px 5px;
float: left;
}

#header p {
width: 500px;
float: right;
font-style: italic;
text-align: right;
margin: 5px 5px 0 0;
font-size: 1.2em;
line-height: 1.2em;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#avmenu li {
margin: 3px 0 3px 0;
}

/* first level */
#avmenu li a {
font-weight: bold;
height: 30px;
text-decoration: none;
color: #505050;
display: block;
padding: 4px 0 2px 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}

#avmenu li a:hover {
background: #eaeaea;
color: #0435AD;
border-left: 4px solid #0435AD;
}

#avmenu li a.menuactive {
background: #eaeaea;
color: #0435AD;
border-left: 4px solid #0435AD;
}

/* second level */
#avmenu li li a {
font-weight: normal;
height: 30px;
margin: 0 0 0 4px;
text-decoration: none;
color: #505050;
display: block;
padding: 3px 0 3px 24px;
background: #E6F5FF;
border:0;
}

#avmenu li li a:hover {
background: #eaeaea;
color: #0435AD;
border:0;
}

#avmenu li li a.menuactive {
background: #eaeaea;
color: #0435AD;
border:0;
}

/* third level */
#avmenu li li li a {
font-weight: normal;
font-size: 0.9em;
height: 30px;
margin: 0 0 0 8px;
text-decoration: none;
color: #505050;
display: block;
padding: 3px 0 3px 34px;
background: #F1FAFF;
border:0;
}

#avmenu li li li a:hover {
background: #eaeaea;
color: #0435AD;
border:0;
}

#avmenu li li li a.menuactive {
background: #eaeaea;
color: #0435AD;
border:0;
}

.announce {
margin: 4px 4px 4px 4px;
padding: 2px;
width: 150px;
color: #505050;
background-color: #f4f4f4;
line-height: 1.3em;
}

#extras {
float: right;
width: 150px;
margin: 0 10px 10px 0;
border-left: 2px solid #f0f0f0;
padding: 0 0 0 5px;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0 165px 20px 160px;
border-left: 1px solid #f0f0f0;
/*border-right: 2px solid #f0f0f0;*/
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
margin: 0 5px 0 5px;
}

h3 {
font-size: 1.3em;
margin: 0 0 5px 0;
color: #0066cc;
}

a {
text-decoration: none;
color: #006FCF;
}

a:hover {
text-decoration: underline;
color: #006FCF;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 860px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #006FCF;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

#footer p {
color: #dddddd;
}


#footer ul {
margin: 0.5em 0;
padding: 0;
list-style-type: none;
}

#footer li {
display: inline;
padding: 0 0.5em 0 0.7em;
border-left: 0.08em solid #644;
}

#footer li.first {
padding-left: 0;
border: 0;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

textarea {
width: 400px;
}

div#content hr {
display:block;
}

David,

I think you should change:

#extras p {
margin: 0 0 1.5em 0;
}

to something like:

#extras p {
margin: 0 0 0.5em 0;
}

If you want less space below, your container on the right is called "extras", with (#extras p) you only style the inside that container. The logic is top/right/bottom/left, for the 4 elements.

Ronny

I think what you need is this:

.NewsSummarySummary p { margin-top: 0; }

That will remove the margin from the top of the summary paragraph, which will let it bump up against the title.

David,

stopsatgreen is right. I didn't read carefully and saw the new shown in the rightsidebar. I now see that you're referring to the main-area. Sorry.....

Ronny

Hi Ronny and stopsatgreen

Thank you! Thank you! Thank you! 

Now I know this I have actually adjusted both the top and bottom margins and it all looks much better spaced - although I now have to think about images - they are rather too big now.

Cheers
DG