scriptygoddess

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

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.

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!

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!)

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.

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.

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.

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…

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…)

[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
[via (an old post on) Simon Willison]

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]