Re: News Module
Posted: Sun Sep 13, 2009 10:15 am
Yes it can but it's a bit tricky.
You could just make two divs in your template. One for {content} and one for {news}. But if you do that they will not have the same height regardless of their content. I searched the web and came up with this:
You have to create a container div in which you place the two others. Take a look at my template and main stylesheet:
What I did was shove all my content including news div to the left out of my site, then using "left" placing it back in. Make sure floats are set to left and position is relative. As you can see the container is set to 100%, after which you can set your content and news widths relative to your container. So I have 75% for my content and 20% for news. The extra 5% I used for margins and so on. If you would set it to 75% and 25% they probably would line up next to each other.
You could just make two divs in your template. One for {content} and one for {news}. But if you do that they will not have the same height regardless of their content. I searched the web and came up with this:
You have to create a container div in which you place the two others. Take a look at my template and main stylesheet:
What I did was shove all my content including news div to the left out of my site, then using "left" placing it back in. Make sure floats are set to left and position is relative. As you can see the container is set to 100%, after which you can set your content and news widths relative to your container. So I have 75% for my content and 20% for news. The extra 5% I used for margins and so on. If you would set it to 75% and 25% they probably would line up next to each other.
Code: Select all
<!-- start content -->
<div id="inhoud">
<div id="container">
<div id="content">
{content}
<div id="print">{cms_module module='printing' script="true" popup="true"}
{if $return_url != ""}
<div id="TerugLink">{$return_url}</div>
{/if}
</div>
</div>
<div id="news">
{news number="3" moretext="Lees verder..." category="general"}
</div>
</div>
</div>
<!-- end content -->
Code: Select all
div#website{
position: absolute;
width: 1000px;
left: 50%;
margin-left: -500px;
margin-top: 2em;
margin-bottom: 2em;
border: 1px solid #666666;
}
a:link, a:visited, a:active, a:hover{
text-decoration: none;
}
a:link, a:visited, a:active{
color: #3366FF;
}
a:hover{
color: #0000CC;
}
div#header{
height:150px;
background: url(uploads/images/kop.png) no-repeat;
border-bottom: 1px dotted #666666;
}
div#menu{ /*Verder staan alle elementen van het menu in de CBX menu stylesheet*/
border-bottom: 1px dotted #666666;
}
div#inhoud{ /*De standaard linker inhoud van een pagina*/
float: left;
width: 100%;
overflow: hidden;
position: relative;
background: url(uploads/images/inhoud.png) repeat-y left;
padding-top: 5px;
}
div#container{ /*Een aparte div voor het rekken van de twee kolommen op de pagina*/
width: 100%;
float: left;
right: 75%;
position: relative;
}
div#content{
width: 75%;
padding: 0 0 0 2%;
float: left;
position: relative;
overflow: hidden;
left: 75%;
}
div#news{
width: 20%;
float: left;
border-left: 1px solid #666666;
border-bottom: 1px dotted #666666;
position: relative;
overflow: hidden;
left: 78%;
}