Joomla Templates Club 406,261 posts

[filmlover7 Friend filmlover7Join date: March 2010Posts: 111Downloads:0Uploads:1 Thanks: 41 Thanked: 1 times in 1 posts]

#150379

HI,
How do you set the Article to have TWO COLUMNS when you click on it from the Front Page in Teline III?
What I get is a single column that is too wide and doesn’t read easily.

I want it to be in two columns like a magazine.

It seems that there is no way to set it in the Editor nor is there a setting in parameters.

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#340432

Hello,
<blockquote>It seems that there is no way to set it in the Editor nor is there a setting in parameters.</blockquote>
That is true in so far are you are looking for settings.
But in the editor you can set up your page with 2 columns ‘by hand’, by using a table or div-structure.

Regards,
Micrantha

[filmlover7 Friend filmlover7Join date: March 2010Posts: 111Downloads:0Uploads:1 Thanks: 41 Thanked: 1 times in 1 posts]

#340503

<em>@micrantha 174668 wrote:</em><blockquote>Hello,

That is true in so far are you are looking for settings.
But in the editor you can set up your page with 2 columns ‘by hand’, by using a table or div-structure.

Regards,
Micrantha</blockquote>
Thank you.
What type of div structure exactly?
Would it Flow from one column to the next, or would you layout 1/2 your story then put the other 1/2 in a div?
Thanks.

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#340555

Hello,
I would set up a 2-column-table or 2 floating divs with defined width, contained in a wrapper div. But for good control of div-layout you have to be sure you can code them well.

Good luck,
Micrantha

[filmlover7 Friend filmlover7Join date: March 2010Posts: 111Downloads:0Uploads:1 Thanks: 41 Thanked: 1 times in 1 posts]

#340575

<em>@micrantha 174814 wrote:</em><blockquote>Hello,
I would set up a 2-column-table or 2 floating divs with defined width, contained in a wrapper div. But for good control of div-layout you have to be sure you can code them well.

Good luck,
Micrantha</blockquote>
i am not a coder, M. — more of a visual designer. Do you by any chance have code for the div solution?

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#340618

Hello,
You could for example set it up in following way.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum, nibh elementum porta ornare, purus sem convallis est, et convallis lacus purus id odio. Vestibulum quam justo, venenatis in molestie quis, ultrices eget massa. Nam hendrerit dignissim leo tristique luctus. Proin et augue quis mi lobortis vulputate.
<div style="width: 100%;">
<div style="width: 46%; float: left;">Donec condimentum felis a dui dapibus sed porttitor nisi pretium. Nullam posuere accumsan elit non molestie. Maecenas vehicula, eros eu elementum aliquet, purus tellus viverra nisl, quis aliquet risus urna sed metus. Maecenas aliquet tincidunt metus eu semper. Sed ante magna, suscipit ac vehicula eget, aliquet vel sem. Pellentesque sit amet urna magna, sed interdum nisl. Sed odio massa, aliquam a fringilla ac, dapibus non libero.</div>
<div style="width: 46%; float: right;">Sed ac pellentesque risus. Nunc scelerisque velit odio. Quisque ornare faucibus malesuada. Fusce convallis imperdiet tempus. Sed vitae porttitor erat. Ut convallis posuere mattis. Praesent lectus enim, elementum vel semper in, vulputate sit amet elit. Maecenas sit amet nisl ac urna pretium tincidunt. Morbi faucibus pulvinar odio, vel ultricies nisl rhoncus vel. Praesent erat dolor, mollis ut suscipit ut, blandit at lectus.</div>
</div>

Now you have a top part in full width, and two columns of 46%, floating left and right in order to have a middle margin of 8%.

Hope you can use it.
Good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. filmlover7

[filmlover7 Friend filmlover7Join date: March 2010Posts: 111Downloads:0Uploads:1 Thanks: 41 Thanked: 1 times in 1 posts]

#340638

<em>@micrantha 174905 wrote:</em><blockquote>Hello,
You could for example set it up in following way.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum, nibh elementum porta ornare, purus sem convallis est, et convallis lacus purus id odio. Vestibulum quam justo, venenatis in molestie quis, ultrices eget massa. Nam hendrerit dignissim leo tristique luctus. Proin et augue quis mi lobortis vulputate.
<div style="width: 100%;">
<div style="width: 46%; float: left;">Donec condimentum felis a dui dapibus sed porttitor nisi pretium. Nullam posuere accumsan elit non molestie. Maecenas vehicula, eros eu elementum aliquet, purus tellus viverra nisl, quis aliquet risus urna sed metus. Maecenas aliquet tincidunt metus eu semper. Sed ante magna, suscipit ac vehicula eget, aliquet vel sem. Pellentesque sit amet urna magna, sed interdum nisl. Sed odio massa, aliquam a fringilla ac, dapibus non libero.</div>
<div style="width: 46%; float: right;">Sed ac pellentesque risus. Nunc scelerisque velit odio. Quisque ornare faucibus malesuada. Fusce convallis imperdiet tempus. Sed vitae porttitor erat. Ut convallis posuere mattis. Praesent lectus enim, elementum vel semper in, vulputate sit amet elit. Maecenas sit amet nisl ac urna pretium tincidunt. Morbi faucibus pulvinar odio, vel ultricies nisl rhoncus vel. Praesent erat dolor, mollis ut suscipit ut, blandit at lectus.</div>
</div>

Now you have a top part in full width, and two columns of 46%, floating left and right in order to have a middle margin of 8%.

Hope you can use it.
Good luck,
Micrantha</blockquote>
THANK YOU SO MUCH, M.
This tip really makes a difference to my layout!
1. A further question… What are the consequences of making the overall width narrower by changing your 100% to 90% or even a bit less? Will that mess up anything in Teline III?

2. Also, could I use the code you gave me for a “template” and then copy and rename it for any new article?
Again, thank you!
Cheers.

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#340664

Hello,
Yes, you can change percentage of width of containing div, and of column divs in order to get middle margin you want.
You could also do it in this way, to get more space around the text:

<div style="width: 100%;">
<div style="width: 46%; float: left; margin-left:2%">Donec condimentum felis a dui dapibus sed porttitor nisi pretium. Nullam posuere accumsan elit non molestie. Maecenas vehicula, eros eu elementum aliquet, purus tellus viverra nisl, quis aliquet risus urna sed metus. Maecenas aliquet tincidunt metus eu semper. Sed ante magna, suscipit ac vehicula eget, aliquet vel sem. Pellentesque sit amet urna magna, sed interdum nisl. Sed odio massa, aliquam a fringilla ac, dapibus non libero.</div>
<div style="width: 46%; float: right; margin-right:2%">Sed ac pellentesque risus. Nunc scelerisque velit odio. Quisque ornare faucibus malesuada. Fusce convallis imperdiet tempus. Sed vitae porttitor erat. Ut convallis posuere mattis. Praesent lectus enim, elementum vel semper in, vulputate sit amet elit. Maecenas sit amet nisl ac urna pretium tincidunt. Morbi faucibus pulvinar odio, vel ultricies nisl rhoncus vel. Praesent erat dolor, mollis ut suscipit ut, blandit at lectus.</div>
</div>
So you can play with the percentages to get what you want.

And when you have found the percentages for your aticle page, you can of course repeat it in every new article. But you will have to work partly in the code of the page, without the editor. You could make a default dummy content for an article, paste it in every new article and than replace dummy text with real content.

Good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. filmlover7

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#340718

Dear filmlover7!

Did you resolve this issue ?

Thanks

[filmlover7 Friend filmlover7Join date: March 2010Posts: 111Downloads:0Uploads:1 Thanks: 41 Thanked: 1 times in 1 posts]

#340726

<em>@tienhc 175036 wrote:</em><blockquote>Dear filmlover7!

Did you resolve this issue ?

Thanks</blockquote>
Yes, thank you. So far so good.

[madeline63 Friend madeline63Join date: January 2010Posts: 92Downloads:0Uploads:30 Thanks: 11 Thanked: 1 times in 1 posts]

#347945

hi,

i want to remain 1 column for my article, but it too wide to be read.
a 800px width and centered table is made to contain those articles, in IE it look just fine. However when at firwefox or safari, the table align to left… any code could be change to fixed?

thank you very much

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#347955

Hello,
Maybe your issue can be solved by adding a rule for centering to which Firefox reacts:

margin: 0 auto;

Now left and right margin are calculated automatically for the element which has a width.

Hope it helps you,
Micrantha

[Author]

Posts