Blog Marco - CSS programming

Minor Website Upgrade

Sun, 05 Oct 2008 20:11:46 -0700

Teaser:
Completed a minor website upgrade

Image:

Body:

I've updated this website's layout with the goal to make it easier to read. Some minor tweaking. I didn't want to totally redesign it - it wasn't worth the effort to create a new layout with a new colour schema. I've made my website wider... its now a fixed width of 980 pixels. It started at 790pixels 4 years ago, then 815... The majority of visitors of this site have the standard 1024x768 pixel resolution. I've made the body text bigger and clearer to read. From 0.7em to 0.9em. I've also changed the font from the selection of "Helvetica, ans-serif, Verdana, Arial" to "Palatino Linotype,Georgia, Garamond, Sylfaen, serif". I find serif fonts are easier to read. I've also allowed for wider images. Instead of images being limtited to the maximum 400 pixels, new posts and the gallery photos from now on are a massive 600 pixels wide! Yay!

Styling Nested Lists - CSS

Wed, 30 Nov 2005 23:42:29 -0800

Interesting article on Styling Nested Lists

Applies when you want to Style your lists using CSS. For example: When you have a multi-nested taxonomy (In Drupal the sitemap does this) and you want to style these using CSS.
Read More

Paragraph
tags white space and CSS

Wed, 30 Nov 2005 23:41:59 -0800

"What command can I use to force two tags to display as one paragraph? i.e. I want to remove the white space between paragraphs."

HTML:
text here
more text here

In CSS:
p.nospace {
margin-top: 0;
margin-bottom: 0;
}

Something Related: (Also related to menu navigation CSS programming)
Preventing indents on my

tags
Read Article

CSS tableless designs - CSS Layout Techniques: for Fun and Profit

Wed, 30 Nov 2005 23:41:37 -0800

A comprehensive guide on the basics of CSS layouts - totally avoiding table layouts (Yes! Tableless website designs!). Fantastic.

CSS layouts galore

Create 3D Buttons with CSS

Wed, 30 Nov 2005 23:39:55 -0800

This page basically creates the effect by effectively changing the colours and widths of opposing borders to effectively give the illusion of a 3D button.

For Example:
border-color: #FFFFFF #666666 #666666 #FFFFFF;
background-color: #CCCC99; border-style: solid;
border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px;

CSS and Round Corners: Build Boxes with Curves

Wed, 30 Nov 2005 23:39:18 -0800

Learn how to make those nifty curves to round out any box corners!

"One of the main reasons why designers use images on a Web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied.

The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, we'll use CSS to create this box with round corners, without an tag in sight!"