Category Archives: CSS Tutorial

Learn the basic layout and css web design techniques reading these cascading style sheets tutorials. CSS Tutorials for advanced or intermediate level web designers. These tutorials has been written by the PHP developer and web designer Mr Bikram Choudhury

CSS circles – CSS3 concentric Circles

This is a CSS tutorial series to draw concentric circles using pure CSS. Here Web Developer Mr Choudhury shown with free source code examples, the easiest ways to draw CSS circles & concentric circles with the help of pure CSS. Here DIV represent each circle having border-radius:50%;.

About this tutorial & author : Also Mr. Choudhury shown the formula, and he described and explained here developed by the renowned CSS layout expert and css template designer for web page layouts.

Continue reading CSS circles – CSS3 concentric Circles

When container DIV collapses having multiple child DIV inside it

When container DIV collapses having multiple child DIV inside it. Here you will get a case study when container DIV has two child divs side by side they appears inside container DIV. Child DIVs are absolutely positioned inside a container DIV which is relatively positioned. Also know how to recover from the problem. Continue reading When container DIV collapses having multiple child DIV inside it

Vertical centering using CSS- when child DIV placed in a ‘container DIV of fixed height’

How to vertically center a CHILD DIV inside a CONTAINER DIV of FIXED height. Child DIV height can be in Pixel or percentage of container DIV’s height.

Vertically center a DIV inside a container DIV element. The container can be relatively positioned. The child DIV should be absolutely positioned and its top, right, bottom, and left offset properties specify the element’s position w.r.t the container block (what the element is positioned relative to) and this value should be 0. So now use these properties to vertically center a DIV inside a container DIV element. Continue reading Vertical centering using CSS- when child DIV placed in a ‘container DIV of fixed height’

2 column DIV layout problem : container DIV collapses and Footer comes up

Here container DIV has two child DIVs. Container DIV is relatively positioned. After container DIV a footer DIV BOX exists which also relatively positioned. Inside container DIV there exists two column DIVs which are absolutely positioned. Left colummn is of 60% width of container and right column is of 30% width.

Continue reading 2 column DIV layout problem : container DIV collapses and Footer comes up

CSS Centering : text, inline & block elements

Inline & Block elements >> Centering HTML elements

In this article I have describe which HTML elements are inline elements and which are block level HTML5 elements. How to center inline elements inside a container DIV or block level elements.

Centering text & inline elements

IMG, STRONG, SPAN elements in a webpage are examples of inline elements. Alos I have used the term inline content, which means inline elements. Inline content includes such things as text, images, <strong> and <span> tags. Now we need to center inline content inside a block element (Normally Inline elements resides inside a BLOCK element like DIV, H1 etc)

Just use text-align property applied to the next higher level block level container with the content to be aligned inside. Continue reading CSS Centering : text, inline & block elements

More about @font-face: EOT TTF WOFF SVG free converter, CSS code generator

In this article I am going into more deep of Web Fonts and I am going to discuss here few tools, converters for web fonts. Also I am here to show you how you can generate CSS code automatically by some online tools. I have found few references on Web Fonts and I shall link them from this article also as reference reading.

Here I have discussed how to use Web Fonts in your webpage. Also in this page I am showing you how you can generate the CSS code automatically and showing you more standard CSS code to write in your webpages. Continue reading More about @font-face: EOT TTF WOFF SVG free converter, CSS code generator

Absolute Position (CSS)

What is “position:absolute” in CSS ? To learn absolute positioning CSS property you must understand block level & inline elements, normal flow concept of CSS. You must know normal flow first, then learn absolute position concept.


Box model, Normal Flow > Absolute positioning


Absolute Positioning Explained

  1. An absolutely positioned element is removed from the normal flow. This positioning scheme applies to any element that has its position porperty absolute or fixed.
  2. This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.
  3. Normally absolutely positioned elements are positioned by the top and left property assigned to them.
  4. This top and left works with respect to the container block of this absolutely positioned element. This top and left are called offset positions.
  5. Absolute positioning always works w.r.t the container block of this absolutely positioned element.
  6. Absolute elements create a new coordinate system for child elements inside them.
  7. This is an exellent property of ABSOLUTE POSITIONING : Use all four offset properties (TOP, LEFT, BOTTOM, RIGHT), and you can stretch an element without defining any width or height—it’s bound only by its parent element or the document itself if there is no container.

Continue reading Absolute Position (CSS)

Create simple CSS horizontal navigation menu with drop down submenu

Author : Bikram Choudhury . He teaches various computer subjects and programming languages like C C++ / Java / PHP MySQL / HTML / HTML5 /CSS /JavaScript / jQuery online. Visit www.onlinecomputerteacher.net for details.

About this tutorial : Please check the completed menu here, your ultimate menu will be this . At the bottom whole code given.

You will be able to create a top level horizontal navigation menu which may or maynot have submenus. This type of menus sometimes called as NAV menu or suckerfish menu… when you will mouse over on them, then sub menu will be shown (if that menu item has sub level menu). I have kept this menu as simple as possible to look. No effects, background has been used. These will be added in future tutorials. But this is the basic tutorial.

Continue reading Create simple CSS horizontal navigation menu with drop down submenu

How to solve / fix Bengali font display problem in Firefox

Many users are complaining on the forum and our Facebook Page about Bengali not showing up properly after upgrading Firefox. This is a bug in Firefox and here’s how you can fix it.

First step I recommend : Install at least one Bengali / Bangla Unicode font.
Download the Bengali font from here : http://www.omicronlab.com/bangla-fonts.html
Continue reading How to solve / fix Bengali font display problem in Firefox