Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

By: Ashton Sanders

CSS – Absolute Position Sidebar

May 15 2007

This is what I call CSS tip in 30 seconds:

It is very useful to be able to put your navigation bar or side bar at the bottom of your HTML, and absolute position it to appear up on your site where you want it to go. This is actually pretty easy.

If you just want it to be along the left side of your screen and lets say 100 pixels from the top (for your header), this would be your code:

#leftnav {
position:absolute;
top:100px;
left: 0;
}

If you want your navigation bar to go along the right, obviously you would replace “left” with “right”.

Here is where it can get complicated: What if your layout is a fixed width, centered layout? Then you cant just align the navigation bar off to one side, because that would not stay inside of your layout, it would jump all the way off to the side. Here’s what you would do for a 1000 pixel width and centered website layout:

#leftnav {
top:100px;
right: 50%;
margin-right: -500px;
}

Quick Explanation: “right:50%” causes the right side of your navigation bar to be exactly in the middle of your screen. It doesn’t matter what size screen you have, it will always be right in the middle. Then the “margin-right:-500px” moves the entire navigation bar 500 pixels to the right. So in essence, the navigation bar will always be 500 pixels to the right of the exact middle of your browser! That way it looks permanent, and won’t move as you shrink your screen.

Another Note: If your navigation bar is going to the left side of your screen, here is another option: If you leave the side bar or navigation bar without the absolute positioning, and it appears directly below where you want it, then if you leave off the “right” or “left” in your CSS (leaving only “top:100px”) your navigation bar will move straight up to the top of the screen, and stay where you need it to be.

-CSS in a Flash!
-Ashton Sanders

By: Ashton Sanders

CSS – Unordered and Ordered Lists

May 13 2007

Filed under: CSS,Website Design

WiaF MascotAs many young website designers do, when I first got started working with HTML and CSS, I tired to stay as far away from Unordered Lists (<ul>) and Ordered Lists (<ol>). Everyone has their own reasons, but I just thought there was too much to learn about it before I could get it to do what I want.

When you have a list of items, links, etc., it should be in a list

I found this amazing article about lists on AListApart.com: Taming Lists

(Lists are also what you would use to create a pop-up menu only using CSS.)

-Ashton Sanders

By: Ashton Sanders

CSS – Float

May 12 2007

WiaF MascotTheir is magic in Cascading Style Sheets. (Some properties more than others, but still magic.) Float is one of those CSS properties that really fundamental for any developer trying to create layouts without any tables.

CSS – Float

There are three possible values for float: right, left and none. They are pretty self-explanatory, but here goes anyway:

Lets say you have a div that is 200px wide and 30px tall. Normally any content that comes after it would start at the bottom (30px bellow the top of the div.):

Here is the content that comes after the div.

If you float that same div to the right, all of the content that comes up after the div will show up on the left hand of the div (exactly like the content would come up next to a right-aligned picture):

Here is the content that comes after the div.

And vise versa if you float left:

Here is the content that comes after the div.

This is a very simple property, but you will use it in every CSS design you create. It is definitely a property you want to have ready to throw in to your CSS!

-CSS Everywhere!
-Ashton Sanders

By: Ashton Sanders

CSS – Replacing Text with an Image

Apr 10 2007

Filed under: CSS,Website Design

Cascading Style Sheets (CSS) make it very easy to replace text with an image. Here is the whole process described in as few words as possible:

Background Information

In CSS, “display:none” will cause that element and every child in it to disappear. There is nothing you can do to make one of the child’s element.
“background-image” give an element a background. This can be applied to just about every element.

Create the Elements in HTML

In your HTML, write this:

<h3 id=”title”>
<span>Here is the Title!</span>
</h3>

Create the CSS to replace the text with an image

In your CSS, write this:

/* Remove the Text */
#title span {
display:none;
}

h3#title {
background: url(“image/url.jpg”) no-repeat top left;
height: 20px;
width: 100px;
}

And Bam! Your text has disappeared off of the page, and the H3 element is 20 pixels wide and 100 pixels tall. It also has an image for a background that is aligned in the top left corner.

I’ve seen that CSS Text Replacement technique described with two pages, so I thought I’d see how short of a blog I could make out of it.

And Now you know how to replace text with an Image!

On a side Note, I’ve also seen this done with: “text-indent: -5000px;” or “visibility:hidden”. These work, but I would stick with display:none. It’s the cleanest way to do it.

-I hope that helps you out with your CSS and Design Needs.
-Ashton Sanders

By: Ashton Sanders

CSS – Absolute Positioning

Apr 9 2007

Filed under: CSS,Website Design

Absolute Positioning with CSS can be a very useful thing.

I’ve been working a lot with CSS over the last year, but I’ve just recently discovered the secret to absolute positioning.

Absolute Positioning in CSS

Absolute positioning will allow you to move an HTML item from anywhere in your code to the same spot. For Example: The side bar on this page (Top Horse Connection) is at the very bottom of the HTML code. But the CSS absolute positioning tells the side bar to be positioned 170 pixels from the top of the page. Here is the CSS Code:

#sidebar {
position:absolute;
top: 170px;
left:0;
}

As you can see, it’s very simple. And it’s very useful when you want something to align along the right or left side of the screen. But what if you want a sidebar to be positioned in the middle of your screen (lets say 300 pixels to the left of the exact middle)?

You could do:

#sidebar {
position:absolute;
top: 170px;
left:400px;
}

On a 1400 pixel-wide-screen, that would work perfectly!, but what if your screen was 800 pixels wide, then the sidebar would be 100 pixels to the right of the middle… So what now?!?!

This is what would you do:

#sidebar {
position:absolute;
top: 170px;
left: 50%;
margin-left: -300px;
}

And Wala!

-More on the way
-Ashton Sanders

« Newer PostsOlder Posts »
RSS

Where Am I?

You have found the semi-coherent ramblings of Ashton Sanders: a website designer, developer and webmaster. This is primarily Ashton's place to save notes about techniques and things that he learns in his never-ending conquest of the internet. Hopefully it's coherent enough to be useful to you too.

Subscribe:

Enter your email to get automatic emails whenever Ashton posts on the blog.

Email:

Advertisers:

Email Marketing $19/Month! OIOpublisher Learn how to make Money from Blogging Hillarious, High-Quality Shirts for $6/each Great Book Keeping and Invoicing Software Advertiser Here

Tags and Categories

Links

Blog Roll