CSS - setting elements inline - part 1

I bet that every frontend developer met the problem with setting many elements in line. As lately I had to solve this problem during recruitment processes I decided to share some thoughts and solution.

Example structure:

<div class="container">
    <div class="color green"></div>
    <div class="color yellow"></div>
    <div class="color blue"></div>
    <div class="color red"></div>
</div>

Let's color elements to see them clearly:

.color {
    width: 25%;
    display: inline-block;
    height: 100px;
    padding: 0;
    margin: 0;
} .green {
    background-color: green;
}
.yellow {
    background-color: yellow;
}
.blue {
    background-color: blue;
}
.red {
    background-color: red;
}

So we have a container, which contains few elements, and looks like on this image:



So this is definitely not the goal. The inner elements should be in line and without gaps between. Why are there those gaps? The answer is display: inline-block;. Displaying inline takes all white spaces as a spaces... and spaces have width, so last element is going down, as there is no space for it. So how to remove gaps between elements?

change boxing-size:

div {
    boxing-size: border-box;
}

Magento beginner - set up category and product

After installation of Magento I faced a new problem. The menu in the beginning wasn't much helpful. So I'm creating short post about first steps with Magento

After logging in to admin area Dashbord is first visible page. If shop is live and people are buying stuff there are many useful information.

Before you start changing anything and ONLY if your shop is not live (online) go to System -> Cache Management. Click "Select All", from Action choose "Disable" and click "Submit". This will disable cache on your Magento. So all changes should be visible immediately. If you are working on live system, remember to refresh proper cache (NOT ALL) after making changes.

To manage categories choose Catalog -> Categories -> Manage Categories. In the left column you can see already existing categories. "Default category" is crested by default. For your needs create new Root Category by clicking button "Add Root Category". This root category would be a container for all category tree. It won't be displayed. In the first tab - "General information" fill name, set "Is Active" and "Include in Navigation Menu" to "Yes" and add all information you know would be needed. Click "Save Category" to save category record.

Then, click in the name your just created root category in the left column, to set a context, and then click button "Add Subcategory". It will show you the same form. Just be sure that on "General information" tab you filled "Name" and set "Is Active" and "Include in Navigation Menu" to "Yes".

So you should now to see our new subcategory in the menu. But if you click it it shows the page with information: "There are no products matching the selection.". So let's add some products then. In admin choose Catalog -> Manage Products. Click button "Add Product" and set product attributes (or use defaults). Click "Continue". Now you can see first tab. Obligatory information are mark with asterisk. Remember to set "Status" to "Enabled". Fill information in "General" and "Prices" tabs. Then click to "Inventory" tab. There set "Qty" to any number greater than 0 and "Stock Availability" to "In Stock". Next click to "Categories" tab to bound product with category.

Now you have to bound your shop name with category. In admin click System -> Manage Stores and for your Store Name (default is "Main Website Store") choose root category you just created.

Still in admin click in System -> Index Management and reindex whatever needs it. From now all your changes should be visible.