CSS Positioning and Styling
CSS/HTML Lists Styling Techniques
Certain elements in HTML lend themselves to many situations when marking up a website, one of the more useful of these elements is the HTML list. Using lists, a developer can markup horizontal navigation, dropdown navigation, a list of links, and even scrolling content panels (with the help of Javascript). These features can help developers build new sites and applications as well as integrate new content into existing applications.
How to make your footer dock to the bottom of the screen
One problem I run into pretty frequently when coding a site in to XHTML and CSS is making my footer dock to the bottom of the screen. It’s especially annoying if you have a page that’s short on content and the footer, which happens to be a different color that the body background doesn’t stay at the bottom of the browser window.
Make Footer Stick to Bottom of the Page using CSS
There are several ways to make a footer stick to the bottom of a page using CSS. But until now, they've used long and messy hacks or a lot of extra HTML markup; this method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers.
Style Your Ordered List
By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.
Better Ordered Lists Using Simple PHP
You can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don't get enough control over the number itself. Here is an example where you ditch the traditional ordered list and create your own!
In this example, I used an h2 element with a huge font size, gray color, floated to the left, with a little right margin. This technique is nice 'n' bulletproof because it doesn't use any graphic elements to contain the number.
Learn the Basics of Floating in CSS
The float declaration is used to put elements beside one another such as several divs. A common technique is for, say a blog, you have your content, and you have your sidebar on the right. Each one of those is their own container or div. To make them line up against each other rather than having the content on the top and the sidebar below it we need to float these divs. Lets start out by setting up the divs, with some dummy content we may see in a traditional blog
Creating a Parallax Effect in CSS3
In the ancient video game days, although you may have assumed you were actually moving a character around, you probably weren't. Games like Sonic the Hedgehog and Mario World used a technique known as parallax scrolling. This is a method used to achieve a "movement" effect, when really all that is happening is the background is scrolling from right to left. Today, we'll see how to achieve a similar effect using some clever positioning and some CSS3 transitions.
Multiple Borders
Although some may not see a use for having more than one border on a CSS element, it can really be a useful tool in more than one situation. I've seen the effect used most often in image galleries and such, and it can really help elements on your page to stand out a bit more by giving them more depth. Today, we'll see how to implement multiple borders in CSS using some not so common pseudo classes.
CSS3 Application Principals #1 Inline Styles
inline styles are not your best option because they override everything else. Quite the opposite really - you want to shy away from inline styles because they limit what can be applied to your element - and it’s really the most tedious method of style application.
Fundamentals of CSS Positioning
CSS positioning properties allow you to determine where on your page certain elements will appear. Elements can be positioned using the top, right, bottom and left properties, however to set these properties the elements position property needs to be set first. Let's dive in and see what position properties are available to us.
Round Corners for HTML Divs
This tutorial shows you how to make round corners for divs. From scratch with and without jQuery UI library.
CSS Positioning
This tutorial teaches you how to use CSS to position images, text, and other elements on your Web pages. Essential reading for anyone who wants to start using CSS for layout.
Styling Tables with CSS
Learn how to use CSS to transform dull HTML tables into beautiful works of art. This article shows how to customize the borders, spacing, padding, background and colours of tables and table cells, as well as how to produce alternate-coloured table rows and create hover effects.
Floats
What are floats in CSS, and what can you use them for? This tutorial walks you through this essential CSS topic, with examples of usage.
Making Lists Look Nicer with CSS
You can really go to town with HTML lists when you add a sprinkle of CSS! This tutorial shows you how to make your lists stand out from the crowd.
How to use the position fixed property?
In this article we will see how it's possible through the use of the same property obviously assigning to it a different value compared to the one in the previous article rendering an element always present on the page , in fixed mode, even when the latter scrolls down. We are talking about fixed positioning.
Simple image frame border effect
In this post I will explain who to make a simple but nice image border frame effect with css.
Shorthand Borders, Margins And Padding
This tutorial covers using CSS shorthand in borders, margins and padding.
Float bug fix in div to expand
Many of would find a problem when using a block(div) called a container with the background color, where you don't want to use float or height to the div. And in the inner div of the container you want to give float to it. You can find this issue in most of the browser like ie, firefox, the container will not expland as the inner div.
Fluid, multi-column, vertically ordered list
Create a fluid, multi-column, vertically ordered list using nested, floating divs.