Archive for the ‘CSS related’ Category

How margins work in CSS

Tuesday, May 8th, 2007

This is a great article/tutorial on how margins work in css (why/when then collapse, and why/when they don’t).

Live CSS editing in IE

Saturday, April 28th, 2007

I know there was some install you could do so you could do “live” css editing of a webpage within IE (much like the web developer extension for Firefox) I’ve since lost the link (feel free to post it in the comments if you have any idea what I’m talking about! LOL) but for some reason I could never get it to work. I gave up for a time, but last night I was working on something that, of course, worked just fine in Firefox, but IE was doing something completely different and I couldn’t figure out why. So I went looking again. What I found: CSS Vista. Lets you edit the css of webpages and see your changes live on the screen… AND what I really like about it is that it has two preview panes - one for firefox and one for IE - so you can see if what you’re doing is going to be changing something in one browser and not the other.

CSS Vista Screenshot

This isn’t terribly new - I guess the program has been out for awhile. I wish I had known about it sooner. Would have saved me a bunch of headaches!

CSS “TOC” style?

Thursday, March 8th, 2007

I’m just curious… is there a fancy way to do something like this in CSS:

Introduction …………… Page 1
Information ……………. Page 2
More Info ……………… Page 3

… where the “Page” text lines up and the “…..” just fills in until it reaches the “Page” text… kind of like you’d see in a table of contents in a book? (Ideally the “….” wouldn’t even be text in the markup. It would just be a background fill or something…) Is that even possible?

Update: Jenna got me on the right track…. (Thank you!) :D

Make each line part of a list item. Apply the background image to <li> style. Wrap each part with another tag. Float one right, the other left, and give them both a solid color background the same as the rest of the page (so that it covers the dot, so it won’t show through under the text). I also wanted the right column to line up, so I gave it a width, and told the text to align-left. Here’s the example.

floated box with extra (unintented) margin

Monday, January 22nd, 2007

Boy, do I love that “Position is everything” site. Every problem I’ve been having these days with CSS, the fix can be found there.

Here’s today’s CSS dilema. Had a simple floated div. Gave it a margin - and for some reason, IE doubled it. The solution is just to add “display: inline;” to the floated div, and all is well.

Floated boxes extending outside of container box

Saturday, January 20th, 2007

Ran into this problem today: Had a container div with floated divs inside. However the container div was shrinking up above the bottom of the floated divs inside.

See example here.

Found this solution which basically suggested adding the following so that it wouldn’t do that:

.containerdiv:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

As well as adding a height: 1% (to to the container div)

See fixed example here.

Vertical Center Text in DIV

Tuesday, January 9th, 2007

Like I said, I’m still fighting my way through understanding CSS. Here’s a little tid-bit I finally understand today. Had a bit of text that I wanted to have centered in a nav bar. “vertical-align: middle;” didn’t seem to do anything. Found this article which said this:

the thing with vertical-align is that it’s vertical aligning text according to the default line-height of the inline-text boxes. You can manipulate that by setting the line-height to the same height as your block, but this will only be effective if the line of text (link) does not wrap onto more than one line.

NOW it makes sense…

So if you had:

<div id="nav"><a href="#" class="centerme">Home</a></div>

Then:

#nav {
height: 25px;
line-height: 25px;
}
.centerme {
vertical-align: middle;
}

should do the trick…

Good CSS (and PHP and more) References

Friday, October 8th, 2004

Laura (no link) left only the link to the following reference as a “guest authored” post:

University Of Minnesota Deluth: Web Design References
This particular one is for CSS, but in the sidebar you’ll see many more to PHP, Typography, Usability, Javascript, etc. etc.

My one note is their URL is very unfortunate. They MUST get jabs for it. When I first saw it in the guest authored post - I thought it was a joke:
www.d.umn.edu? Sorta looked like www.d.umb.edu to me. (Then again, I’m kind of dyslexic…)

Many CSS Links

Friday, October 8th, 2004

[via del.icio.us]

HTML Help: CSS References

Westciv: Learn Web standards

Veerle’s Blog: Designing a CSS based template
(from psd to css) - in 5 parts - looks VERY good at first glance

CSS Vault
Gallery of CSS based design (need to add this to my “design inspiration” post as well

Uberlink CSS Rollover Tutorial

Thursday, October 7th, 2004

Uberlink CSS Rollover Tutorial
[via (an old post on) Simon Willison]

CSS Panic Guide

Saturday, October 2nd, 2004

I have seen this before, but forgot where, and forgot to save the link.

CSS Panic Guide
A number of good articles/information on various CSS related schtuff.
[most recently via del.icio.us]