Home
About
Color Tool
 

Share Wonders is proudly powered by WordPress
Entries (RSS) and Comments (RSS).
11 queries. 0.317 seconds.
Valid XHTML

Archive for the 'design' Category

A new version of Chris Pedrick’s Web Developer is Out - Get it.

Wednesday, January 10th, 2007

If you opened up Firefox 2 today and already have Web Developer installed, you will probably have been greeted with a pop up saying an update is available. Chris Pedrick’s tool is a must have for any serious web developer.

My favorite new change:

Chris Pedricks Web Developer 1.1

You can remove the text and have icons only! Yay! Maybe it isn’t new, I honestly haven’t played with the options much, but this update has inspired me to try it out. You can also move buttons from the Web Developer toolbar and move them onto other places on Firefox’s chrome using the ‘customize’ feature in Firefox. That is you can modify and move the icons and buttons for Web Developer like you can standard Firefox icons and buttons that come with the browser such as ‘home’ and ‘print’. This is a great feature. If you take a look at that screenshot up there (click on it) you’ll see that I use the Google Toolbar but that I don’t have the toolbar enabled. Instead I have moved the features I use the most often from the toolbar to the browser’s menu bar and I get to save valuable screen real estate. I can do this with Web Developer too! More space for content! Yay! Let’s celebrate. Parteeh. I like to give a shout out to all my peeps at code4lib and netlamers who supported me through the writing of this article. And also pour some of your 40 on the ground for all those dogs who can’t be here this night because they’re busy chasing bad pointers, troubleshooting errand non-blocking error states, or busy making sure some student can find obscure documents ten institutions away that they’ll never need. kkggkthxbi

CSS: Keeping the container height when using float with elements

Sunday, May 7th, 2006

Ever tried to use the css property float only to find out that the background of the containing element and the height of the floated element do not match? This is probably a recurring problem for many people. What these many people might not know is that there are a couple of solutions for this issue, neither of which is very elegant.

Someone on #css freenode pointed out this website, which explains the solutions in detail: how to clear a float.

The problem occurs when you attempt something along the lines like this:
[html]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean aliquet, orci quis feugiat laoreet, augue odio venenatis turpis, nec imperdiet sem nibh ut arcu.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean aliquet, orci quis feugiat laoreet, augue odio venenatis turpis, nec imperdiet sem nibh ut arcu. Sed facilisis. Proin libero pede, eleifend et, ultrices quis, feugiat sit amet, leo. Suspendisse tortor. Sed nisl erat, cursus ac, condimentum nec, dignissim non, nunc. Sed pretium ligula in odio. Curabitur tempus. Maecenas non nisi. In tortor turpis, facilisis a, blandit sit amet, cursus ac, ligula. Fusce lacinia rutrum odio.


[/html]
The code above will turn out to look like this:
Float Issue

As you can see the background of the containing div does not have the required height to wrap around the floated paragraph element.

The easy and ugly solution is to include another element at the very end of the containing div:
[html]

[/html]
This will force the background to stretch to meet this last element. The website with the how to clear a float instructions I pointed to at the beginning has a better solution using the :after Pseudo-element. It is explained better there than I can manage, so take a look and hopefully all your floating problems will be solved.

CSS Reference Links

Monday, April 17th, 2006

Become a CSS master with only 8 links:

CSS2 Reference at W3Schools (adequate)
W3C Full Property Table Working Draft (superior)
Web Browser CSS Support (helpful)
W3C CSS Selectors Working Draft (powerful)
Assigning property values, Cascading, and Inheritance (advanced)
Step by Step CSS Float Tutorial (no more tables)
CSS Positioning in Ten Steps (well written)
CSS2 Box Demonstration (Eye opening)

Source: A couple of these I got from #CSS on Freenode, some others I’ve been using for a while and were on my .

Some Great Design Advice from a Bot

Monday, April 17th, 2006

The other day I got some really great advice from a bot on Freenode
#CSS:

s|k | `zip
RTFS | zip: Start every stylesheet with this: * { margin: 0; padding: 0; }. You’ll save yourself the confusion over quite a few strange element and browser spacing differences later on.

It’s true. For example, Firefox will do some silly stuff by adding margins to headers, such as ‹h1›, by default. IE has some of its own quirks. There’s quite a few of these things that will cause headaches that can be alleviated all together by just beginning every style sheet with:


* { margin: 0; padding: 0; }

infogami: a free webpage and wiki creator

Thursday, March 2nd, 2006

infogami

Everyone’s been talking about recently, the free website creator from Google, and even I have a page I’ve been playing around with: I call it . But I’ve found something very similiar and very interesting: infogami. It’s a free webpage creator. You simply enter a subdomain in the provided box, provide an email (a working one if you want to keep your page - you can create and play with the site without confirming the email), and there you are!

A great thing about infogami is that you can allow anyone to edit your site! Which makes it sort of a wiki.

Check out mine: Share Wonders at infogami.

It comes with a blog too. There’s no option to comment but there is a feed. Maybe comments will be added later. infogami is not even a beta yet, apparently.

Oh, they have a developer blog.

The format used for editing pages is not HTML, it’s something called Markdown. You can play with a Markdown sandbox if you like.

If you use Google Talk or Wikipedia at all you may be familiar with this type of text formatting and markup code:

*italic* **bold**
_italic_ __bold__

This is a link to Share Wonders
[Share Wonders](https://sharewonders.com/ "Share Wonders")

Very nice. I expect to hear more about infogami soon.

Standards are Good, but Not all Standard Proponents are

Tuesday, February 28th, 2006

Molly points out that some types of standard proponents stand in the way of standardization. She singles out three types of ‘Standardista’s’ that are going about standardization the wrong way: “The Bitch and Moan but Never Does,” the “I’m a F***** Up Human in Need of a Tribe,” and “I’m Better than You Because my Site Validates.”

Here’s an excerpt I appreciated on the last type:

The Better than You standardista finds it pleasurable to insult people who are struggling with the learning curve despite their willingness to learn; berate those who are misinformed by virtue of circumstance rather than chosen ignorance; and who poke fun at people who make decisions based on environmental issues rather than just following Web standards because they think standards are good.

What type are you? I admit sometimes I’ve been guilty of falling into everyone one of these categories.

standardization

 

Share Wonders

Look out honey, because I’m using Technology