Website Designers and Webmasters

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

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

By: Ashton Sanders

CSS Zen Garden

Mar 25 2007

What is CSS Zen Garden?

It’s a great idea, thats what it is. It’s the ultimate Test of a CSS Designer. They have one basic HTML file, that is free to download, but you’re not allowed to change it. The only thing you are allowed to change is the css (which is all you need), and people create the coolest designs using only CSS!

Introduction to Cascading Style Sheets

HTML is very functional, and you can do a lot with it, but there are two large down sides to it. It’s purposes is solely for formatting, and it clogs up your HTML documents with a lot of code. Adding a Cascading Style Sheet to your website not only makes it way easier to format( and change at a later date). It also simplifies to the code like nothing else.

I recently did a Search Engine Optimization on a site called: Clear Lake Guide Service. The previous website used about 100 lines of code for the header… Using CSS, I cut that down to 20 lines of code. It keeps the Search Engines happy, and the website designers happy.

So needless to say, you can do almost anything with CSS!

Now back to CSS Zen Garden:

Zen Garden takes submission from website Designers from all over the world. And every design looks like a completely different website, even thought the XHTML is EXACTLT the same as all of the others! Right now they are getting close to 1000 submissions! If I have a free hour, I’ll throw one together as well.

“CSS makes the internet spin a little bit lighter.”
-Ashton Sanders

By: Ashton Sanders

Internet Explorer CSS Tip

Mar 2 2007

Filed under: CSS,Website Design

Beginners Note: The main purpose of CSS, or Cascading Style Sheets, is to add color and life to a website. The main use for HTML, or Hyper Text Markup Language, on the Internet is to create the format or layout of your website. (Note: It is quite possible to create two identical websites, one in only HTML, and one with almost no HTML formatting and lots of CSS.)

Many Search Engine Optimizers will tell you that the more CSS you use the better. The reason for this is simple: If you created a web page only in HTML, a search engine would have to index 300 lines of code (lets say), while on the other hand, if the same website was formatted with lots of CSS, you would only have 50-100 lines of HTML for the search engine to index. So the search engine would index almost only textual information, and very little code. And in theory, the search engine will think that you are a much more important resource for it to index.

As any Website designer will tell you, Internet browsers can react very differently to the same piece of CSS code. And since a vast majority of the public use Internet Explorer, it’s very important for your website to look good in that browser. Unfortunately, this browser doesn’t listen to CSS directions as rigidly as FireFox, the next most popular Internet browser. (Internet Explorer Vs. FireFox)

Now for the Internet Explorer CSS Tip:

Lets say you have this piece of CSS code:

.text {
padding-top: 5px;
}

And this is your HTML:

<div>Welcome to the HTML Class</div>
<div class=”text”>Today we will be learning about HTML</div>

And for some reason the freaking Interent Explorer won’t listen to your css. No matter what, it just refuses to add padding in between the two <div>s. There are many things you can try to get it to work. You can change it to “margin” or change the distance to 70px. Nothing happens. Believe me… one of the most frusturating things in the world… second only to stupid people… maybe.

Well behold there is something else you can try: be more specific when you define your selector (.text). Try this:

div.text {
padding-top: 5px;
}

I’ve found that Internet Explorer takes much more kindly when you are more specific with your CSS defining.

Another CSS Note I thought I’d throw in as a bonus:

I realized that almost none of the CSS tutors on the Internet tell you about this extremely useful CSS syntax that can help you to be more specific. Lets take this example. You have a 100 page site with lots of pictures that you want to validate. Unfortunately, a couple of your pictures don’t have an “alt” tag (which will create an error in almost all HTML validators). The solution is use this CSS code:

img[alt] {
border: 5px solid #FF0000;
}

This code will put a 5px red border around ever image that has an alt. This will make it easy for you to scan through your site and easily view images that are and are not properly formatted.

This is how it works: After the HTML tag (selector) and inside the brackets [ ] put any atribute for that HTML tag. You can also put the attibute and that atributes variable. Like this:

img[alt=”Websites in a Flash”] {
border: 2px solid #FF0000;
}

With that code, any image that has the alternate text of “Websites in a Flash” will have a 2px red border around it.

-Enjoy
-Ashton Sanders

« Newer 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