News align horizontal

[SIMONdesign.nl]

I know there's another post about this, but I can't seem to get it working:

How can I align news articles horizontally. I want three new items displayed beside eachother...

Tnx.

[tyman00]

Please, please, please provide more information when you are posting. What have you done so far in attempt, which other thread are you talking about, etc?

What you will probably need to do is create a container with a specific width for the three articles. Then set the width for each news article so it is 1/3 of the container. Then set the news article to have a float:left.

Example (note: I do not suggest inline styling this is just an example)

Code: Select all

<div id="News Container" style="width: 300px;">
  <div id="News Article 1" style="width:100px; float:left;"> NEWS</div>
  <div id="News Article 2" style="width:100px; float:left;"> NEWS</div>
  <div id="News Article 3" style="width:100px; float:left;"> NEWS</div>
</div>

Now, please spend some time learning CSS instead of relying on us to answer your questions.  The majority of your questions have been very basic CSS questions. Note: W3Schools.com is a great resource.

[SIMONdesign.nl]

Yes, you're right. But english really takes me a long time to write... The other thread I was talking about is this one (looks like I'm not the only one having problems with it  ):

http://forum.cmsmadesimple.org/index.ph ... 392.0.html

I want to use the newsmodule, set the maximum of newsitems to display to three (so far so good). Instead of aligning them vertically I want them to align horizontally.

And... ok, maybe I am a newbie but there are newbie questions everywhere!

[tyman00]

If you are not going to post more information, why should we help you? Instead of spending 4-5 days posting back and forth with me asking you to post simple information you could post a little more information on your first post and I can respond sooner with an answer. My first response to your first post should not be me requesting more information.

You are right there are newbie questions everywhere. However the newbie questions here should be about CMS Made Simple, not basic Web Development and CSS. #5 in the About page (http://www.cmsmadesimple.org/about-link) states you should have basic understanding of web development including HTML and CSS.

Your question is very basic CSS. Your basic CSS question should go on a site that caters to specifically CSS and may be willing to help you out. But beware they may even skip over a basic CSS question like that too.

I showed you how to do it, you should be able to modify your template. Now please go read W3Schools and any other XHTML, CSS tutorials you can find. You will find you are better off that way because you will be self sufficient and not have to wait a few days for someone to answer a basic question that a "designer" like you should already know.

[RonnyK]

Call News 3 times, with

{news number=1 }
{news number=1 start=1}
{news number=1 start=2}

And call every single one in a different container.

Ronny

[SIMONdesign.nl]

Thanks Ronny 

[tyman00]

This still won't make it horizontal though. You have to have the proper CSS to make it float horizontally (See my first response). You can actually modify your News templates so you don't need separate calls for news.

[RonnyK]

tyman00,

true.... I only gave the parameter calls for News, as the div-styling was already given

Ronny

[tyman00]

Oh, I see... That would work too.

Also, If called correctly he could limit the news call to three items then format a summary template that should match the template above.

[RonnyK]

tyman00,

I meant that in the 3 divs, you showed earlier, these 3 could be called in the seperate divs, so the first one I posted in the first div, 2nd in 2nd.....etc....

Ronny

[tyman00]

Yes you can do it that way. I was pointing out that you could minimize the news calls by doing:

{news number=3 summarytemplate="3wide"}

The summary template could be something like
(Note: this isn't exactly it, it is simply the logic that should be used)

Code: Select all

<div id="News Container" style="width: 300px;">
  {foreach $news->item}
  <div style="width:100px; float:left;"> {$news->content}</div>
  {/foreach}
</div>

[Dr.CSS]

Actually it would just be a matter of taking out the pagination from the summary template and doing the css for div.NewsSummary as it is wrapped around each news summary...

div.NewsSummary {float:left; width:31%;} 

31% because not all browsers see 33% the same then you can adjust the padding/margin to get it right...

[tyman00]

That would work too. Good point with the 31% instead of 33%.