DezineHQ is a comprehensive guide for designers where you can find all kinds of resources and references “design” related. It covers almost all design related topics from web and graphic design to industrial, furniture and automotive design.

It’s an excellent place where designers will be able to get inspired and keep in touch with the latest designing trends. You can find materials and information useful to better, inform, and improve your skills and knowledge about design.

We at the Choppr have helped them with their brand new design and wordpress theme integration.

Popularity: 62% [?]

When you are creating a CSS/HTML page, you will definitely want navigational elements in that web page. The most common way to create navigational elements is through CSS styled lists. But you should remember one simple thing - your navigational elements should contain display: block.

The display: block property is very essential in CSS navigation because navigation buttons and areas are absolutely meant to be like buttons or blocks of the web page. In case you leave the links in your navigation as display: inline; (default for elements), then only the text area in your navigation will become clickable.

To get the best results, add horizontal navigation menu and vertical navigation menu that will help your pages to become more accessible while remaining compliant to standards.

Horizontal Navigation Menu

To create horizontal menu, start with the outside and work in. if you want your navigation to start in left corner, you need to set it with 0 left margin and padding, an float it to the left.

ul#navigation {
    float: left
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #039;
}

But the main magic in horizontal navigation menu lies in its list items. List items are normally block elements, which means that they will have new line placed before and after each one. By switching the display from block to inline, you can force the list elements to queue up next to one another.

ul#navigation li {display: inline;}

A top border can also be added to delineate the buttons when they are hovered over:

ul#navigation li a {
    display: block;
    text-decoration: none;
    padding: .25em lem;
    border-bottom: solid 1px  #39f;
    border-top: solid 1px #39f;
    border-right: solid 1px #39f;
}

a:link, a:visited {color: #fff;}

ul#navigation li a:hover {
    background-color: #fff;
    color: #000;
}

Vertical Navigation Menu

It is same as creating the horizontal navigation menu. The first move in such creation is to define the width of the menu. This will ensure that even if the menu items are long, they will not push the rest of the layout over or cause horizontal scrolling.

ul#navigation {width: 12em;}

Once the width is set, other things like list-style [get rid off the bullets], borders, text alignment, margins and background colors.

ul#navigation li {
    list-style: none;
    background-color: #039;
    border-top: solid 1px #039;
    text-align: left;
    margin: 0;
}

Once the basics for the list items are set, you can start playing with how the menu looks like in the links area. Firstly, you should style the ul#navigation li a, then the a:link, a:visited, a:active, and a:hover (if you want them). For the a:links, let it be made block element rather than default in-line. This forces them to take up the entire space of the li - and they act more like a paragraph, which makes them easier to style as menu buttons. The other best things that can be done are removing the underline (text0-decoration: none) as this makes the buttons look more like buttons.

Following are the codes:

ul#navigation li a {
    display: block;
    text-decoration: none;
    padding: .25em;
    border-bottom: solid 1px #39f;
    border-right: solid 1px #39f;
}

With the display block, you can set on the a:links, and the entire box of the menu item becomes clickable, and not just the letters. Make sure that you set the link colors (link, visited, active and hover), if you want them to be different than the default blue, purple and red.

a:link, a:visited {color: #fff;}
a:hover, a:active {color: #000;}

To pay some extra attention to the hover state, do the following:

a:hover {background-color: #fff;}

Popularity: 90% [?]

In the previous tutorials, we have created a classic two-column layout with left-side navigation using CSS and a few types of HTML tags. In this tutorial, we will look at the actual HTML codes used so far and also take a quick glance at the CSS used.

All the content (text, images, Flash etc.) that the user sees when viewing a web page is marked up/coded with HTML in-between the <body> and </body> tags.

In this case we have this:

<body>
    <div id="navigation">
        <h2>The Main navigation</h2>
    </div>
    <div id="centerDoc">
        <h1>The Main Heading</h1>
        <p>

In the above code, we see that we have two main sections demarked by using <div> tags. These <div> tags are designed to create a ‘division’ in the document or to create something like a container. We have created two such containers and given each of them a unique ID:

    <div id="navigation">
        ...
    <div id= "centerDoc">

You will find that the entire contents of the page are contained in one of these two major page divisions. So the first question that demands reply, is what are the rules of ID’s in HTML pages and why do we use them and assign them to page elements like DIVs?

1. You can assign ID’s to any HTML tag. In that case, you can assign an ID to a <p> tag as well.
2. An ID in a page can be used just once. That is to say that no two elements should possess the same ID. ID’s are meant to uniquely identify a page element. So in the above example, there is only one page element with an ID of ‘navigation’ and only page element with an ID of ‘centerDoc’.
3. ID’s on HTML page elements (tags) are used just once in CSS. We can target ID’s in CSS code to change the appearance, behavior and even the position of that element by referencing the ID of that element.
4. Inside the <div> tags container, we are using header tags (<h1> and <h2>) to set the headers.
5. Finally, insert some text for <p> tags, to make up this simple page in-between them.

Now let us jump to CSS file that is attached to the HTML page. The CSS document is attached with the line of code in between the <head> </head> tags:

<head>
    <link href="myCSS.css" rel="stylesheet" type="text/css">
</head>

Like in a normal page link we have an ‘href’ attribute, all our CSS code will affect this page since it is linked to it.

So in the above link we name the CSS file name with this: ‘href=”myCSS.css”‘ and we tell the web browser that the link is to a CSS page with this attribute: ‘type=”text/css”‘. All that should be considered here is that the link point to a CSS file with the name: ‘myCSS.css’

So now that we got the style sheet linked to the document, lets look at some CSS codes. This first snippet of code ’styles’ the unique ID’s we were talking about before:

#navigation {
    position: absolute;
    width: 210px;
    height: 600px;
    margin: 0;
    margin-top: 0px;
    border-right: 1px solid #C6EC8C;
    font-weight: normal;
}

#centerDoc {
    position: absolute;
    padding: 0 0 20px 0; /*top right bottom left*/
    margin-top: 50px;
    margin-left: 235px;
}

In the above elements we have 2 selectors, one for each ID and each selectors are grouped/contained by using the curly brackets: {}. So here is the CSS selectors code with all their guts removed:

#navigation {
    /*Look ma no CSS rules! */
}

#centerDoc {
    /*Look ma no CSS rules! */
}

I just inserted the text: ‘/*Look ma no CSS rules!*/’ to show you where the CSS code would normally be positioned. Now you can see that anything in between the curly brackets is part of one group or package that in CSS can generically be called a selector.

In the examples displayed above, you will find some text that appears before a curly bracket. This text gives a name to the selector. So here we have two selector names and thus two selectors: ‘#centerDoc’ and ‘#navigation’. Now the natural question would be why do we have the # symbol in front of the text? Why can’t we call it simply ‘centerDoc’ and ‘navigation’?

The answer to the above question is simple. Like HTML and programming certain text in certain places have special meaning that directs the system to do something in particular. In this case whenever you have that # symbol in front of a name of a CSS selector, it means that this selector is a special type of selector more commonly known as ‘ID’ selector. What is so special about an ID selector? This type of selector can only be applied to any one element at a time in the HTML page.

So those of you are aware of the computer, now see that there is a CSS ID selector for each of our HTML divs that in turn have an ID, and they have the same corresponding names. So the CSS selector #centerDoc applies to the div: ‘<div id=”centerDoc”>’. Whatever CSS rules/styles are required to code into ID selector will change what appears inside the corresponding div. So for the div with the ID of: ‘navigation’, following are the CSS rules:

#navigation {
    position: absolute;
    width: 210px;
    height: 600px;
    margin: 0;
    margin-top: 0px;
    border-right: 1px solid #C6EC8C;
    font-weight: normal;
}

Remember that at the bottom we say all text will have a common font-weight of ‘normal’:

font-weight: normal;

We could instead easily have told that we want all the text to appear in the div (the div with the ID ‘navigation’) bold instead:

font-weight: bold;

Now lets return to the original fact. In our page the navigation div is sitting on the left and it has a border. It also has a nice light green 1-pixel border because that is what is set in CSS coding:

border-right: 1px solid #C6EC8C;

The best thing would be changing the color of the border and changing the pixel thickness of the border and view how it looks like.

Why is the navigation sitting on the left of the page while the ‘centerDoc’ is positioned to the right of it? Well first thing to be considered is this line in the navigation selector:

position: absolute;

This orders the browser to just place this div on the page as is.

Therefore, the real magic in this is the CSS code for centerDoc:

#centerDoc {
    position: absolute;
    padding: 0 0 20px 0; /*top right bottom left*/
    margin-top: 50px;
    margin-left: 235x;
}

The line:

padding: 0 0 20px 0; /*top right bottom left*/

This tells the browser to insert 20px (pixels) of padding to the bottom of the div with the ID ‘centerDoc’.

However, if you are confused with the word ‘padding’, then the dimple definition to it is - Space that is wrapped around our element (tag).

CSS has this special feature and concept of a box model that essentially is a box that wraps around the HTML elements. This box model comprises: padding, margins, borders and the actual content. This allows us to place a border around elements and space elements in relation to other elements.

From the inside out it is ordered like so:

content -> padding -> border -> margin

So in this case anything in between our <div> tags is basically the ‘content’. Right after that comes the padding. Then there is a border concept and finally a margin. Margin and padding may appear the same thing but if you think about it, you can see how you are being able to control the space before the border (padding) and after the border (margins) and how it can really affect your layouts.

In this example you notice that the navigation div sits higher up on the page than the centerDoc div. This is not because of the order in which they appear in the HTML, as they normally would without CSS, rather it is because of the margin settings I set for each selector; for centerDoc I set the top margin to 50px:

margin-top: 50px;

And for the navigation div I set it to:

margin-top: 0px;

The above declaration sets its top margin to 0 pixels so it will therefore be 50 pixels higher than the “centerDoc” div. A correct step would be to move the position of the navigation div under the center doc div in the HTML just to see if it changes anything. You will see that where the div appears in the actual HTML code has nothing to do with how it will appear to the user now that CSS positioning has been used.

Popularity: 88% [?]

This tutorial will teach you to create a multi-column and float-based layout. This tutorial will allow you to create a multi-column liquid designs as well as fixed-width design.

Structuring HTML

Firstly, you need to create a CSS-based layout by identifying different series of layout elements on the page. You can conduct this by wrapping chunks of HTML inside of <div> tags, each of which will represent a different part of the page.

1. Open start.html file in a text editor, click the empty line following HTML comment: Before any style is to be created, you need to add the structure and content for the page. Next you need to add the <div> tag for the left sidebar.
2. Add an opening <div> for the sidebar: <div id= “sidebar”>. Then press Enter (Return) to create a new, empty line. If you are creating a web page from the beginning, you need to add the HTML for the page’s sidebar, a list of articles on the site, links to other related web sites etc. The HTML portion is already looked after. The code for an unordered list of links awaits you in another file. You just have to copy and paste it into this page.
3. Open the file sidebar.txt, copy all of the contents, and then return to the start.html file. Paste the HTML after the <div> tag you had created in step 2. The HTML for the sidebar is almost complete. You just need to close the <div> tag.
4. Just after the code you pasted, type </div> You have just added the first few layout elements on the page. When you style these HTML elements, they will look like a column. But first you need to add some more content to it.
5. Place cursor in empty line after HTML comment: <!-main content goes here–> and then type <div id= “main”> This div holds the main content of the page. However, you will get HTML element from another file, too.
6. Open the file story.txt, copy all contents, return to the start.html file and paste the code after <div> tag you created. Add the closing </div> tag you just created. Add the closing </div> tag exactly as in step4 That is all HTML you need to create and design.

Now we will conduct another tutorial on CSS:

Creating Layout Styles

If you view the page now, you will find banners, navigation buttons and texts are already styled.

We will create styles to format the page’s columns:

1. In text editor, click on empty space directly before closing </head> tag near the top of the file. Type <style type= “text/css”> and then hit on Enter (Return) This code becomes the opening tag for an internal style sheet. Once you complete creating styles in internal style sheet, you can create and style your sheet even better. Now you move the styles to external style sheet

2. Add a style for sidebar element

#sidebar {
    float: left;
    width: 160px;
    margin-top: 10px;
}

This class style makes the div float to the left side of the page, imparting a width of 160 pixels and add a bit of space to separate the sidebar from the banner. The width property is very essential in this style. Unless you don’t float an image that has a specific set width, you should always set a width for the floated elements. Otherwise, the browser also sets a width based solely on the content inside the float, leading to inconsistent results.

3. Press Enter (Return) type </style> to complete the internal style sheet and preview the page in web browser The sidebar also forms a left-hand column. Therefore, when text in the main column reaches the bottom of sidebar, it wraps around the bottom of the sidebar. While that is the way that floats work, here you need to make the main body text appear like a column on its own, you have to add enough of left margin to indent the main text beyond the right edge of the sidebar.

4. Create a style for second column

#main {
    margin-left: 180px;
}

Since the sidebar is 160 pixels wide, a margin of 180 pixels indents the main content an additional 20 pixels, creating a difference between two columns. This extra white space not only makes the text easier to read but also imparts a wonderful look and feel to the page.

Adding Another Column

While a two column is quite an easy task, a three column imparts a whole new world of information to the visitors.

Here are the steps:

1. You need to open the file secondary.txt. Copy all HTML from that file and return to start.html file. However, the HTML for this extra column goes between the page’s two divs
2. Click just after the closing <div> for the sidebar element (right before the HTML comment <!-main content goes here–>). Press Enter (Return) to create an empty line. It often becomes quite hard to find the right closing </div> when you have already used a lot of divs to structure a page. That’s why HTML comments truly help you identify and keep track of HTML in your page
3. Type <div id= “secondary”>, press Enter (return) and then paste HTML that you had copied in Step1. Hit enter (return) again and type </div>. When you close the <div> tag finally, you have completed HTML for the page’s third column. Start styling it next.
4. Below the #main style you created in step4, you need to add a new style to the internal style sheet.

#secondary {
    float: right;
    width: 180px;
}

You need to float the column to the right side of the page to flank main content with sidebars on either side. The same problem might persist - where the main content wraps underneath the new sidebar. To fix it, however, you need to add a right margin to the #main style.

5. Edit the #main style t make it look like the following:

main {
    margin-left: 180px;
    margin-right: 200px;
}

Now the page becomes a full 3-column layout. You need to test the page in the web browser. When you need to resize the windows, you will find that the entire page resizes and adjusts to fit the window.

Note: In this design, you will find the right and left sidebars contain a fixed width, so even when you make the browser window much larger, they still retain the same size. You can make those columns change the width as well, simply by setting their widths to percentage values and changing the #main style’s left and right margin to percentages as well.

Popularity: 100% [?]

A single style cannot perform the miracle of transforming a web page into a work of art. To create some special designs in the web page, an understanding of web page is very essential. Usually a collection of CSS styles comprises a style sheet.

A style sheet can be of two types - external and internal, depending on where the style information is located- in the Web page itself or in a separate file linked to the web page.

Internal and External - How to choose

Most of the time external style sheets are preferred as they make it quite easier to build web pages and update web sites faster. They contain all style information in single file. You will have to attach the external style sheet with just a line of code to an HTML page and completely alter the appearance of the page. The external style sheets also assist in fast opening of web pages. When you are using an external style sheet, your web pages will contain only basic HTML - no byte-hogging HTML tables or

Moreover, when a web browser downloads an external style sheet, it usually stores the file on the visitor's computer [in a behind-the-scenes folder called a cache] for quick access. When your visitor hops to other web pages on the site that use the same external style sheet, so there is no need for the browser to download the style sheet again. The browser can simply pull the external style sheet from its cache - a significant savings in download time.

Note: When you are working on your web site and previewing it in a web browser, the cache can work against you.

Internal Style sheets

An internal style sheet is a collection of styles that forms a part of the web page’s code, always placed between opening and closing HTML

<style type= "text/css">
h1 {
    color: #FF7643;
    font-face: Arial;
}
p {
    color: red;
    font-size: 1.5em;
}
</style>
</head>
<body>

/* The rest of your page follows… */

Note: You can place the <style> tag and its style after the <title> tag in the head of the page, but Web designers usually place them right before the closing </head> tag.

The style tag is HTML, and not CSS. But the job is to let the web browser be aware that the information contained within the tags is CSS code and not HTML. Creating an internal style sheet is as simple as typing one or more styles between the <style> tags.

Internal style sheets are especially easy to add to a web page and provide an immediate visual boost to the HTML. But off course, they are not the most efficient method for designing an entire web site composed of several web pages. For one thing is you really need to copy and paste the internal style sheet into each of the pages of your web site, which becomes quite a time consuming chore that adds bandwidth-hogging code to each page.

Sometimes internal style sheets prove to be even more hassled when you want to update the look and feel of the web site.

For example, say you want to change the <h1> tag, which you originally decided should appear as large, bold and green type. But now you want a different look; you want it blue type using the courier typeface. Using internal style sheets, you just need to edit every page. So the simple solution is creation of external style sheets.

Note: It is also possible [though rarely advisable] to add styling information to an individual HTML tag without using a style sheet.

Popularity: 89% [?]