Positioning Properties

Positioning Properties

1.       Static

This was default positioning.

Top, right, bottom and left don’t make effects

Parent=all. Has no effect. Keep everything in order.

2.       Fixed

This like absolute positioning. Like absolute but more extreme – it out of the order even the parent box. It’s work even the parent is relative positioning.

Parent=all. Out of control of the parent box.

Display block is broken.

It like display:none, but visible.

3.       Relative

It’s always placed relative to its normal position. If TRBL is set to zero, it no effect – coz it’s reference point is its normal position.

Parent=all. In the control of the parent box.

4.       Absolute

Parent=relative. In the control of parent box.

Parent=static. Out of control of parent box.

Parent=fixed. Out of control of parent box.

Parent=absolute. In the control of the parent box.

Display block is broken.

It like display:none, but visible.

Positioning Properties

Buttoning

<h1>Beautiful Look And Feel Of Button</h1>
<button>A Click</button>

<style>
button
{
background-image: -moz-linear-gradient(center top,#faf,#555);
border: 1px solid #aaa;
-moz-border-radius: 5px;
height: 30px;
width: 100px;
color: white;
}
</style>

Buttoning

Triangleling

<h1>Counter Back Of Triangle</h1>
<p></span>
<style>
p
{
display: block;
width: 0px;
height: 0px;
border-color: #aaa transparent transparent;
border-style: solid dashed dashed;
border-width: 100px 100px 0px;
}
</style>

Triangleling

Better Looking Search Box

<div id="search">
    <form>
         <input type="text" id="text"/>
         <input type="submit" id="submit" value="Search"/>
     </form>
</div>

<style>

#search{
     border: 1px solid #ccc;
     max-width: -moz-fit-content;
     padding: 1px;
     -moz-border-radius: 5px;
}
#text{
     border: 0px solid #ccc;
     -moz-border-radius: 5px 0px 0px 5px;
     padding-left: 10px;
}
#submit{
     background: #88f;
     color: #fff;
     font: 14px arial;
     font-weight: bold;
     border: 0px solid #000;
     padding: 1px 5px;
     -moz-border-radius: 0px 5px 5px 0px;
     cursor: pointer;
}
#submit:hover{
     background: #55f;
}
form{
     margin: 0px;
     padding: 0px;
}

</style>

The result:

Better Looking Search Box

CSS - Advanced

Introduction

Here's some code that show some advanced of CSS that is practical for use.

Rounded Box

It's easy to make a rounded box. Even you don't need use image for it.

Code

<div>You don't need image for making box looks like rounded</div>

<style>
div{
    border: 1px solid #af0;
    padding: 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
</style>

The result will be:

You don't need image for making box looks like rounded

CSS - Advanced

Elegan Box Style

<div id="zero">
    <div id="satu">

        <p>Holla for the one of the other</p>

    </div>
</div>

<style>
#zero { width: 500px; padding: 20 20 60px; border: 1px solid #ccc;

        -moz-box-shadow: 0 0 4px #ccc; -moz-border-radius: 4px;}
#satu { border: 1px solid #ccc; -moz-box-shadow: 0 0 4px #ccc; 

        -moz-border-radius: 4px;}
#satu p { margin: 1px; padding: 15px; -moz-border-radius: 4px;

        background: #eee; border: 1px solid #eee; font: 12px sans-serif;

        color: #444; }
</style>

Elegan Box Style

Font End Design

<div id="satu">
<h2>Technical Specification</h2>
<div id="list">

<div class="item">
<h3>The Current Priorities</h3>
<ul><li>Skripsi</li>
<li>Web Portfolio</li>
</ul>
</div>

<div class="item">
<h3>The Next Priorities</h3>
<ul><li>Jobs in hacker centric place</li>
<li>Get to the next stage of hacking skills</li>
<li>Get the certificates of Hacking</li>
</ul>
</div>

<div class="item">
<h3>In Americas</h3>
<ul><li>Jobs in NVidia</li>
<li>Building part-time technology business</li>
</ul>
</div>

<div class="item">
<h3>The Next Ahead</h3>
<ul><li>Big Business</li>
<li>Nta Fund</li>
</ul>
</div>


<style>
html, body, div, h1, h2, h3 { margin: 0px; }
ol, ul { list-style: square; padding: 0 0 0 15px; }
html { background: #eee; color: #333;}
#satu { margin: 20px; padding: 20px; -moz-box-shadow: 0 0 1px #aaa; background: white; -moz-border-radius: 4px; font: 12px sans-serif; }

#satu h2 { border-bottom: 1px solid #aaa; padding: 0 0 10 0px; margin: 0 0 20px; }
.item { float: left; width: 50%; margin: 0 0 15px; }
.item li { margin: 0 0 5px; }

</style>

<div style="clear: both; "></div>
</div>
</div>

Font End Design

<div id="menu">
    <ul>
        <li><a href="#nogo">Indonesia</a>
            <ul>
                <li><a href="#nogo">Jakarta</a></li>
                <li><a href="#nogo">Malang</a></li>
                <li><a href="#nogo">Surabaya</a></li>
            </ul>
        </li>
        <li><a href="#nogo">USA</a>
            <ul>
                <li><a href="#nogo">California</a></li>
                <li><a href="#nogo">New York</a></li>
                <li><a href="#nogo">Texas</a></li>
            </ul>
        </li>
        <li><a href="#nogo">Japan</a>
            <ul>
                 <li><a href="#nogo">Tokyo</a></li>
                 <li><a href="#nogo">Osaka</a></li>
                 <li><a href="#nogo">Nagasaki</a></li>
            </ul>
        </li>
    </ul>
</div>

<style>

#menu li{
position: relative;
float: left;
}

#menu li a{
width:100px;
height: 30px;
display: block;
background: lime;
}

#menu ul ul{
position: absolute;
visibility: hidden;
}

#menu ul li:hover ul{
visibility:visible;
}
</style>

Box Shadow

To implement box shadow, add on your css style:

-moz-box-shadow: 0 0 1em gold; 

-webkit-box-shadow: 0 0 1em gold; 

box-shadow: 0 0 1em gold; 

Box Shadow

Rounded Corner

It's simple to make rounded corner with pure CSS style. This is just a different implementation between browser.
In firefox, it's like this one:

<style>

h1 {

    border: 1px solid blue;

    -moz-border-radius-topleft: 4px;    /* top left corner */

}

</style>

Do like the above with these code:

-moz-border-radius: 4px    /* all corner */

-moz-border-radius-bottomleft: 4px    /* bottom left */

For Safari and Chrome:

-webkit-border-radius: 4px    /* all corner */

-webkit-border-radius-bottomleft: 4px    /* bottom left */

No specified browser:

border-radius: 4px    /* all corner */

border-radius-bottomleft: 4px    /* bottom left */

 

Rounded Corner