Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review

file News beside each other

More
12 years 4 months ago #592 by matteopagni
News beside each other was created by matteopagni
hello,
I've found the same question on JED comments, but I've not been able to find the answers...sorry if someone gave it already!

I'm trying to have the latest news close to each other instead of one after the other:

Not this way:
news 1
news 2
news 3

But this way:
news 1 news 2 news 3

How could I achieve that?

Thank you very much in advance

Matteo

Please Log in or Create an account to join the conversation.

More
12 years 4 months ago #595 by admin
Replied by admin on topic Re: News beside each other
Hello,
you can achieve this with CSS, by adding the following code to your template:
.newslist {
    overflow: hidden; /*to avoid overlappings */
}

.newslist .news {
    display: inline-block; /* needed for IE I think */
    float: left;
    width: 200px; /* whichever size you want */
}
Olivier.

Please Log in or Create an account to join the conversation.

More
12 years 4 months ago #605 by matteopagni
Replied by matteopagni on topic Re: News beside each other
Hello Olivier and thank you for your time,
sorry but I'm quite a newbie with Joomla and I don't know exactly where to put my hands...
...as first step I simply added the lines you wrote to the style.css.php file of your module...but nothing changed.

Then I changed the first lines of the same file as following:

ORIGINAL
.latestnewsenhanced_<?php echo $suffix; ?>.newslist {
}

.latestnewsenhanced_<?php echo $suffix; ?> .onecatlink {
margin-top: 20px;
}

.latestnewsenhanced_<?php echo $suffix; ?> .news {
overflow: hidden;
margin-top: 10px;
}

UPDATED:
.latestnewsenhanced_<?php echo $suffix; ?>.newslist { overflow: hidden; /*to avoid overlappings */
}


.latestnewsenhanced_<?php echo $suffix; ?>.newslist .news {
display: inline-block; /* needed for IE I think */
float: left;
width: 200px; /* whichever size you want */
}

.latestnewsenhanced_<?php echo $suffix; ?> .onecatlink {
margin-top: 20px;
}

.latestnewsenhanced_<?php echo $suffix; ?> .news {
overflow: hidden;
margin-top: 10px;
}

But nothing changed as well...
Is quite clear that I'm missing something!

Could you help?
In case you need to know, I'm using tk_watercolors as a template.

Thank you very much

Matteo

Please Log in or Create an account to join the conversation.

More
12 years 4 months ago - 12 years 4 months ago #606 by admin
Replied by admin on topic Re: News beside each other
Hello Matteo,
The changes I suggested work on my template, but something different may need to be done with yours. Could you send me the 'live' URL so I can check what is wrong? Thanks.
Olivier.
Last edit: 12 years 4 months ago by admin.

Please Log in or Create an account to join the conversation.

More
12 years 4 months ago #608 by matteopagni
Replied by matteopagni on topic Re: News beside each other
Hi Olivier and thank again for your kindness.

You can find your module working on:

www . faqtotumwebdesignermilano . it / armj

it is now set as standard, none of the changes you suggested are on...because I didn't know where to apply them!
;)

Thank you again

Matteo

Please Log in or Create an account to join the conversation.

More
12 years 4 months ago #611 by admin
Replied by admin on topic Re: News beside each other
Thank you!
The code I gave you works on your template. I modified a couple things:
.latestnewsenhanced_93.newslist {
    overflow: hidden; /* to avoid overlappings */
}
.latestnewsenhanced_93 .news:first-child {
    margin-top: 10px !important;
}
.latestnewsenhanced_93 .news {
    display: inline-block; /* needed for IE */
    float: left;
    width: 300px;
}

Add this code to your template's CSS as is (template.css usually).
Olivier.

Please Log in or Create an account to join the conversation.