Category Archives: HTML

HTML – How To Make Round Edged div’s

Leave a reply
Hi Folks!!,

          Here is a post about making div’s edge’s into rounded one’s. There are inbuilt libraries in some browsers like IE9 and greater than that which allow us to build very attractive web pages. There is another method of making rounded edged div’s in which edges are managed by inserting images. But using the inbuilt attributes is the easier one to create round edges.
      Let’s have a look at these attributes:
  
            border-radius:25px; //IE 9
            -webkit-border-radius:25px; //Chrome and safari
            -moz-border-radius:25px; //Mozilla
            -o-border-radius:25px; //Opera
          Above I have mentioned Radius attributes based on the type of browser’s. By applying the above attributes  on a div, Its border radius will be set to 25px.

How To Hide Navbar In Blogger

Leave a reply
          Hiding navbar may give a professional look to your blog than showing it. Here, the question is about “How to hide the navbar?”. Its possible by adding css “margin” property to your template’s body element. Here, I will show you how to do it.

1. Login to your blogger account and select “design” tab.
2. Under “design” tab select “edit HTML”.

3. The templates code may be big and its difficult to find a line manually, so you can use browsers “find” tool to find a line.
4. In that code, You need to find the below lines first.

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

5. After finding the above lines, add a property “margin-top: -30px;” to that list. After adding, the code appear’s as shown below.
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  margin-top: -30px;
}

6. Now, preview your blog and save the template. That’s all to do to hide your blog’s navbar.
Enjoy the tip…
Note: Before editing, Please backup your template.

How To Create Horizontal List Without Bullets

Leave a reply
          Horizontal lists are mainly used for creating tabs in menu bar. Creating tabs in your website provides easy navigation for the visitors. To create tabs, you need to create list with links horizontally and with no bullets.

          First, we need to create a list with necessary links, Then we need to overwrite the ul and li tags as shown below.
ul {
  list-style-type: none;
}

ul li {
  display: inline;
}

          The attribute “list-style-type: none” makes the list with no bullets, and “display: inline” makes the list appear horizontally.

How To Center A Webpage

Leave a reply

     A webpage aligned to center attracts the users more, than the other alignments. To align a webpage center you can use some java script which adjust’s the webpage according to the screen size or you can follow a simple way to get aligned to center. Here i am going to discuss about the simple way using css technique. Let us assume that a div with id “globalcontainer” is the whole container. Use the below css.
#globalcontainer {
     width: 1000px;
     margin: 0 auto;
}

     By using the above css, the width of the container is set to 1000px, and the right-margin is set to “auto”, which aligns the page to center automaticaly.

Note: This technique may not work in internet explorer, if you don’t mention the doctype and meta content type. So, make sure that doctype and content-type is declared. Here is an example:
 
  
  

 
 
  

   ….Body of the program goes here….