scriptygoddessMy good friend Jenni just announced the grand opening of her site "Code Novice" – already she has a few scripts and tutorials up that look pretty interesting. 😀
Happy Birthday Scriptygoddess – Two years old today. 
(Does this mean I've entered the "terrible two" stage?) 😉
(Still on old news for you CSS-pros. I'm wondering why YOU'RE not writing this blog. All the comments have been more helpful than my posts!! LOL!)
Just wanted to jot these down so I could find them later:
font-weight: bold;
font-size: 10px;
font-family: Verdana,Arial,Helvetica,sans-serif;
shortcut:
font: bold 10px Verdana,Arial,Helvetica,sans-serif;
margin/padding shortcuts:
margin: top# right# bottom# left#
ie. margin: 5px 0px 2px 10px;
or
margin: top&bottom# left&right#
ie. margin: 10px 5px;
color shortcuts (websafe hex)
color: #000000;
shortcut: color: #000
color: #FFCC00;
shortcut: color: #FC0;
This will come in handy when trying to figure out how pages are constructed in CSS: a mouseover DOM bookmarklet
[via Melissa]
(Also from that same post on Melissa's site: Javascript Weblog)
So I'm moving along in my CSS understanding. I (think) I get float, positioning. I even get the box model, and box model hack.
I had a small site that used a tabled-design that is due to go live next week, so I decided I'd quickly convert it to CSS before the launch. (Yes, I know it's Wednesday. Yes, I'm a glutton for punishment).
I got my layout working 99%. I had previously removed the doctype declaration – so when I put in the box model hack – it didn't seem to work in IE 6. I pasted this one in from a page online that I knew used the hack and worked, and then it worked for me too:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
I don't understand doctype declarations. I know they're important and that I should understand them. Right now, I'm just glad my layout is happy again. Baby steps here… baby steps!
This blog gets quite a number of comments. Some are just nice words of appreciation, others are kind of useful. Then there are some that are more valuable than the post itself! (For an example of this – check out my last few posts about CSS.)
I really hope that if you've been reading this blog for awhile, you've learned to comb through the comments. Sometimes the scripts get completely overhauled in there. Other times, people post other solutions, solve installation problems, etc. post helpful links.
Of course the difficult side of that request, is that some posts have A LOT of comments. Unfortunatley, in some cases you'll see the same question get posted over and over again – when it was already answered or addressed previously – but you'd never find that answer in all the comments. Quite simply, it's difficult to find the answers you really need when there's so many comments in a single post.
SO – my script idea is a "COMMENT" rating system – much like this one which was designed for POSTS (side note: Seems like some updates were added and here is the most recent version). As well, there's an update with timestamps and banning here.
It would be simple enough to modify those scripts to store ratings for comments. Additionally what I would add is this: if the comment is rated 50% or 75% (user choice) positively, then highlight it so it's easier for people to find. (This would probably be a simple div around each comment that has a php include in it – that checks the comment's rating and gives the div a background color for a hightlight) By 50 – 75% I mean this: for example if there are "10" votes on a comment and if 7 of them were + (3 of them were – – maybe from people who didn't completely agree) it would get highlighted. If it got only 3 + votes (from a total of 3 votes) – it would get hightlighted – since 3 out of 3 is 100%.
Here's why I haven't just jumped in and written the script.
1) I don't know when MT 3.0 is coming out and I don't know if maybe it already has a feature like this (My comment queue script is already going to be a waste of space – as MT 3.0 will have it baked in. For this I'm glad – because it will be better that way)
2) Since comment stuff is changing in MT 3.0 – I'm not sure what to expect and I don't want to write a script that will have to be updated/modified the day the new version comes out.
3) Since this script is specifically designed for posts with many comments – my original "design" for it meant checking the database x number of times (where x = the number of comments.) For particularly popular posts (I can't believe that one has 125 comments!!) – would this kill my database, bandwidth, and "download" speed?
So just wanted to throw this out there – I won't be writing this script before the MT 3.0 release… but I'd REALLY like to as I think it would greatly help people trying to use scripts from this site. If anyone else has any ideas – feel free to leave a comment.
Just a note that maybe will save someone else the headache I had yesterday.
If you're using Dreamweaver – and create a new HTML page – it automatically sets your doctype like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This caused a problem with a table-based design I had done. Images placed inside cells of a table had this odd space after all of them. Even though I had specified the table, and it's cells to the exact width and height of the image, as well, there was no space in the HTML itself. It only would happen on Netscape 6 – and as soon as I removed the doctype declaration – it went away.
So, I'm checking out CSS Zen Garden – I'm now using firefox because of all the cool extensions it has specifically the PNH Toolbar which lets outlines the blocks (ie. grids) on the page, as well as this one: Edit CSS which lets you see and EDIT the current page's CSS and redisplays your changes in real time. (mentioned in the comments of this post, by Andrew Dupont) (THANK YOU for those!!!)
In doing so, I was examining the first Zen Garden page's CSS which uses this trick to swap images instead of text. That is just so cool. (I know, all you CSS-freaks have probably known about that little trick for eons.)
A brief break from the eye-bleeding CSS talk. LOL! ;o)
I needed a text field to be prefilled with text. If the user clicked on it, the text would clear out. If they "left" the text field (changed focus) without changing it – I needed it to revert back to the original text. If they DID enter information in it, I needed it to NOT revert back to the original text. (Clear as mud?)
Here's what I mean:
Here's how (and why) I did this:
Read the rest of this entry »
Sorry for the placeholder, my plan is to fill in the answers. (If I get the answer wrong, please correct me! As well, feel free to answer any of them in the comments – if you do, I'll move your comment into the body of the post – with credit (and then delete the comment to clean up) (Actually there was an answer by Tom (anonymous) in the comments – I'll leave his there, and try to put it in my own words – maybe then I'll get it! LOL!)
Question
What's the difference between static, relative, absolute, fixed positioning. And what scenario would be a good example for use of each?
static
I'm guessing this is the default. It's "position" is as it is in the html. If it's the first thing in the html, it'll show up at the top. If it's the last thing in the html, it'll show up at the bottom… (barring any other styling of other elements around it)
Uses? got me. Doesn't seem like you WOULD use this specifically.
relative
This block still shows up where it is in the html – but you can modify it's positioning… move it over a little, using top, right, bottom, and left elements.
Those additional elements move it over based on it's "container" – which could be the page itself – or another layer. If that "parent" positioned over to the right of the page 300 pixels. Then you give this relative positioned layer left: 20px…technically it would bee 300 + 20 over from the left of the page. It's position is relative to that container.
absolute
This removes the layer from the rest of the flow of the page and pastes it where you specifically want it to go. It's position is determined with height, width, top, right, bottom, and left elements.
fixed
Would be cool if IE supported it. This fixes an element on the page – much like absolute, but with the addition of it not scrolling. I don't see my using it much un less IE magically learns what it is
Question
what's the difference between inline vs block display (and some of the other options for display)? good examples for use? (I know that display: none hides stuff. That's about it)
block
An example of a well-known "block" element – <p> – there's space before and after it – once you put that </p> – carriage return – block ends.
inline
Doesn't generate a carriage return at the end – (<span> tag is typically displayed inline, same for <b> etc..) If you wanted to really mess with the world you could go and specify p { display: inline; } and then suddenly p tags would cease to have a carriage return. (Note: I'm not recommending you do this. I would imagine reading paragraphs that bleed one into another would be just a TAD difficult to read.
uses: got me!
Question
Float?? What's the best use for this – doesn't this fight against positioning?
(Incidentally – I just tried to find the answers to those questions in this book, and I DO believe my eyes are starting to bleed… The definitions made NO sense. Don't get me wrong – Eric Meyer is great… except for those particular definitions)
Categories
- Admin-type scripts (4)
- Announcements (81)
- babble (1)
- Basics (1)
- bookmarklets (2)
- Bookmarks (351)
- Color Tool Bookmarks (15)
- CSS related (13)
- FireFox Extension Bookmarks (5)
- Javascript Related (2)
- PHP Related (2)
- Call for help (6)
- complaint department (2)
- CSS (31)
- cubecart (3)
- Flash (2)
- hosting (1)
- bluehost (1)
- How to's (52)
- htaccess tricks (1)
- HTML (2)
- Internet Explorer (1)
- Javascript (19)
- jquery (8)
- Joomla (1)
- Lessons learned (66)
- Movable Type (57)
- MT hacks (52)
- MT Plugins (2)
- MT scripts (1)
- MT Tips n Tricks (2)
- mySQL (3)
- Outlook (1)
- Photoshop Tutorial (3)
- PHP (9)
- pMachine (4)
- product review (5)
- Projects (10)
- Regular Expressions (1)
- Scripts (117)
- Script snippet (35)
- SEO (1)
- shopping cart (3)
- Suggested reading (11)
- Video (1)
- WordPress (127)
- WordPress Bookmarks (18)
- WordPress Bookmarks to Plugins (31)
- WordPress Hacks (29)
- WordPress my-hacks additions (5)
- WordPress Plugins (20)
- WordPress scripts (6)
- WordPress: Lessons Learned (26)
Featured Sponsors
Search
- SEO Advice (from a non-expert!)
- Disappearing absolute positioned elements in IE7
- WordPress Objects
- Embed a vimeo video using swfobject and setting the audio to mute
- HTML Basics (linking an image)
- Moving from Typepad to WordPress
- evo 11 Conference
- The mysteriously disappearing WordPress 3.1 Admin Bar
- launch all external links in a new window with jQuery
- WordPress Pagination Woes (solved? I hope?)
- Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
- Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
- Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre
About
- Need some help? You can hire me.
- My personal blog: The Working Mom
- Follow me on twitter