<?php
/*paging*/
Line 1: $pg=(isset($_GET["pg"]) && is_numeric($_GET["pg"]) && $_GET["pg"]>0 ? $_GET["pg"] : 1);
Line 2: $rowsperpage=10;
Line 3: $offset=($pg>1 ? ($pg-1)*$rowsperpage : 0 );
Line 4: $limitstr=" LIMIT $offset, $rowsperpage";
?>

<?php
print '<div class="paging"><ul>';
for($i=1; $i<=$maxpage; $i++){
  if($pg==$i)
     print '<li><span>'.$i.'</span></li>';
  else
     print '<li><a href="?pg='.$i.'">'.$i.'</a></li>';
}
print "</ul></div>";
?>

using System; //Just so we can use the shortcut Console instead of System.Console
using System.IO; //Gives us access to file, directory objects

string path="C:/"; //set the root path we want to recurse through.

//check if the directory exists
if(Directory.Exists(path)){
        DirectoryInfo di=new DirectoryInfo(path);
        //based on a path, this object will give you directory information about that directory
        printDirectories(di);
        //this method will actually go through our directories and print out information
}else{
        Console.WriteLine("Directory does not exist. Press Enter to exit");
        Console.ReadLine(); //when you hit return the program will terminate.
}

static void printDirectories(DirectoryInfo di){
       foreach(FileInfo fi in di.GetFiles()){
              //we are going to run code for each file
              Console.WriteLine(fi.FullName); //this prints out the full file name including the path
       }

      //now that we process this directory for files, we do the same for every subdirectory in this directory
      foreach(DirectoryInfo subDir in di.GetDirectories()){
             //we are going to call the printDirectories method, with the subdirectory as the root.
            //its files will be processed, then its subdirectories will be checked
            //this happens foreach Directory in the current directory
            printDirectories(subDir); //recurse
      }
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

<!--[if IE 6]>
Any instructions in this comment will be parsed by IE 6.
<![endif]-->

<!--[if IE 7]>
Any instructions in this comment will be parsed by IE 7.
<![endif]-->

<!--[if lte IE 7]>
Any instructions in browsers less than or equal to IE7 will
parse these comments.
<![endif]-->

Example of using conditional comments:
<!--[if IE 7]>
<link href="styles/ie7styles.css" rel="stylesheet" type="text/css" />
<![endif]-->

Wallpaper/Image Gallery Tutorial using HTML/CSS

One of the most important things ive learned while learning about html and css is the power of the unordered list. I was making a wallpaper gallery for my Death Note website and asked on Web Design Forums.net the best way to go about this. The answer I got changed the way I design and the way I layout my sites.

I'd like to thank Shadowfiend for showing me this technique. Learning it has changed the way i design. Check out his blog here: Shadowfiend | http://shadowfiend.posterous.com/

Unordered lists are a familiar topic of study in beginner html courses, however the markup often looks like

<h1>Fruits</h1>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>

However, this is not the only way to use them, nor is it the most powerful.
The unordered list is often used many times with Menus (both vertical and horizontal) as well as with image galleries.
I'm not going to show you the menu, because the wallpaper effect is harder, and if you learn it, you'll easily be able to make a menu.
For this, we are going to use any image. Find one on Google Images Search.
Alright now that we have our wallpaper, we will use a layout we created in my last post. If you want, you can go there and download layoutfooter.html, if you are comfortable with css you can just continue reading.

Now, between <div id="content"> we will add an unordered list as so...

<ul class="gallery">
<li>Image1</li>
<li>Image2</li>
<li>Image3</li>
</ul>

For now, dont use actual images, well use those after.
The first thing you may notice previewing these in your browser is that there are bullets. This is the default behavior of the unordered list.
We will take these off.

Between your <style> tags, add these rules:
ul.gallery{
width: 100%; /*this can be changed, its at 80% for better visualization at the moment*/
list-style-type: none;
overflow: hidden; /*helps fix certain issues*/
border: 1px solid blue; /*this helps us visualize while were laying out, this will be removed in the final product*/
}

Alright, now that we have styled our outer container, lets style our list items.

ul.gallery li{
border: 1px solid red; /*visualization*/
float: left; /* what this does is place each li out of normal flow, and as far left as it can. Since each li is floated left they will sit next to each other*/
width: 30%; /*set a width*/
height: 190px; /*set the row-height(actually the li height, but it simulates row height)*/
}

Heres what you should have at the moment (your list items will be higher)

The list items are right next to each other. We can add a margin-left on the li items to solve this. Lets do that now.

ul.gallery li{
/* keep all existing rules */
margin-left: 2%;
}

You can work in px, or %. If your working in a fixed width layout, it does not really matter. If you refresh and take a look, you'll notice were looking a lot better. Now, lets add our actual images.

Your unordered list will now look like this:

<ul class="gallery">
<li><img src="wall.jpg" alt="Wallpaper1"/></li>
<li><img src="wall.jpg" alt="Wallpaper2"/></li>
<li><img src="wall.jpg" alt="Wallpaper3"/></li>
</ul>

Dont worry about the images sticking out...we will fix this.
Ideally, you should have a full size image, and a thumbnail image. This allows for faster load times. By reducing the size of a pictures height and width in css, you do NOT reduce the load time, the full image is loaded, and then scaled, so best practice = have 2 sizes!

now we will add rules to style our image

ul.gallery li img{
display: block;
margin: 0 auto;
width: 180px;
height: 150px;
border: 1px solid #ccc; /*border effect*/
padding: 2px 8px 10px 8px; /*padding +border gives a nice effect*/
margin-bottom: 2px; /*push the next item below me down 2 pixels*/
}

You'll notice theres a little space beneath the image, dont get rid of it! We have plans for this . Also, a lot of the above was included because it looked nice. All of the above are optional, the image would just be aligned left with no padding/border.

Modify your markup so it looks like this

<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li> <li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li> <li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>

We will now style the p tag. Remember the margin-bottom on the img ? This will push this down 2pixels, so we have space

ul.gallery li p{
margin: 0 auto; /* center the box*/
text-align: center; /* center the text within the box*/
width: 192px; /*set a width for our label*/
border: 1px solid #ccc;
}

Copy and paste the li's. So that you double/triple them, like so.

<ul class="gallery">
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
</ul>

Here you'll notice that the spacing between rows is none.
We add this rule to ul.gallery li{ margin-bottom: 5px;}

Now, take out the borders from ul.gallery and ul.gallery li And were done

here is the full css
-------------------------------------------------------------------------
ul.gallery{
width: 100%; /*this can be changed*/
list-style-type: none;
overflow: hidden; /*helps fix certain issues*/
}

ul.gallery li{
width: 30%;
height: 190px; /*set the row-height(actually the li height, but it simulates row height)*/
margin-left: 2%;
margin-bottom: 5px;
float: left;
}

ul.gallery li img{
display: block;
margin: 0 auto;
width: 180px;
height: 150px;
border: 1px solid #ccc; /*border effect*/
padding: 2px 8px 10px 8px; /*padding +border gives a nice effect*/
margin-bottom: 2px; /*push the next item below me down 2 pixels*/
}

ul.gallery li p{
border: 1px solid #ccc;
width: 192px; /*set a width for our label*/
text-align: center;
margin: 0 auto;
}

AND the final product:

Hope you enjoyed.
Feel free to comment/make requests.

Download: wallpaper_tut.html

Right click and click Save Link As..to Download