 |
 |
 |
 |
 |
| Author |
Message |
FI-DD
Admin
Joined: 22 Sep 2005
Posts: 2668
Location: Germany |
|
 How to show the news like a gallery |
 |
This tutorial shows you how to show your news like this:
# # # #
# # # #
# # # #
instead of each post below the previous:
#
#
#
#
Tutorial taken from here.
CSS can work in divs, layers and floats.
Floats can be classes, classes can be set as specific widths.
So, your float must be left or right, pick one, preferrably left.
Your container can be a class (for XHTML validity).
You can style this "container" class in CSS, I recommend you do.
The first thing you need is your container. This will be your "Box" so you do:
 | | <div class="container">text here</div> |
Inside this container, you will be using the float: left; commands found in CSS, please look them up if you are not very familiar with how they work. Here is your first example:
| | <div class="container">
<div class="left">news</div>
</div> |
Your container now has one float in it, this will be your first news element. The class "left" should contain "float: left;" somewhere in the css.
Now for four columns you need to specify the width of each class inside the container. The class "left" will begin to look like this:
| | .left {
float: left;
width: 25%; // or its best to use 24% sometimes!
} |
Ok your code should now look like:
| | <div class="container">
<div class="left">news</div>
<div class="left">news</div>
<div class="left">news</div>
<div class="left">news</div>
</div> |
See how there is 4 news and each one is beside another?... Now because you have specified a WIDTH in each of the class="left" above when you add a FIFTH news item, it will drop down BELOW the first, a SIXTH will be below the second, a SEVENTH will be below the third and so on so forth.
For 4 columns on 5 rows
You just need to put $number = "20"; in your cutenews include code!
|
|
| Wed Aug 16, 2006 7:38 pm |
  |
|
Guest
|
| |
|
Please login to hide the ads.
|
|
|
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum
|
|
|
 |
 |
|
