Subscribe
Tutorial search

CSS Width Tutorials


Sort by:
How to Change Navigation Menu Color and Location in Thesis Theme
How to Change Navigation Menu Color and Location in Thesis Theme
We know navigation of a site create more impression to the users. Normally default navigation menu bar in thesis theme is in unfinished form.That is the navigation bar is not appear complete width of the web page. It shows upto the available tabs in navigation. We need to change it into finished from which looks quiet pretty. In order to change your navigation menu as finished form.
Difficulty:
Build A Full-Width Centered Navigation Bar
Build A Full-Width Centered Navigation Bar
This horizontal navigation bar stretches the full width of the screen but centers the navigation over your content. It's easy, clean, and CSS-only.
Difficulty:
How to : Remove draggable handle from text areas.
How to : Remove draggable handle from text areas.
You have created a nice, perfectly fitted text area for your CMS, comment system or others. The problem is, in the more recent browsers (read: Safari 3, Google Chrome), users are given a handy draggable area to be able to expand the text area to whatever size/width they wish.
Difficulty:
Tabbed Navigation Using CSS
Tabbed Navigation Using CSS
This tutorial will teach you how to create low-bandwidth tab navigation on a web page using CSS. As an extra bonus you'll also learn how to switch tabs without loading the page more than once.
Difficulty:
How to center a div block horizontally the simple and easy way
How to center a div block horizontally the simple and easy way
Let's say you want to design a Website with the content floating in the middle. Some coders like to use liquid layouts, which means that the horizontal width of the content div box changes according to the size of the browser window. Other designers use fixed-width layouts, which means that the width of the content div box will remain the same independent from the size of the browser window.
Difficulty:
Solving the CSS Padding Problem
Solving the CSS Padding Problem
This tutorial shows you how to solve the "CSS Padding Problem" - a problem that comes when you apply a padding style to a div, and the div's width expands.
Difficulty:
How to make a web 2.0 header and footer
How to make a web 2.0 header and footer
There are a few ways to make a web 2.0 header and footer one way is to use a fixed background image but this leads to problems when trying to figure out the height of your website / page. Another way is to have two layers set to 100% out side of your container so that it expands 100% accross the screen but this also causes problems with smaller screen sizes which if you have lots of images in the header or footer they will be forced down making the page fall apart in apearence. The way I will show you is to use a mix of both if you look at the top of this page you will see that we use this method having a background image to repeat-x giving the impression of filling the page top 100% while the layer realy is only 780px in width. Web 2.0 designes are more used on blogs but its down to prefered taste with web design there is no right or wrong way to design a site.
Difficulty:
CSS Building Blocks
CSS Building Blocks
In this tutorial, the focus is chiefly on common CSS building blocks. For the most part, their uses should be fairly obvious, as the terms correlate well with the real world. Margin, padding, borders, widths, heights—all familiar terms for things that do what you are probably assuming they do.
Difficulty:
The Holy Grail:  3 Column Layout in CSS
The Holy Grail: 3 Column Layout in CSS
Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos-and, as in a fancy truffle, a liquid center for the real substance. Its wide applicability in this golden age of blogging, along with its considerable difficulty, is what has earned the layout the title of Holy Grail.
Difficulty:
CSS Tutorials - Page Layout and Background Image Design
CSS Tutorials - Page Layout and Background Image Design
A collection of 18 FAQs/tutorials tips on designing Web page layouts and background images. Clear answers are provided with tutorial exercises on screen and browser resolutions, setting Web page width in absolute and relative length units, setting images and font sizes in relative length units, adding multiple background images.
Difficulty:
CSS Tutorials - Understanding Multiple Element Formatting Rules
CSS Tutorials - Understanding Multiple Element Formatting Rules
A collection of 15 FAQs/tutorials tips on understanding multiple element formatting rules. Clear answers are provided with tutorial exercises on stacking and nesting block elements, aligning in-line elements, floating block elements, collapsing margins between elements, balancing widths and heights with parent elements, collapsing white spaces.
Difficulty:
Making a Two Column Fluid-Width Layout
Making a Two Column Fluid-Width Layout
Learn how to build a full two column layout with rounded corners.
Difficulty:
Making a Fluid Width 2 Column XHTML/CSS Valid Templatem without using Images
Making a Fluid Width 2 Column XHTML/CSS Valid Templatem without using Images
In this tutorial we will make a fluid width (which means it will resize depending on the size of the window and the screen resolution) web template with valid XHTML and valid CSS.
Difficulty:
CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements
CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements
A collection of 21 FAQs/tutorials tips on HTML formatting models. Clear answers are provided with tutorial exercises on block and inline elements, specifying padding spaces and margins, specifying border width and color, transparent and non-transparent backgrounds, positioning background images, line boxes and text paragraphs, setting line height.
Difficulty:
Building a Better Blog From Design to Backend Part 1: Design and Usability
Building a Better Blog From Design to Backend Part 1: Design and Usability
In this tutorial you'll learn just how to create an amazing looking fixed width, two column blog complete with gradients, all CSS, and how to optimize it for both your users and search engines.
Difficulty:
Search Term(s) (1): width