CSS Positioning and floating elements

Positioning and Floating are the properties mainly used in css to layout the webpage. Let's see the different types of positioning available in css and discuss them with their usage.

There mainly four types of positioning

• Static.
• Absolute.
• Relative.
• Fixed.

Let's discuss one by one with their code snippet.

html

<div id="positioning">Helloo</div>

Static Positioning:
This is the default position of the element. If two elements are inline, then both of them stacked horizontally one after the other. In the same way if two elements are block then both the elements stacked one after the other vertically. Know more about Inline and Block elements.

Absolute Positioning

#positioning {
      position: absolute;
      top: 10px;
      left: 10px;
}
This way positioning take its position in the webpage with respect to (0,0) co-ordinates which mean from top left corner and it's position is fixed it doesn't adjust itself with respect to screen resolution. Actually it;s not flexible way of positioning the elements.

Relative Positioning

#positioning {
      position: relative;
      top: 10px;
      left: 10px;
}
The element take it's position with respect to its current position and more 10px from top and 10px from left. Many developers use relative positioning over absolute because it's more flexible way of doing things done.

Fixed Positioning

#positioning {
      position: fixed;
      top: 10px;
      left: 10px;
}
This element takes it's position with respect to the screen. When ever you give an element with fixed position then when you scroll down your webpage the element with fixed position also scrolls down along with the webpage. This type of positioning generally used for menu bars or nav bars to make to visible for the whole web page when user scrolls down.

Now, you have seen about positioning. I strongly recommend you to play around with these things as they are most confusing things in the CSS for the beginners. Now, let's move on for Floating the elements.

html

<div id="floating">This is a floating element</div>

css

#floating {
    float: left;
}
#floating {
    float: right;
}
#floating {
    float: inherit;
}
#floating {
    float: none;
}

You can learn more about floats here. You will find an awesome article about floating elements in the given link.

Block level and Inline elements in CSS

There are two types of elements mainly in the html, they are

• Block level.
• Inline

What are block level elements ?

Generally the elements which stack vertically downwards one after the other are called block level elements. 

Example : Div tags, P tags etc.

When you write a block level element the next elements will be stacked below the previous element. We can change the default behaviour of those elements using the css properties. Let's consider the below example.

html 

<div class="box">Box 1</div>

<div class="box">Box 2</div>

<div class="box">Box 3</div>

<div class="box">Box 4</div>

<div class="box">Box 5</div>

Now, when we see the result in our browser these boxes will stacked down one after other vertically. Let's apply CSS to it.

css

.box {

   display: inline-block;

}

After applying above property to the elements, those boxes now stacked horizontally.

What are Inline elements ?

The elements that are horizontally stacked and appear in the same line are called inline elements.

Example: Span tags, Img tags, anchor tags etc.

When you write an inline element if next element is also inline then both elements stack horizontally. But, if the next element is block level then it will be in the next line.

CSS hiding elements using Display property and Visibility property

In this post we will see how we can hide the elements using CSS properties. There are generally two properties we can use to hide the HTML elements.

• Display
• Visibility

These are the two properties available to hide elements using CSS. Many people think these two properties do the pretty much the same thing but, there is slight difference between those two properties. we will discuss them with code below.

html

<p>Lorum ipsum and some dummy text</p>

<div id="element1"></div>

<p>Lorum ipsum and some dummy text</p>

<div id="element2"></div>

<p>Lorum ipsum and some dummy text</p>

css

#element1 {

       width: 200px;

       height: 200px;

      visibility: none;

}

#element2 {

       width: 200px;

       height: 200px;

      display: none;

}

I recommend you to copy and past the above code and check the result and play around with it. Let me first explain you the difference between these two properties.

When you use display property and hide the element, it will pretty much hide the whole elements which means it will totally removes the element from the page and the elements below will get adjusted automatically.

But, when you use visibility property to hide the elements, it will just make the element invisible but the white space for that element will be still there.

Better combination of languages to write an awesome website

Every developer before starting to write some code to develop a website, need to think and consider some languages which fulfil their requirements. A developer needs to takes so many issues into consideration to start his/her application and accordingly need to choose languages. Some of such things include UI, UX, FUNCTIONALITY, SECURITY etc.

In this post I am writing about the languages to choose to fulfil almost all the above needs.

1. HTML / HTML 5

This is the most common language which is used in every web based application. After advancement of HTML 5 Developers are able to develop awesome applications in mobile platform too . This language is commonly used for laying out your website.

    2. CSS / CSS 3 

This used to style the webpages written in HTML. Both HTML and CSS combines to create Front-End of the web site.

   3. JAVASCRIPT

After creating the basic look for your website now you want to give more awesomeness to your application by creating some animations and also create interactions between your website and a client. To accomplish this task u need JAVASCRIPT or it's Libraries like JQUERY, TWEEN.JS, CHART.JS, 

   4. BOOTSTRAP

Now a days, people are opening your applications from different screen sized devices. If your site doesn't support for different screen sizes then you are in big trouble of loosing more than 50% of your clients. Bootstrap is the best option to create responsive websites very easily with very less code .http://getbootstrap.com  is the official website.

  5. LARAVEL

The above language helps you to create world class User Interface and User Experience. Now comes the main part for any application i,e. Functionality. In present days no one wants any static website. Every one needs it with more and more functionalities and also in a secured way. Now to handle that LARAVEL is the awesome framework written on the basis of PHP. It helps you create most secured websites in some minutes. http://laravel.com is the official website.

So, this is it guys. Try mastering these languages and create awesome websites. Happy Coading

Creating overlay boxes using HTML, CSS and JQUERY

What are overlay boxes?
I think you may have come across this situation, when you open some website and click on login button one pop up box open with login or sign up form in it and there will be some semi transparent box surrounding that white colour box . Those pop up's are called overlay's.

What is the general use of these overlay's?
Suppose, if you don't want to show every information in the page by default when it loaded. and if you want to show certain kind of information after clicking particular link or a button and you want to show in the same page then you can use overlay's. If you want to run some kinds of special ads then also you can use overlay boxes.

Let's start creating an overlay box. here in this post I will show simple confirmation message pop up overlay, you can build up this according to your usage.

html

<div id="overlay"></div>

<div id="message_container">

        <div id="message_container_in></div>

</div>

<button id="btn">Click me</button>

css

#overlay{
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 700px;
     background: #000000;
     opacity: 0.7;
    z-index: 99;
    display: none;
}

#message_container {
     position: absolute;
     top: 200px
      width:100%;
     z-index: 999;
     display:none;
}

#message_container_in {
    width:400px;
   padding:10px;
    border-radius: 5px;
    margin:0px auto;
    font-size:20px;
   background: #ffffff;
   z-index: 1000;
}

JQuery

$('#btn').click(function(){

$('#overlay').show();
$('#message_container').slideDown(300);
        $('#message_container').text("You have clicked me");

});


This is it guys. I hope you understood the code written above. If you find any complexities please comment below so that I can explain everything.

Fixing the size of text area and removing resize icon using CSS

When ever you write <textarea></textarea> by default you see a text box with some width and height and also with resizing icon with which you can drag the width and height of that text area. In this tutorial I will show all the possible styling options for a Text area. Let's start.

html

<textarea id="myTextarea" placeholder="Write your message"></textarea>

css

#myTextarea {
          width: 200px;
          height: 100px;
          border: none;
          border-radius: 5px;
          resize: none; 
          padding: 6px;
}

Let us explain the css to you. I hope you can pretty much understand the css written above but, I will explain you the use of each attribute.

• width sets the width of the text area. you can also use rows and cols attributes to set width and height.
• height sets the height of text area.
• border:none removes the default border around the text area.
• border-radius: 5px give smooth rounded corners around the text area.
• resize: none removes the default resizing icon present in bottom right corner of text area.
• padding gives the padding to the text area.

You can also give background-color, font-size and color to the text area. 

Create awesome rounded corners in css border-radius property

Here I am showing a simple trick to create rounded corners for a particular box using css. You can give border-radius to each corner of a box independently. In this post I will show how we will do that.

html file

<div id="rounded_box"></div>

css file

#rounded_box {
       width: 200px;
       height: 200px;
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
       border-bottom-left-radius: 6px;
       border-bottom-right-radius: 6px;
}

In this way you use this border-radius property in most flexible way. Let me show the general equivalent styling for the above styling.

css file

#rounded_box {
       width: 200px;
       height: 200px;
       border-radius: 6px;
}

Where to, How to and What to start to become a web developer

This is a general question I have come across in different question and answer forums. So many people are interested in learning so many different things but they don't know how to and where to and what to start with to get skilled and achieve their goals. As I am a web developer and I love creative stuff I want to suggest or guide those guys who are interested in getting skilled in web development. So here in this post I will give a few steps that will take you to the world of web development. So let's get started.

Step 1 : Get skilled in HTML/CSS . Here in this web site I am teaching 30 days to web development series you can also follow that. Otherwise in the right side bar I have give a few links under reference links column you can also follow those links.
Step 2: After finishing HTML and CSS go for CSS 3 and try to gain some knowledge on that too.

Above two steps can be finished hardly with in 2 weeks.

Step 3: After that try with JavaScript and gain a little knowledge.
Step 4: Now, you have got knowledge on HTML,CSS,CSS3 and JavaScript and you are ready for exploring with HTML 5.

You can finish Step 3 and Step 4 with in 2 weeks.

Step 5: Now, you have skilled pretty much above 60% in Web development. Now it's correct time for learning PHP and MySql which helps you to create server and client interactions.

You can finish basic functions of PHP and MySql hardly in a week or 2. Now at this point I will recommend you to create a full website and test your skills. While you are creating a real time web site I promise you that you can learn a lot more things and you get experienced in fixing bugs.

Finally, I want to recommend you to follow up this blog for more best tutorials, Tips and Tricks and also answers for general questions. you can also ask questions and get clarified in from the comments section below each post or by emailing us at ething4pc@gmail.com

Force your PHP Scripts to display in source code

Generally, PHP is a server side scripting language. You cannot see your PHP scripts in your source code as PHP out puts are parsed as HTML. But, by using .htaccess file in PHP we can modify the default behaviour of PHP and we can force the scripts to visible in source code. I personally don't recommend to do it in production environment as it creates a security issue but if you are in testing phase you can use it. Okay, enough of the talk let me show you the process.

First open the .htccess file if you don't have one create one by saving the file as .htaccess nothing will be in prefix just simple .htaccess and open the file in code editor and paste the following code.

RemoveHandler cgi-script .pl .cgi .php .py
AddType text/plain .pl .cgi .php .py

That's it now you can see your php in source code. I hope you liked the tutorial. If you have any queries comment below of you can mail me at ething4pc@gmail.com

Create Awesome Signup Form with simple CSS

Form are the main components in any websites. Forms are interface between the user and the server. If there are no forms then there is no interaction between the user and the server. There are a plenty of form element types in HTML. Here I will take a few of them and create a simple Sign up form. So let's get started.

formelements.html
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="formelements.css">
</head>
<body>
<div id="container">

<form method="post" action="formelements.html">
<label>SignUp</label><br><br>
<input type="text" placeholder="Username" class="textBox"/><br>
<input type="email" placeholder="Email" class="textBox" /><br>
<input type="password" placeholder="Password" class="textBox" /><br><br>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Male</span> 
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Female</span><br>
<input type="checkbox" class="checkBox" /> <span class="outsideText">I agree to the terms and 
conditions of this website. This is some dummy lorem Ipsum text.</span><br>
<input type="submit" value="Sign up" id="submitBtn" />
</form>

   </div>

</body>

</html>

formelements.css
form {
width:500px;
padding:8px;
border:1px solid #cccccc;
}
label {
font-size:24px;
font-family:calibri;
color:red;
text-shadow:2px 2px 1px #cccccc;
padding:6px;
font-weight:700;
}
.textBox {
width:320px;
padding:10px;
font-size:18px;
font-family:calibri;
outline:none;
border:4px solid #00bbaf;

}
.outsideText {
font-size:18px;
font-family:calibri;
}
#submitBtn {
width:160px;
padding:6px;
background:orange;
border:1px solid orange;
color:#ffffff;
font-size:18px;
font-family:calibri;
margin-top:6px;

}

The form looks in this way 

 Here due to image resolution the image looks pretty much dim. Trust me if you copy and paste the code and check in your screens it looks more pretty, Again play with all the different styles above, try changing the values. If any doubts don't hesitate to comment below. I am always ready to clear your queries.

World of web development

This is the era where your skills and creativity are more important than your certificates. Your creativity and your output speaks louder than your degree certificates. So, the people who are running behind the degrees without learning any skills need to think now.

In this era gaining the skills we need is very easy what you need is interest to learn and that's it. There are lot of web sites which are offering free courses for different skills you need. What you need to do is just type in the Google search box and get the long list of website links.

If you are looking forward to learn web development and master it you are in the right place. We offer a series of tutorials that helps you to take you right from beginner level and place yourself in expert level.

What you want to do is to check our blog frequently and like our facebook page for daily technology and other updates.

That's it lets get started! Welcome to the world of WWW (World Wide Web).