webqueen: HTML /CSS

Showing posts with label HTML /CSS. Show all posts

Set opacity to the background color

background: rgba(225, 225, 225, .8)

Temporarily override viewing index.php with index.html

Apache configuration file, there is a command called DirectoryIndex

DirectoryIndex index.php index.html

Change yours to look like this:

DirectoryIndex index.html index.php

CSS Hacks for Different Versions of Firefox

CSS hacks targeting different versions of Firefox. Some of these CSS Firefox hacks are organized according to version number and presented with ease of copying and pasting in mind. That said, here are some notes that apply to all of the hacks in this article.

For each hack, change only #selector, .selector, and of course the declaration blocks.
Hacks that do not validate as CSS are designated with [!] in the associated comment.
If you discover any inconsistencies, incompatibilities, or inoperabilities, please leave a comment.
This post is a work in progress. Please share any Firefox hacks that are not on the list.

Types of CSS hacks

1. target -
We are referring to the application of CSS styles to a particular, targeted browser (or set of browsers) at the exclusion of all others.

2. filtering
We are referring to the application of CSS styles to every browser except a particular browser (or set of browsers).

CSS Hacks targeting all Firefox

/* Target all Firefox */
#selector[id=selector] { color: red; }
/* Target all Firefox */
@-moz-document url-prefix() { .selector { color: red; } }

/* Target all Gecko (includes Firefox) */
*>.selector { color: red; }

CSS Hacks targeting Firefox 1.5 and newer

/* Target Firefox 1.5 and newer [!] */
.selector, x:-moz-any-link, x:only-child { color: red; }

CSS Hacks targeting Firefox 2 and older

/* Target Firefox 2 and older [!] */
body:empty .selector { color: red; }

/* Target Firefox 2 and older */
#selector[id=SELECTOR] { color: red; }

/* Target FireFox 2 and older [!] */
html>/**/body .selector, x:-moz-any-link { color: red; }

CSS Hacks targeting Firefox 3

/* Target FireFox 3 [!] */
html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

Show message in TextBox

JavaScript can be used to display some information to the users.When user click on the textbox,
message will be hidden.very simple one but can be used in HTML forms without using labels.it will
increase the look and feel of the web page.



<script language=JavaScript>

function clear_username()
{
  if (document.text_form.u_input.value == "username")
  document.text_form.u_input.value = "";

  if (document.text_form.input.value =="")
  document.text_form.input.value ="password";
}

function clear_password()
{
  if (document.text_form.input.value == "password")
  document.text_form.input.value = "";

  if (document.text_form.u_input.value == "")
  document.text_form.u_input.value = "username";
}

</script>

This a simple HTML form to and when user click the text-box on-focus event will
call my JavaScript function.

<form name="text_form" action="#" method=post>
<input name=u_input onFocus=clear_username() value="username">
<input name=input onFocus=clear_password() value="password">
<input type=submit value=Submit>
<input type=reset>
</form>

Html / Css simple template free

This free website template has been coded in CSS. This is a very simple one and anyone can change it.
Header banner - image or flash banner
Logo - space to add logo
Navigation bar - Top navigation bar
Two columns
Load content to the left panel