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

Query Suggestion

<h1>Drop Drown</h1>
<input type="text" id="text" onkeyup="show(event)"/>
<p id="view"></p>


<script>
var data = ["apple","banana","mango",

           "watermelon","orange","papaya"];

function show(event){
    var text = document.getElementById('text').value;
    var view = document.getElementById('view');
    var len = text.length;
    var plot = "";

    if (len==0){
        view.innerHTML = "";
        return;
    }

    // we iterate all the available data to match on 

    // the server
    for(i=0;i<data.length;i++){
        // we just take the query that match 

        // the first main of the saved words on the server.
        // for each length of the string.
        // we compare if the query from the user 

        //is match the defined words.
        if(text==data[i].substr(0,len)){
            plot = plot+"<br/>"+data[i];
        }
    }

    view.innerHTML = plot;
}

</script>

Query Suggestion

Function Pointer As Struct Member

Function pointer as struct member - with arguments:

#include <stdio.h>

struct aritmathic{
    int a;
    int b;
    int (*add)(int, int);
    int (*subtract)(int, int);
    int (*multiply)(int, int);
};

int Add(int a, int b){
    return (a+b);
}

int Subtract(int a, int b){
    return (a-b);
}

int Multiply(int a, int b){
    return (a*b);
}

int main(){

    struct aritmathic ar;
    ar.a = 4;
    ar.b = 5;

    ar.add = Add;
    ar.subtract = Subtract;
    ar.multiply = Multiply;

    int a = ar.add(ar.a, ar.b);
    int b = ar.subtract(ar.a, ar.b);
    int c = ar.multiply(ar.a, ar.b);   

    printf("%d\n%d\n%d", a, b, c);

    return 0;
}

Simpler version for above:

#include <stdio.h>

struct aritmathic{
    int a;
    int b;
    int (*add) (struct aritmathic*);
    int (*subtract) (struct aritmathic*);
    int (*multiply) (struct aritmathic*);
};

int Add(struct aritmathic* ar){
    return (ar->a + ar->b);
}

int Subtract(struct aritmathic* ar){
    return (ar->a - ar->b);
}

int Multiply(struct aritmathic* ar){
    return (ar->a * ar->b);
}

int main(){

    struct aritmathic ar;
    ar.a = 4;
    ar.b = 5;

    ar.add = Add;
    ar.subtract = Subtract;
    ar.multiply = Multiply;

    int a = ar.add(&ar);
    int b = ar.subtract(&ar);
    int c = ar.multiply(&ar);   

    printf("%d\n%d\n%d", a, b, c);

    return 0;
}

Function Pointer As Struct Member

Below is a simple example of function pointer as a member of struct:

#include <stdio.h>

struct data{
    void(*hello)();
};

void hello(){
    puts("Hello comes from C");
}

int main(){

    // the first way
    struct data d;
    d.hello = hello;
    d.hello();

    // the alternate way
    struct data dd;
    struct data* ptr = &dd;
    ptr->hello = *hello;
    ptr->hello();
  
    return 0;
}

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