bravemouse header image 1

bravemouse

teach yourself

bravemouse header image 2

Entries Tagged as 'CSS Positioning'

CSS Positioning Intro Part 1: Why use CSS Positioning?

August 11th, 2009 No Comments

This is the first post in a short series on how to use Cascading Style Sheets to control the layout of HTML web pages.  To get the most out of this series, you should already know some basic HTML & CSS, which you will find in the HTML & CSS Day Course. CSS Positioning is [...]

Tags:  

CSS Positioning Intro Part 2: The Box Model

August 11th, 2009 No Comments

Before leaping straight into how to use CSS to control your page layouts, we first need to have a closer look at how an HTML page is constructed.  I'm talking about something called the "HTML box model". Sound intimidating? Its actually ridiculously simple.   Understanding the box model is both essential to everything else that follows [...]

Tags:  

CSS Positioning Intro Part 3: The DIV tag

August 11th, 2009 No Comments

In the previous post, we looked at how an HTML page structure could be expressed as a series of boxes.  In this post I want to show you a new HTML tag that is used a lot in CSS Positioning:  The div tag. CSS Positioning at its simplest, consists of two tasks: Use html to [...]

Tags:  

CSS Positioning Intro Part 4: Width and Background Colour

August 11th, 2009 Comments Off

In this post we are finally going to do some CSS positioning.  We will start by creating a simple page that looks like this: OK – very simple layout indeed!  But we are starting with basics here.  Soon things will get more complicated.  For the moment, what we are trying to achieve is to have [...]

Tags:  

CSS Positioning Intro Part 5: Margins and Padding

August 11th, 2009 No Comments

In the previous post you learned the bare bones basics of how to specify the width of an element.  It did not look great.  For one thing,  the text looked uncomfortably squashed right up to the edge of each box.  Lets insert some breathing space for the text.  We will also complicate things a bit [...]

Tags:   · ·

CSS Positioning Intro Part 6: Calculating Columns

August 11th, 2009 Comments Off

This series has covered some of the CSS properties that control the layout of a page.  We looked at how to set the width of a page element and how to set margins and padding to create space between page elements. But so far we can only set up the most basic of layouts – [...]

Tags:   ·

CSS Positioning Intro Part 7: Float and Clear

August 11th, 2009 Comments Off

This is the last post in the "Introduction to CSS Positioning" series.  We look at two new properties that will help us create layouts with columns: "float" and "clear". You can download the files used in this exercise here. The Float Property Floats take a bit of getting used to.  They are counter-intuitive and can [...]

Tags:   · ·