Tuesday, August 20, 2013

CSS visibility hidden

<html>
<head>
<style type="text/css">
h1.hidden {visibility:hidden}
</style>
</head>

<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>

</html>

Result


Posted by at No comments:
Labels: , ,

CSS pseudo element before

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
h1:before {content:url(bird_02.jpg)}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> Internet Explorer 8 (and higher) supports the content property
if a !DOCTYPE is specified.</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS pseudo element first letter

<html>
<head>
<style type="text/css">
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>

<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS pseudo element first line

<html>
<head>
<style type="text/css">
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can use the :first-line pseudo-element to add a special effect to the first line of a text.</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS pseudo element multiple

<html>
<head>
<style type="text/css">
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS pseudo first child

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>The sky is blue.</p>
<p>The sky is blue.</p>
<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS pseudo first child2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS pseudo focus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>
</head>

<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>

<p><b>Note:</b> Internet Explorer 8 (and higher) supports the :focus pseudo-class if a !DOCTYPE is specified.</p>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS pseudo lang

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>
<p><b>Note:</b> Internet Explorer 8 (and higher) supports the :lang pseudo class
if a !DOCTYPE is specified.</p>
</body>
</html>

Result

Posted by at No comments:
Labels: , ,

CSS pseudo styles hyperlinks

<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>

<body>
<p>Mouse over the links to see them change layout.</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
</body>

</html>

Result


Posted by at No comments:
Labels: , ,

CSS table border collapsed

<html>
<head>
<style type="text/css">
table {border-collapse:collapse}
</style>
</head>

<body>
<table border="1">
<tr>
<td>Munirul</td>
<td>Hasan</td>
</tr>
<tr>
<td>Shahin</td>
<td>Shahin</td>
</tr>
</table>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS table borders distance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table.ex1
{
border-collapse:separate;
border-spacing:10px;
}
table.ex2
{
border-collapse:separate;
border-spacing:10px 50px;
}
</style>
</head>

<body>
<table class="ex1" border="1">
<tr>
<td>Munirul</td>
<td>Hasan</td>
</tr>
<tr>
<td>Shahin</td>
<td>Tuhin</td>
</tr>
</table>
<br />

<table class="ex2" border="1">
<tr>
<td>Mahbubur</td>
<td>Rahman</td>
</tr>
<tr>
<td>Musa</td>
<td>Isa</td>
</tr>
</table>

<p><b>Note:</b> Internet Explorer supports the border-spacing property only if a !DOCTYPE is specified!</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS table empty cells

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table
{
border-collapse:separate;
empty-cells:hide;
}
</style>
</head>

<body>
<table border="1">
<tr>
<td>Munirul</td>
<td>Hasan</td>
</tr>
<tr>
<td>Shahin</td>
<td></td>
</tr>
</table>

<p><b>Note:</b> Internet Explorer supports the empty-cells property only if a !DOCTYPE is specified!</p>
</body>
</html>

Result

 

Posted by at No comments:
Labels: , ,

CSS table layout set

<html>
<head>
<style type="text/css">
table.ex1 {table-layout:auto}
table.ex2 {table-layout:fixed}
</style>
</head>

<body>
<table class="ex1" border="1" width="100%">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>
<br />

<table class="ex2" border="1" width="100%">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS table position caption

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
caption {caption-side:bottom}
</style>
</head>

<body>

<table border="1">
<caption>This is a caption</caption>
<tr>
<td>Munirul</td>
<td>Hasan</td>
</tr>
<tr>
<td>Shahin</td>
<td>Tuhin</td>
</tr>
</table>

<p><b>Note:</b> Internet Explorer supports the caption-side property only if a !DOCTYPE is specified!</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS test style external

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>
</html>

Result

 

Posted by at 1 comment:
Labels: , ,

CSS test style external 02

<html>
<head>
<link rel="stylesheet" type="text/css" href="style_02.css" />
</head>

<body>

<h1>This is a header 1</h1>
<hr />

<p>You can see that the style sheet formats the text</p>

<p><a href="http://www.google.com" target="_blank">This is a link</a></p>

</body>
</html>

Result

 

Posted by at No comments:
Labels: , ,

CSS test style inline

<html>
<body>

<p style="color: red; margin-left: 20px; font-size: 30px;">
This is a paragraph
</p>

</body>
</html>

Result

 

Posted by at No comments:
Labels: , ,

CSS test style internal

<html>

<head>

<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>

</head>

<body>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
</body>

</html>

Result


Posted by at No comments:
Labels: , ,

CSS text alignment

<html>
<head>
<style type="text/css">
h1 {text-align:center}
p.date {text-align:right}
p.main {text-align:justify}
</style>
</head>

<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants (plants of the division Magnoliophyta, also called angiosperms). The biological function of a flower is to mediate the union of male sperm with female ovum in order to produce seeds. The process begins with pollination, is followed by fertilization, leading to the formation and dispersal of the seeds. For the higher plants, seeds are the next generation, and serve as the primary means by which individuals of a species are dispersed across the landscape. The grouping of flowers on a plant are called the inflorescence.</p>
<p><b>Note:</b> Try to resize the browser window to see how justify works.</p>
</body>

</html>

Result


Posted by at No comments:
Labels: , ,

CSS text color

<html>
<head>
<style type="text/css">
body {color:red}
h1 {color:#00cc00}
p.ex {color:rgb(0,0,255)}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS text decoration

<html>
<head>
<style type="text/css">
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>

</html>

Result


Posted by at No comments:
Labels: , ,

CSS text decoration none

<html>
<head>
<style type="text/css">
a {text-decoration:none}
</style>
</head>

<body>
<p>Link to: <a href="http://www.google.com">google.com</a></p>
</body>

</html>

Result


Posted by at No comments:
Labels: , ,

CSS text direction

<html>
<head>
<style type="text/css">
div.ex1 {direction:rtl}
</style>
</head>
<body>

<div>Some text. Default writing direction.</div>
<div class="ex1">Some text. Left-to-right direction.</div>

</body>
</html>

Result

 

Posted by at No comments:
Labels: , ,

CSS text indentation

<html>
<head>
<style type="text/css">
p {text-indent:50px}
</style>
</head>
<body>

<p>The Sun is the star at the center of the Solar System. The Earth and other matter (including other planets, asteroids, meteoroids, comets, and dust) orbit the Sun, which by itself accounts for about 99.86% of the Solar System's mass.</p>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS text letter spacing

<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
</style>
</head>

<body>

<h1>The Sun is the star at the center of the Solar System.</h1>
<h2>The Sun is the star at the center of the Solar System.</h2>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS text line height

<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>

<body>

<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
</p>

<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>

<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>

</body>
</html>

 Result

 

Posted by at No comments:
Labels: , ,

CSS text transformation

<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase}
p.lowercase {text-transform:lowercase}
p.capitalize {text-transform:capitalize}
</style>
</head>

<body>

<p class="uppercase">The Sun is the star at the center of the Solar System.</p>
<p class="lowercase">The Sun is the star at the center of the Solar System.</p>
<p class="capitalize">The Sun is the star at the center of the Solar System.</p>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS text vertical align

<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.super {vertical-align:super}
</style>
</head>

<body>

<p>An <img src="logo.jpg" alt="Systech" width="224" height="63" /> image inside a paragraph, with a default vertical alignment.</p>

<p>An <img class="top" src="logo.jpg" alt="Systech" width="224" height="63" /> image inside a paragraph, with a text-top alignment.</p>

<p>An <img class="super" src="logo.jpg" alt="Systech" width="224" height="63" /> image inside a paragraph, with a text-bottom alignment.</p>

</body>
</html>

Result

Posted by at No comments:
Labels: , ,

CSS text word spacing

<html>
<head>
<style type="text/css">
p
{
word-spacing:30px;
}
</style>
</head>

<body>

<p>The Sun is the star at the center of the Solar System.</p>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS text word spacing nowrap

<html>
<head>
<style type="text/css">
p
{
white-space:nowrap;
}
</style>
</head>
<body>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

</body>
</html>

Result

Posted by at No comments:
Labels: , ,

CSS text-box

<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>
<img src="250px.gif" width="250" height="1" /><br /><br />

<div class="ex">The line above is 250px wide.<br />
The total width of this element is also 250px.</div>

<p><b>Important:</b> This example will not display correctly in IE!<br />
However, we will solve that problem in the next example.</p>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS text box doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>
<img src="250px.gif" width="250" height="1" /><br /><br />

<div class="ex">The line above is 250px wide.<br />
Now the total width of this element is also 250px.</div>

<p><b>Note:</b> In this example we have added a DOCTYPE declaration (above the html element), so it displays correctly in all browsers.</p>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS text font boldness

<html>
<head>
<style type="text/css">
p.normal {font-weight:normal}
p.light {font-weight:lighter}
p.thick {font-weight:bold}
p.thicker {font-weight:900}
</style>
</head>

<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>

</html>

Result

 

Posted by at No comments:
Labels: , ,

CSS text font one declaration

<html>
<head>
<style type="text/css">
p.ex1
{
font:italic arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px arial,sans-serif;
}
</style>
</head>

<body>

<p class="ex1">A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants (plants of the division Magnoliophyta, also called angiosperms).</p>

<p class="ex2">A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants (plants of the division Magnoliophyta, also called angiosperms). </p>

</body>
</html>

Result

Posted by at No comments:
Labels: , ,

CSS text font variant

<html>
<head>
<style type="text/css">
p.normal {font-variant:normal}
p.small {font-variant:small-caps}
</style>
</head>

<body>
<p class="normal">Bangladesh is our Motherland.</p>
<p class="small">Bangladesh is our Motherland.</p>
</body>

</html>

Result


Posted by at No comments:
Labels: , ,

CSS text percent em

<html>
<head>
<style>
body {font-size:100%}
h1 {font-size:2.5em}
h2 {font-size:1.875em}
p {font-size:0.875em}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

</body>
</html>

Result

 

Posted by at No comments:
Labels: , ,

CSS text size em

<html>
<head>
<style>
h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:14px}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS text size pixel

<html>
<head>
<style>
h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:14px}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS transparent image

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40)
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<img src="klematis_big.jpg" width="150" height="113" alt="klematis"
style.opacity=0.4;filters.alpha.opacity=40" />

</body>
</html>

Result

 

Posted by at No comments:
Labels: , ,

CSS transparent image mouseover effect

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40)
}
</style>
</head>
<body>

<img src="fla_01.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="fla_02.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>

</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS transparent-text-box

<html>
<head>
<style type="text/css">
div.background
{
  width: 500px;
  height: 250px;
  background: url(fla_01.jpg) repeat;
  border: 2px solid black;
}
div.transbox
{
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  filter:alpha(opacity=60);
  opacity:0.6;
}
div.transbox p
{
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>

Result

 

Posted by at No comments:
Labels: , ,

Monday, August 19, 2013

CSS pseudo element after

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
h1:after {content:url(bird_02.jpg)}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> Internet Explorer 8 (and higher) supports the content property
if a !DOCTYPE is specified.</p>
</body>
</html>

Result

Posted by at No comments:
Labels: , ,

CSS pseudo classes anchor

<html>
<head>
<style type="text/css">
a:link {color:#FF0000}    /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF}   /* mouse over link */
a:active {color:#0000FF}  /* selected link */
</style>
</head>

<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS position shape

<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</style>
</head>

<body>
<img src="pen.JPG" width="100" height="107" />
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS position scroll

<html>
<head>
<style type="text/css">
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}

div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>

<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>

Result

Posted by at No comments:
Labels: , ,

CSS position relative 02

<html>
<head>
<style type="text/css">
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p>
</body>

</html>

Result


Posted by at No comments:
Labels: , ,

CSS position relative

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px;
}

h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>

</html>

Result

Posted by at No comments:
Labels: , ,

CSS position overlapping

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="pen.JPG" width="100" height="107" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,

CSS position fixed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Systech Digital Ltd.</p>
<p><b>Note:</b> Internet Explorer supports the fixed value only if a !DOCTYPE is specified!</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

Result


Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)