swape.net » css

Swape Gallery Light

admin — Tue, 18 Aug 2009 19:40:20 +0000

SGL is a php5 script to list pictures.
This script finds all the pictures in a directory under ./test_pic/ and makes menus based on directories.

All you have to do is putt your pictures in ./test_pic/ directory. Or edit $strPathToFiles = './test_pic'; in sgl4.class.php file.

You can organize your pictures by category, by putting it under sub-directories.

The thumbs/ directory must be writable (CHMOD 755) to generate thumbnails automatically first time you visit the site. It will help loading your images faster.

HOW TO INSTALL

All you have to do is unzip the file.
Unpack the sgl4.php and configure the paths.

Putt your pictures under ./test_pic/ directory.
And don't forget to chmod 755 thumbs directory.

SYSTEM REQUIRED.

Server with PHP5.

Download: sgl4

Horizontal menu

admin — Mon, 12 May 2008 20:04:04 +0000

Here is an old trick to make horizontal menu with CSS.

First you have to make a list with UL and LI tags.

class="menu">
href="http://swape.net">My homepage

href="http://linux.org">Linux.org

href="http://google.com">Link to google

Ok here is a list. Now we must make the list items to be horizontal and not vertical. So we must use CSS to set the float to be left and make the list-style: none;

.menu li{ float: left; list-style: none; }

Then we must make them look like a buttons. So we add some borders and padding and margins. Then the whole CSS code look like this:

.menu li{
float: left;
list-style: none;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}
.menu li a {
display:block;
padding:3px;
margin:1px;
border:1px solid #ccc;
text-decoration:none;
color:#332;
background-color: #EEE;
}
.menu li a:hover{
color:#EEE;
background-color: #331;
}

You can download the example file here: Horizontal CSS menu

Semi-transparent png fix in IE6 with CSS

admin — Tue, 06 Feb 2007 20:30:56 +0000

This example shows how you can show semi-transparent png images in IE and don't mess up the code in other browsers. It uses only CSS and no JavaScript.I use the attribute style to make a style for other browsers then IE. And I'm using the filter style that works only for IE in the normal section.But first you have to make a semi transparent png image.
Then make an div layer and set a class name "mydiv"

And here is the CSS code:

.mydiv{
background-repeat: repeat;
position: relative;
display: block;
width:250px;
height:200px;
text-align: center;
/* Mozilla Firefox and other non IE based browsers ignores the filter style*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=true, sizingMethod=scale src="back_g.png");
}
/* IE ignores this part IE can not read styles with [attribute]*/
.mydiv[class]{
background-image: url(back_g.png);
}
body{
background-image: url(BG.png);
background-repeat: repeat;
}

Since IE can not show semi-transparent png images, we have to use the filter style that only works in ie. But if we use this code we have to make sure that other browsers can show the png file as well. So we use the styles with attributes. And since IE can not read this part, we can put everything that IE dose not need to read there.