Tips & Tricks Archive

Horizontal menu


Here is an old trick to make horizontal menu with CSS.
First you have to make a list with UL and LI tags.
 
<ul class="menu">
<li><a href="http://swape.net">My homepage</a></li>
<li><a href="http://linux.org">Linux.org</a></li>
<li><a href="http://google.com">Link to google</a></li>
</ul>
 

My homepage
Linux.org
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 [...]

Checkbox value


When you post a form with checkbox it dose not return any value when the checkbox is not ticked.
This is something that should have been fixed a long time ago.
But for now here is the solution:
 
<form action="?" method="post">
<input name="myCheckbox" type="hidden" value="0" />
<input name="myCheckbox" type="checkbox" />
</form>
 
You put an hidden input before checkbox input with the same [...]

CSS shadow


Here is a fast method to make an shadow around your text boxes.
Using only CSS and not any background image, makes it easy and dynamic.

Here is how the CSS code looks like:
 
 
.out{
display:block;
background:#CCC;
position:relative;
width:9em;
}
.in {
background:#fff;
border:1px solid #999;
position:relative;
text-align:center;
padding:5px;
[...]

CSS pop-ups


Here is an good example how to hide layers and show them on mouse over effect.

Here is how the CSS part looks like:
 
div#testlinks {
position: absolute;
top: 20px; left: 12px; width: 166px;
font: 12px Verdana, sans-serif;
}
div#testlinks a {
display: block; font: bold 1em sans-serif;
padding: 5px 10px; margin: 0 0 [...]

Semi-transparent png fix in IE6 with CSS


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 [...]