Blogging Tips

Creating a Drop Down Menu

Horizontal navigation is quite popular however it becomes restrictive once you’ve got too many pages to list. Once you reach this point then you either need to convert to using a vertical navigation, or start using drop down menus.

Drop downs used to rely on JavaScript however all modern browsers can now manage drop down menus with just CSS (IE7+, Firefox, Opera, Safari; note, JavaScript is still required for IE6 and below).

The HTML …

Written by Sarah from Stuff By Sarah
Posted on April 9th, 2009 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

Explaining CSS Selectors Part III

This is the final part in this 3 part series (see Part I and Part II), and we’re on to Pseudo-element selectors.

:first-line

The :first-line pseudo-element allows you to target the first line of a given target, which must be either a block level element, inline-block, table cell or caption. So, for example, if you wanted to make the first line of a paragraph red then you could use

[sourcecode language="css"]p:first-line { color: …

Written by Sarah from Stuff By Sarah
Posted on March 26th, 2009 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

Explaining CSS Selectors Part II

See last weeks post for part one of Explaining CSS Selectors.

Attribute Selectors

Attribute selectors allow you to target a group of items on a page by matching a particular attribute. This opens up a whole new method of selecting your targets. Unfortunately attribute selectors are not supported in IE6 (which is why they’re not very commonly used), and IE7’s support is a bit buggy at times, however with IE8 out today, hopefully …

Written by Sarah from Stuff By Sarah
Posted on March 19th, 2009 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

Explaining CSS Selectors Part I

Now that we’ve covered a lot of information on HTML and some brief information on CSS, it’s now time to explore the power of CSS even more.

Selectors

Selectors allow you to target specific tags, ids, classes, attributes and more, on a page, ie. target a specific item or a group of items. We’ve seen and used these already briefly, to target type selectors (h1, div, p, a, etc), ID selectors (#idname) …

Written by Sarah from Stuff By Sarah
Posted on March 12th, 2009 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

Understanding the float property

To be able to control your layouts you need to understand the float property. I’ve briefly mentioned this before and given examples of how to use it but not actually explained it in full. Note, for the following examples I’ve used inline styles, purely to give you an example and show you the code used, however, as always, external stylesheets should be used to reduce code, to create reusable code and to …

Written by Sarah from Stuff By Sarah
Posted on February 12th, 2009 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

CSS Basics: List Properties II and a Horizontal Menu

Last week I wrote about the specific CSS list properties. This week I’m going to cover some of the positioning properties that are useful with lists but can be used with other html elements as well.

Margins and Padding

Every element can have both a margin and padding given to it, i.e.

Here the element ends at the border, then the margin is the spacing outside …

Written by Sarah from Stuff By Sarah
Posted on January 1st, 2009 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

CSS Basics: List Properties

Last week I covered the HTML Basics for using Lists. This week and next, we will cover the CSS properties for use with lists.

List Specific Properties

We have 3 properties that are specifically for unordered and ordered lists.

list-style-type

The list-style-type property allows you to control the appearance of the list ‘marker’ ie. the bullet point style for unordered lists or the numbering system for an ordered list. For both types of lists you …

Written by Sarah from Stuff By Sarah
Posted on December 25th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates