Return of Another Skin…

With just a few tweaks here and there, the basic blue and white skin has returned. Electrin had commented that the skin was broken when I first met him – in reality, I had never bothered to fix it last year.

Now if I could figure out a firm definition of when to use div, when to use span, and when to use class vs. id, I’ll be really happy. For now I’m doing a lot of guessing, but at least it’s educated guessing that validates!

UPDATE: I didn’t test this one in Mozilla (I moved on to other code things I needed to work on), but it has been pointed out in the comments that it’s jacked in Mozilla and IE 6. I have no clue how to fix it. I will have to beg the CSS code gods for help. Meanwhile, if you click on it in those browsers, you might need this alternate way to get back to the default template.

By Christine

Christine is an Avenger of Sexiness. Her Superpower is helping Hot Mamas grow their Confidence by rediscovering their Beauty. She lives in the Heights in Houston, Texas, works as a boudoir photographer, and writes about running a Business of Awesome. In her spare time, she loves to knit, especially when she travels. She & her husband Mike have a food blog at Spoon & Knife.

12 replies on “Return of Another Skin…”

I was taught at work that when you use a div it’s just for those words, or that section you select, when you use a span – it covers the entire cell. Does that help? I have hard time with that too.

yes, the left sidebar lays over the contents. couldn’t change the skin back until finally figuring out to manually substitute the 2 in the address bar for another number (the sidebar was over the links for new skins)

I’m using the skin with the giant cookie terrorizing the citizens down below. It looks alright in IE, but all the text is centered! I’m sure you just haven’t gotten to that skin yet and it’s not annoying enough for me to bother changing it.

All this skin and redesigning stuff that everyones been doing lately is making me want to mess with my site!

Haven’t tested the blue/white skin in Phoenix. Too clueless about CSS to fix it right – so I’ll have to add a “NOT friendly for Mozilla” to that one.

Sunideas, you’re right – I haven’t gotten to the giant attacking cookie yet. The font isn’t centered in my version of IE – what browser & OS are you using?

Okay here goes with my attempt at the explanating stuff … 🙂

A div is a *block* element basically meaning that whatever is contained within it will be preceded and followed by a linebreak. (Of course, you can change that with CSS, but you really shouldn’t.) Think of divs as invisible boxes that contain stuff. A span is an *inline* element, which basically means that it’s just meant to surround a section of text within a larger body of text. Think of spans as similar to the default <b> or <a href> tag, only they have no style attributes of their own by default. 🙂

The difference between a class and ID is fairly simple. Basically, a class is reusable where an ID should only be used once. So say you have a group of CSS styles you want to apply to a header div, but nowhere else. You might write them out in the stylesheet as:

div#header { styles… }

Then, in your document, you would have <div id=”header”>content</div> and that content would have the styles that are declared in your stylesheet. If you went on and had another div with the same ID, *theoretically* it shouldn’t show the same styles. (I’m not sure how most browsers react, but I think some of them at least allow multiple instances of ID, which is wrong.) Classes are meant to be reused … you can have as many <div class=”header”> instances as you want. Classes are specified in the stylesheet with a ‘.’ in front of them rather than a ‘#’, like:

div.header { style … }

Or just plain:

.header { style … }

if you want to apple the styles to any container (like <p class=”header”> or something).

Oh. Ste. You are WONDERFUL! THAT is the exact explaination I have been needing for so long! And it all makes sense too, because I have #header and .tinyfont for an id and a class. I know when and where I use them … oh my. Wow. That is so perfect! THANK YOU!

Christine – take out the doctype info and it works. Just those first 3 lines is all that needs to be deleted. I’ve tested it in Phoenix and IE 6 and the skin looks great. If it had pixelog photos somewhere on it I’d switch to it for sure. It’s so clean. I like it.

Comments are closed.