CSS Tutorial » CSS Page Layouts

Centering Text with CSS

Andrea Barnett — Tue, 29 Jun 2010 00:29:25 +0000

Centering text and other elements can easily be done with the CSS text-align property. It can be applied to a division, the p tag – pretty much any block-level element.

Applying this to an internal or external stylesheet:

p {text-align: center;}

or this to inline styling:

This is centered text

will center your text.

Using the CSS z-index

Andrea Barnett — Sat, 19 Jun 2010 15:07:00 +0000

By default, the elements of a website line themselves up next to or under each other automatically. However, at times, the design requires them to overlap. When that happens, the stacking order becomes important, and the natural stacking order will need to be manipulated.

Without applying any CSS to the elements within the wrapper on the demo page here, this code:

<body>
<div id="wrapper">
<img id="aqua" src="aqua.gif" alt="aqua square">
<img id="green" src="green.gif" alt="green square">
<h1>The z-index and CSS -- When the Stacking Order Matters</h1>
<h2>All elements appear in their natural order as they are entered in the HTML</h2>
</div>
</body>

creates a page that looks like this. As you see, there is no point worrying about stacking order, the elements aline themselves automatically.

However, when positioning is applied and they start overlapping, we can change their stacking order if we need to. When it comes to z-index and the stacking order, one must note the following:

Z-index only works on relative or absolute positioned elements
The default z-index is zero

Here, I have added an absolute position to the h1 and a relative position to the green box to move them up and down-and-left, respectively.

h1 {
	position: absolute;
	top: 100px;
	left: 100px;
}
 
#green {
	position: relative;
	top: 50px;
	left: -50px;
}
 
h2 {margin-top: 50px;} /*This is here to push the line below the green box */

That means that the aqua image, which does NOT have positioning applied, sits on the default level of zero. Adding any kind of z-index to the element is useless – it won’t budge because of the lacking positioning. But we can move the text and the box either under (with a negative z-index) or on top (with a positive z-index) the not-positioned, zero-level aqua box.

#green {
	position: relative;
	top: 50px;
	left: -50px;
	z-index: -2;
}
h1 {
	position: absolute;
	top: 100px;
	left: 100px;
	z-index: -1;
}

creates this page.

Multiple Background Images with CSS

Andrea Barnett — Sat, 08 May 2010 11:48:48 +0000

At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements.

But pretty much every selector can hold a background image. On THIS PAGE, I have added the image to the html tag, the body tag, and the h1 and h2 tags (these are ‘selectors’) – like so:

body {
	background: url(bgimage.jpg) repeat-y right;
}
 
html {
	background: url(bgimage.jpg) repeat-y left;
}
 
h1 {
	background: url(bgimage.jpg) no-repeat right;
}
 
h2 {
	background: url(bgimage.jpg) no-repeat left #ffc;
	padding-left: 250px;
	height: 150px;
}
 
#wrapper {
	padding: 0 250px; 
/*I'm using the right and left padding of the wrapper to keep
the content off the images */
}

Note that I’m a bit lazy at the moment, and am using the same image for all four selectors. Taking a closer look at each of them, also shows a bit more how things work:

The html tag (image displayed on the left) repeats the flower all the way down the monitor, regardless of how much content there is. Resize your window and see what happens.

The body tag, where the image is displayed to the right, only shows the image as far as the content goes.

The h1 tag only shows as much of the image as the space its content is taking up.

The h2 tag also has some height added to it (exactly 150px, the height of the background image), so it does show the entire image. I’ve also added the background color to more clearly demonstrate the space that’s taken up by h2.

Styling Lists with CSS

Andrea Barnett — Tue, 27 Apr 2010 23:50:03 +0000

We’ve already discussed navigation lists and list bullet images, but sometimes, a list is just a list. There are two types – the ordered list and the unordered list. The ordered list counts the items; the unordered list marks the individual items with bullets or other markers. The HTML is simple.

<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
 
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

And, without any styling applied at all, that looks Like This.

We can affect the list item markers with some simple CSS and the list-style-property controls those. For unordered lists, we can chose between ul styles: disc, square, circle, or none – which looks like this, or between ol styles: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, upper-greek, lower-latin, upper-latin, armenian, or georgian, which looks like that.

Other than that, we can style the ul tag and the li tag. Anything added to the ul tag, affects the entire list, where properties applied to the li tag will affect the individual list items. So this CSS

ul {
	background: #ffe566;
	padding: 25px;
}
 
ol {
	background: #828772;
	padding: 15px;
}
 
ul li {
	background: #fc6;
	margin: 5px;
}
 
ol li {
	background: #9cc;
	padding: 10px;
        margin-left: 35px;
}

will create that.

(Note that I had to add the ‘ul’ or ‘ol’ in front of the ‘li’ so I could target specifically either list’s items. Had I just used ‘li’, any styling would have affected all of them regardless.) … example: adding a larger font size to ‘just li’.

3-Column, Fixed Width Layout with CSS

Andrea Barnett — Mon, 12 Apr 2010 00:06:35 +0000

The three-column layout is probably the second most common layout used for websites. There’s usually a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some additional stuff, whatever that may be. What you put inside your columns doesn’t matter – the way to achieve the 3-column layout stays the same.

So let’s start with our basic HTML to put all the parts on paper — or in our case, on line. This is the basic outline of what’s between the body tags:

<div id="wrapper">
 
	<div id="header"></div>
 
	<div id="column-left"></div>
 
	<div id="column-center"></div>
 
	<div id="column-right"></div>
 
	<div id="footer"></div>
 
</div>

For the entire HTML code – to include some filler content – see Basic HTML – No Styling. To see the code of the example page, just right-click and chose “View Source” from the drop-down. Most browsers offer that feature.

And of course what we get, is NOT a 3-column layout. It’s just one division on top of the next. That’s because we haven’t gotten to the ‘with CSS’ part of the title of this post yet. So let’s already!!

First, and just to make things easier to see, I will apply the fixed width and center my page. Here’s a post with the finer details Center-aligning a Website right here already. Here is the CSS that does that:

* {
	margin: 0;
	padding: 0;
}
 
#wrapper {
	width: 980px;
	background: silver;
	margin: 0 auto;
}
 
#header {
	background: black;
	color: white;
}
 
#column-left {
	background: red;
}
 
#column-center {
	background: yellow;
}
 
#column-right {
	background: purple;
}
 
#footer {
	background: green;
}

(Please note that you should really be using hex or rbg color codes, but for the purpose of this demonstration, color names are just easier to deal with.)

And it looks Like This. Now we just have to get our columns to act like columns and line up next to each other. There are different ways to do this, but I prefer to just float them all. So we’ll give them all a width and add float: left; to our three columns:

#column-left {
	width: 250px;
	float: left;
	background: red;
}
 
#column-center {
	width: 480px;
	float: left;
	background: yellow;
}
 
#column-right {
	width: 250px;
	float: left;
	background: purple;
}

At this point, it’s important to be aware of a special characteristic of floats – I picture them as balloons – they float above our heads, without taking up any actual space among us. So just as you can place a box under a balloon without the two affecting each other’s space, our footer will act like the floated divisions are not even there, and line itself up neatly right under the header – where we do NOT want it to be. So we have to give the footer a special set of instructions:

#footer {
	clear: both;
	background: green;
}

and now the whole thing looks Like This. And there you have it!

A few things can go wrong, and here is some easy, preliminary damage control: If you see your columns NOT all sitting next to each other, it’s likely because the total sum of all their widths, paddings, and margins combined is GREATER THAN the width of their containing wrapper. So put one of your columns on a diet and cut its width down some – and things should fall into place beautifully. And if not, ask for help at the Killersites Community.

How to Position Text around an Image with CSS

Andrea Barnett — Sat, 27 Mar 2010 13:47:57 +0000

It’s always nice to have some pictures to go along with your text. However, if you just use the html to insert a photo into your text flow, you’ll find that it breaks up the flow of your text and just plops itself ungracefully right in the middle of your paragraph without rhyme or reason.

Fortunately, a little bit of CSS positioning can help us out here. Adding this to your CSS:

img {
	float: left;
}

will make the same thing look like this.

Now all we have to do is add some margin or padding to create a bit of space around the image

img {
	float: left;
	padding: 0 25px 25px 0;
}

And here you go.

However, if you use the image tag for your CSS, all the images in your site will float. Since this is a Basic CSS tip, I’ve used it for demonstration purposes only. A more practical approach would be to add a special class to the images you want to float.

<img class="floating" src="http://www.csstutorial.net/wp-content/uploads/2010/03/leia.jpg"
 alt="German Shepherd taking a nap">

and write the CSS like this:

img.floating {
	float: left;
	padding: 0 25px 25px 0;
}

How to Add a Background Image with CSS

Andrea Barnett — Thu, 04 Mar 2010 11:47:16 +0000

Background images, just as the name implies, are part of the BACKGROUND of a website, not part of the actual content. The most common place to add a background image to, is the entire canvas – aka the body tag.

The CSS to add an image to a body tag is simple:

body {
background: url(bgimage.jpg);
}

I’m just using a random image for demonstration purposes, and THIS this is what we get. And we can note the following:

It’s a very beautiful flower (grew in my house)
It repeats itself and covers the entire background – that is called ’tiling’ (think bathroom)
It pretty much makes it impossible to read the actual page content

There are also special background images that are designed to tile unnoticeable -for example this one:
which will create THIS.

CSS also gives us the tools to direct our background image how we want it. The default, as you can see, is that it repeats itself horizontally AND vertically to fill the entire background, regardless of size. Sometimes we might want the image appear only horizontally or vertically – and maybe not directly on the edge of the viewing area.

body {
background: url(bgimage.jpg) repeat-x bottom;
}

creates a background that is repeated vertically at the bottom of the content, and this background image repeated horizontally on the right is created by this CSS:

body {
background: url(bgimage.jpg) repeat-y right;
}

There are many more ways for us to control our background. In addition to the above, we could:

Add a background color (background: url(image.jpg) #555555;)
Display the image only one time (no-repeat)
Position it more specifically (options are: top, bottom, left, right, center, x-15px, or y-20% (measurements and units are optional))
Keep it from scrolling (background: url(image.jpg) fixed;)
Any combination of any of the above

A wise combination of all these techniques might actually allow us to create a decorative background that does NOT interfere with the actual content. Like This. The following CSS created this page – and please note that I also added some padding to keep the content off the image, which makes things soooo much easier to read:

body {
	background: url(bgimage.jpg) no-repeat #f6f1b9 fixed top right;
	padding-right: 250px;
}

Background images can be added to pretty much any tag. They can be added to divisions, used to create fancy navigation menus, spruce up a list, decorate h tags,…. It’s so exciting!!!!

How to Delete Browser Default Settings in CSS

Andrea Barnett — Tue, 02 Mar 2010 11:47:40 +0000

Every browser has its own default settings for font size, margins and/or padding around certain elements, etc. Webdesigners should aim to have their sites display well on all kinds of browsers, but these different default settings can easily lead to problems. Sometimes, the differences are subtle and have no effect on the design, but they can also cause a page to totally break in one browser vs. another.

To demonstrate, you could look at THIS PAGE via Browsershots.org. (Just copy and paste ‘this page’ URL, then go to Browsershots and play around).

There is a quick and easy fix so. Start your stylesheet out with this:

* {
margin: 0;
padding: 0;
border: 0;
}

The ‘*’ stands for any and all properties on your page, and this code sets them all to ZERO. Of course, now you’ll have to add your margins, padding, and any borders back in with your CSS in the right places, but usually, you’d have to do that anyway – and this way, it’s much easier to create a cross-browser compatible site.

Styling a Horizontal Navigation Menu with CSS

Andrea Barnett — Sun, 28 Feb 2010 20:23:48 +0000

It’s true: Your navigation items are really a LIST. Bread, Milk, Sugar, Coffee, Home, Contact Us, About, Cheese, Tomatoes, Sitemap. See, it’s a LIST!! And it should be coded and styled like a list. It’s easy.

<ul id="navigation">
<li><a href="#">Home</li>
<li><a href="#">About</li>
<li><a href="#">Stuff</li>
<li><a href="#">Other Stuff</li>
<li><a href="#">Contact Us</li>
</ul>

And it looks like THIS. Note how I’ve given the ul an id. I call it ‘navigation’, but you can call it ‘hamster-parade’ or whatever you chose. However, I’ve long since discovered that using practical and meaningful names for classes, IDs, file names, and images is VERY helpful. So let’s stick with ‘navigation’. The reason for this ID here is that it will allow me to apply a specific style to only the navigation list, while other lists within my site can be styled totally different.

But even so our navigation list is a list, most of the time, we don’t want it to look like one. So first, let’s get rid of the bullet:

ul#navigation {
list-style: none;
}

And to get our list items to line up horizontally, we add:

ul#navigation li {
	display: inline;
	white-space:nowrap;
}

The ‘display: inline;’ line creates the horizontal line. ‘white-space:no-wrap’ prevents our list from wrapping and turning into a 2-line list, which could possible happen when the page is viewed at lower resolutions or the font is increased beyond a certain size in the browser view. And here you go: A Horizontal Navigation List without Bullets. At this point, it’s kind of ugly, but how to dress it up will be a different post.

2-Column, Center-aligned Fixed Width Layout with CSS

Andrea Barnett — Sat, 27 Feb 2010 16:46:19 +0000

This type of layout is used a lot, and for good reason. It works.

So let’s start off by looking at the HTML:


"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Andrea Barnett for Killersites">
 
<title>2-Column, Center-aligned Fixed Width Layout with CSS</title>
 
</head>
<body>
 
<div id="header">
<h1>This is the Page Header</h1>
</div>
 
<div id="left-column">
<h2>The Navigation</h2>
</div>
 
<div id="right-column">
<h2>The Main Content</h2>
</div>
 
<div id="footer">
<p>The Page Footer Goes Here</p>
</div>
 
</body>
</html>

Basic Layout Components

I am going to apply a different background color to each division just to make it more obvious where exactly each division is. Colors should be indicated by hex codes – for example #FFFFFF for white or #000000 for black. But for the purpose of this demonstration, I’ll use color names, as it makes things more obvious. So I’m adding the following CSS code to the header: