1 Topic by John/Will (edited by 2008-07-27 10:50:52)

  • Registered: 2004-07-03
  • Posts: 2,986

Topic: [FAQ] CuteNews Gallery

I'll do this article to help people, its going to be quite excessive so please try to follow me as best you can (even if your HTML/CSS is not very good, rely on common knowledge for this!):

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">
<php
$template="left";
include('show_news.php');
?>
</div>

You see i added a specific template here. Let's make that template called "left".
If you're done, put everything from the active news subtemplate part inside 

<div class="left">
active news template code
</div>

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!
}


CSS is not added in the templates but in the file that contains the CN include code.
If you don't know how to add css to a file, google for it as there are different ways to do it and everyone has his own preference.

Ok your code as ouputed by the browser 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 becuase 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.

Hope thats KINDA helped you guys out https://cutephp.com/forum/style_emoticons/default/smile.gif


For 4 columns on 5 rows
You just need to put $number = "20"; in your cutenews include code!

2 Reply by FUNimations (edited by 2010-11-06 17:31:20)

  • Registered: 2005-08-28
  • Posts: 16,512

Re: [FAQ] CuteNews Gallery

For those of you who are not familiar with css, or just the float attribute, create the following html file.
We'll use the same codes and names as in the CuteNews Gallery FAQ, only we keep out the CuteNews part.
And we introduce css for the container div. Something that isn't necessary, but isn't bad to apply as well.
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><html>
<head>
<title>Hello Float</title>
<style>
#container
{
width:400px;
height: 400px;
overflow: auto;
}
.left
{
width: 24%;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Hello World</div>
<div class="left">Hello Float</div>
<div class="left">Hello World</div>
<div class="left">Hello Float</div>
<div class="left">Hello World</div>
<div class="left">Hello Float</div>
<div class="left">Hello World</div>
<div class="left">Hello Float</div>
<div class="left">Hello World</div>
<div class="left">Hello Float</div>
<div class="left">Hello World</div>
<div class="left">Hello Float</div>
</div>
</body>
</html></div>
Open the file in your browser and look at it. See how you have columns?
Now we'll edit the file.
In the css change the width value of 'left' from 24% to 99px
See how nothing changes in the browser when you refresh teh page.

Now change the width to 199px
and see how you go from 4 columns to 2 columns.

Float puts elements next to each other starting from the left or the right depending on the float value as long as there's enough space.
When there's no more space on that line, a new line will be started.
You should try and see what happens when you change the float value of 'left' to right. Don't change the css name, just the float value.
The columns should have switched.

Now I hope you understand what the float does and you can follow the above FAQ.