Posts Tagged ‘CSS’

« Older Entries

To-Learn (As Opposed to To-Do)

Monday, March 22nd, 2010

I caught up with my reading again.

With nothing on my mental To-Do list (except such vague ideas as ‘work on something’), I’ve had the opportunity to do random stuff. I picked through my To-Read bookmarks, where I put everything when I was swamped with reading. It turns out a lot of that becomes completely useless to me, after reading a thousand other things over the last few months, so most of it can be deleted. Other things required me to have time in abundance, so that I can research some topics and possibly apply a few ideas.

While I was doing that, I decided that the only way I was ever going to learn the stuff I didn’t feel comfortable with was if I spent some time using it.
I want to know absolutely everything about HTML, but I don’t even know about half of the elements and attributes. So, I’m going to use it all; I’m going to memorize the big list of things (199 elements, at the moment).

I’m currently going through a whole smack of W3C specs, and a few Wikipedia articles. I’m going to find every proprietary tag I can, and try to find out which browsers use which.

You see, I constantly feel as if I have nothing to contribute. I don’t have any opinions of my own, and when I’m reading about all sorts of HTML things and the authors of those pages ask questions, I’m never able to add anything they don’t already know.

Things I need to know:

  • How browsers work, on the code-snippet level
  • All the differences between at least the main five browsers
  • All the differences between versions (Firefox 2, for example, doesn’t support display: inline-block)
  • What the heck all these RFCs are
  • The ability to quote an RFC’s requirements
  • The current issues in the HTML5 and WHATWG working groups
  • All the different types of ‘accessibility’ (blind, paraplegic, cognitive)
  • User psychology, UX, and other human-brain things
  • All the different ways to do things (javascript, server-side, different languages)
  • Different ways of coding (lisp-style, queries, procedural)

I need to learn the internals of:

  • JavaScript
  • HTML
  • PHP
  • Perl
  • Java
  • C
  • Ruby
  • Erlang
  • Clojure

Where I’m at right now:

  • I know roughly how browsers do what they do
  • I know some obscure browser trivia
  • I’m part of the W3C HTML5 lists, and am trying to keep up-to-date
  • I’ve got a base in A11y and UX
  • I know a lot about HTML
  • I’ve got some Java, PHP, and JavaScript under my belt
  • I can name a good deal of the more obscure browsers

I’ve still got a long way to go.
I want to teach this stuff, at some point. That means I need to know everything. All the tiny, obscure details. I need to know that the SVG 1.0 spec says that negative attributes are an error, while the 1.1 spec says that negative attributes are ignored.

It’s kind of funny how things go. My whole life, I loved computers. I wanted to design games, when I was young. I went into programming in high-school. I took a computer-based diploma program in college, and graduated in 2007.

I remember my online journal, which I created in 2005. I had no idea how to make links, or emphases, or any other stylization. But I learned how to make links, and then how to embed images. I took a class on HTML, and then one that included CSS, and then I made a couple half-hearted websites.

In 2009, I abandoned almost all that programming stuff and flew headlong into HTML and JavaScript and CSS and websites. I spent a great deal of that time designing, rather than programming.

When you find something you want to do, you’ll notice. But you won’t know what you want to do until you find it.
So try everything. Find what you want to do. Then learn everything you can possibly learn about it.

Tags: , , ,
Posted in New | No Comments »

Expanded Floats

Wednesday, August 12th, 2009

This is a working-out of an idea I’ve had. I can’t think of any solution for it, besides perhaps a script, so I’m going to invent a CSS attribute.

Fluid Layouts

I’m a proponent of fluid layouts, and so I believe that a page with a large number of congruous containers is best laid out by floating the containers. This means they fit as many as they can on one line, and then wrap the rest to the next line. Someone with a small screen might see one or two items per row, while someone with a larger screen will see more. (The Embroidery House has a good example of this.)

float
float
float
float
float
float
float
float
float
float
float
float
float

Notice the empty bit on the right? Try resizing your browser and watch how the flow works.

Design Problem

There’s one serious design problem with this: If the width of the screen isn’t exactly the right width to contain a specific number of floated items, there’s going to be a gap to the side, up to the size of an item.

Solution

So, my idea is this: Add expand:x|y|both to the CSS. The renderer would take the active area to the side (the blank spot, minus padding and margins), and divide that, rounding down, into the number of floats. It would increase the width|height|both of each float by that amount, which would fill up the sides, minus a pixel or two for rounding errors.
No matter the width of the window, the items will fill their container.

Technical

If the window grows wide enough to fit another item, the items will snap back to their original size and will be reflowed.
That is, the parser first checks the width of the floats (it would have to keep current width separate from the ‘real’ width), and flows from there, and then alters the width to fill the rest of the container.
For the purposes of Webkit: the attribute would not accept -webkit-transition, because doing a regular width transition on the parent container would re-flow and re-expand the floats.

Problems

I see the following potential problems.

  • That rounding error sounds tricky. If it rounded up, the floats might wrap, which is why I was saying it would round down.
  • I obviously haven’t given the rendering flow much thought. I’d have to hear from an expert how that could fit into it.
  • Could it keep a size separate from it’s regular size? I suppose its size could be recalculated based on how float sizes are usually calculated.

I’d like to hear your opinions on this issue.

Tags: ,
Posted in Ideas | No Comments »

Redesign!

Saturday, August 1st, 2009

Today, I worked all day on a redesign. The old one was just killing me, because I was doing a couple things wrong and the entire thing had kind of crystallized.

I started this one off fresh, with a clean copy of the default theme. I decided I was going to change as little as possible: I moved the sidebar to the top of the code, added some meta-data specific to my site, and changed some of the verbose garbage they spew out when you get to the end of a post, but I otherwise kept it as similar as possible. No new tags for styling, and I used the names the default theme uses.
I think I’ll take out a couple dummy elements that I didn’t have a use for, though.

Overall, I hope this design looks a little fresher and less cobbled together. Instead of relying on each paragraph having a container class to give it padding, I’ve built it into the table. I’m not using really weird column floating, and my stretch-to-bottom works without using infinite negative margins (those things are a nightmare in IE7).

I had to think a while on the best way to store the files. I’m using WordPress, so the themes are stored deeply in some sub-sub-sub-directories. I was wondering if I could just point the themes to the main folder, but eventually decided to keep CSS and CSS-based images in the theme folder, with everything else in the root.
WordPress uses the root (or rather, which ever directory you specify as WordPress’es root) as the context, and travels from there to find images. CSS, however, always travels from the CSS document. If you keep images in an ‘images’ folder and CSS in a ‘css’ folder, you’d reference ‘images/image.png’ from your code and ‘../images/image.png’ from your CSS.
Since everything but the CSS was working from the top level, I decided to keep everything but the CSS right there.

So I think I’ve got a less hackety them, now. Maybe it’s time for Cozy Cabbage to get a makeover?

Oh! Adding tags on a new post works again, now. I was having difficulties.

Tags: , ,
Posted in Old | No Comments »

Buttons: Part 2

Saturday, May 30th, 2009

I guess I was younger, back when I made my first set of buttons. I went back to them today, and found that they didn’t work in other browsers. Also, I wanted to see if I could make them with HTML (seems like my latest craze).

Webkit is stuffed full of strange and amazing tags that let you set background gradients, text shadows, rounded corners, rotations, and pretty much anything else you could want. It’s missing outline-radius, though, which meant I had to use two divs to create the button I had designed in Paint Shop Pro. And a span. But that’s all!
It had two borders, each with a small amount of radius, a linear gradient background, :target tags so it looks like you click it, text shadow to get the 3D appearance, and whole bunch of regular old CSS2 and CSS1.

When I was done, however, I realized that, while it still worked in other browsers, there was no background. Yet again, I had made something that was only viewable in webkit.
I tossed the gradients from my image buttons into another image and used that as a background for everything not-webkit, but there’s a bit of white sticking out of the bottom. Things just aren’t lining up the same in every browser, which is a pain to work with. I’ve never really needed to worry about 0.02em before today. It turns out that’s a fair amount.

Anyway, I’ve got the newer version here for your perusal.
(As if I’m submitting it for your approval, or something.)
As I said before, it looks best in Chrome or Safari. The little font-changing button doesn’t seem to work in Firefox, for little or no reason. It looks stupid in IE7 and lower, because there’s no :focus selector, which means it’s not really a button.

What am I going to do with it, now? I saw some great article about progressive enhancement that laid out about five images beside eachother, and each one showed a more feature-rich page in a different browser. In that light, I think I’ll try my hand at making some sort of tab that turns into a great-looking button when you view it in a more advanced browser.
It appears Firefox lacks support for things Webkit and Opera have, like text shadows. 3.5 is going to be an important release.

Also, I’ve noticed, lately, that I refer to Firefox, Opera, and Webkit, because it seems a bit redundant to mention both Safari AND Chrome when talking about rendering. I’ll talk about one or the other when it’s about browser features (like how I’m jealous of Safari’s document inspector), but otherwise I’ll just refer to the Webkit engine.

So this whole day has been an exercise in jQuery. I’m trying to find out how to get certain elements from the context array (whatever it’s called). It seems .get() doesn’t allow things like the .text() tag or the .html() tag. Maybe if I wrapped that in another jQuery object…

Tags: , , , , ,
Posted in Old | No Comments »

Complete (Un)Success!

Wednesday, May 27th, 2009

I’ve been playing around with CSS3, lately.
One very specific thing I do is make images that are a bit larger than they appear on my screen, because I know people are going to set their text sizes differently. Another thing I do is scale things depending on width or such, so that everything fits the best it can.

With today’s background-images, the image is rendered at 100% zoom even if you want it in a smaller box. That means I need to put images in my markup, or at least it means I can’t just switch them out using only CSS.

This is where CSS3 comes in: Konqueror, Opera, Safari, and Chrome can set background-images to specific widths and heights. I just set visibility:hidden on my old image, and copied the width and height to my CSS background-image (in this case, background-size:100% auto). Voila!

If you’ve visited http://cozycabbage.com using Webkit or Gecko, you’ll notice that I have rounded corners. That means the corners are square for Opera, Konqueror, all IE versions, and whatever else. This CSS image replacement doesn’t work in Firefox or IE (strange how Firefox is missing support on it), which makes it look terrible in those browsers. It’s not something that you could put out publicly.
Altogether, this means my page only renders correctly in Webkit. That’s about… 5% of the total market?

I guess I’ll be stuck hacking up some PHP for my page bodies. For those of you who want to see my simple little session-switched thing, you can visit Cozy Cabbage, then put a ?grey in the address bar, and then ?green to switch back.

Tags: , ,
Posted in Old | No Comments »

IE6 T-Shirt

Thursday, May 21st, 2009

* html * { display:none; // IE6 Fix }
That would go wonderfully on a t-shirt. I think I’m going to get it done.

I originally saw it in a comment on someone’s blog, a month ago. I tried looking for it, but I can’t remember where I saw it.

I’ll have to think up some other funny t-shirt designs, and then start a little online store.

Tags: , ,
Posted in Old | No Comments »

Photo Gallery

Thursday, May 21st, 2009

I just finished more work on the old Atomicat Photo Gallery.
I was working for him last year, basically, at the same time as I was take what was essentially my first every-twenty-years-vacation. I figured I’ve been going to school since I was four or five, and I’ll probably be working until retirement, so I might as well take a year off to do some other stuff.

The site was the first website I’ve ever designed, and went through a couple drastic redesigns. I created the modern logo, which I’d say is fairly decent, and experimented with things like floats and whatever else.
The CSS on that site is disgusting. I didn’t really ‘get’ the id attribute, and so I had classes in every little thing. Extensibility was fairly unneeded, so I would end up creating a little class to do one thing, and then paste that on whichever element needed to do that. The result was something like HTML with half the semantics of HTML. Is <div class=”floatl”> any better than <div style=”float:left”>? It seems I’d completely ruined the core idea behind CSS.

The gallery was something else: Hours upon hours of hand-crafted goodness, as from a seamstress who turns away the sewing machine to make each careful stitch with her own sure hand.
In short, it was a mess. There were eight pages to be taken care of, each with images that had to be named specifically for that page. Any images you wanted to add had to be specially named for yet another page. Each item had to have the name/description engraved in the html, to be passed in an ugly GET variable.
Tonight, I went through the motions of creating the database and putting everything in it. I took every bit of repetition in the gallery and put it in loops. The gallery went from seven pages to one; the page went from eight individual items to two (I could probably turn that to one); and that item or two is loaded in from SQL.

I guess I’ve still got to do tags, but I’m finished for tonight. I’ll have to eventually upgrade the entire site up to my current standards, and then upgrade it again to the standards I’ll have by the time I’m finished.

This is shaping up to be quite a year.

Tags: , , , , , , ,
Posted in Old | 1 Comment »

Designing a Website, Part 1

Thursday, May 14th, 2009

The design of a website is an amazing thing, so I thought I’d share some of my method when it came to developing my new business site, Cozy Cabbage. It’s not complete, yet, but I’ll link when it’s finished.

The first thing I wanted to talk about was the content.
When I was writing about myself, and about the sites I’ve made, and drawing up what it means for someone to employ me (in a much less hokey-sounding way, of course, than it seems as I write these words right now), I realized I hated to use ‘I’ in my sentence structure. I suppose there was just something a bit too personal, in that; something, also, that might suggest very human flaws. On the other hand, I couldn’t exactly say ‘we’ and ‘our’, because it was only me.
In the end, I settled on using none of that at all, and I realized how fun and challenging it is to write something like that. “My services include–” No, I can’t say ‘my’. I say things like, “Work is done on a weekly basis,” instead of, “I do work on a weekly basis.” This shifts the active noun to the work, instead of to me, which I think really brings it out. It’s one of those things I hadn’t consciously noticed until I did it by accident.

The rest of the content is pretty simple: A very brief description of who I am, just in case people want to know. They’re there to find someone to make a webpage for them, so I’ll get right to the details: Samples, to let them know what kind of work I do (nothing great, at the momet — I have to completely redo a site I haven’t touched since last year), then what I’ll do if hired. I’m then adding a longer ‘about’ at the end, which outlines my work ethic and personal co-operation attitudes. There’s a little footer with some legal whatevers. On the top of the page is my logo, title, and three links: The main page, sample sites, and my HTML business card. In place of a contact sheet, I have a buy button. The buy button just won’t do, past this moment. I’ll end up making an actual order form.

On the design end, things were a bit different and mostly mundane. The original idea was to use cabbage and make the site ‘cozy’. I’m not sure how I intended to make it look cozy, but I’ll probably end up trying within the next couple of days. For now, it’s somewhat fresh and not too shabby. The site is very vertical, with improper use of sections below the header, and no sidebar, but I’ll probably get around to that next.
Overall, I just had a bunch of trouble with those floats, which you may have read a few days ago.

Another thing I want to talk about is fluid widths. I haven’t started on grids, yet, but there’s always been something disagreeable with fixed widths. Lately, I’d been keeping my browser at 640 wide, because I can easily set the window to a third or a half of my screen. Once I started looking at all these design blogs, it became quickly apparent that I’d have to switch to 960, though I still have a small horizontal scrollbar.
So I’ve decided that even 800×600 is too large, and it should comfortably fit down to about 300 pixels or so. I end up using variations on max-width and min-width and width percentage, which ends up giving me a great deal of control. If I wanted to use several divs inside each-other, I could even give the box a tremendously flexibly design. I could probaly make it shrink or grow as you increased your browser window. The next step would be to strategically place floats so that you get an extra column if you have a wide enough window. At the moment, you just get some more whitespace, which is always welcome.
I also try to keep my images scaled, because I don’t use full-page zoom, and want to design for others who don’t. The problem with this is images that have percentage width can’t seem to scale with text. I’ve been trying to work my way around it, but I may just have to choose one or the other.I could possibly set a maximum size with an EM-sized div, and then size the actual image with percentage. The max-size on the image, of course, would be set to about 200% of the image’s file dimensions, so it doesn’t become too grainy.

And I haven’t even started on the event layer, or whatever javascripting is called. I’ll also put some server-side stuff in, as well.

I’m researching Python and Django. It looks interesting.

Tags: , , ,
Posted in Old | No Comments »

I SAID CLEAR!

Tuesday, May 12th, 2009

CSS is usually pretty straight-forward. You can float a few things, and then you do some sort of clearing to get everything else underneath that.

For whatever odd reason, clear wasn’t doing a thing to my layout. I tried putting a bunch of cleared breaks on every second line, and still nothing. I tried putting :after tags in my CSS, and then I created a bunch of containing elements with floats. Eventually, on my last try, it worked.

I have no clue what it was that did it. I removed all those clears everywhere, and took out almost all the floats. It still works. I really haven’t the slightest clue what I ended up doing to fix it all. Maybe the body of the page needs to be in a container?

I originally chalked it up to the Chrome 1 I was using, but then it looked the same way in Firefox.
I guess I’ve still got a lot to learn.

Tags:
Posted in Old | 2 Comments »

Site Update

Monday, April 27th, 2009

I’ve started on the overhaul. The first to go were the tabs, which just didn’t really fit the site. I’ve actually found that tabs make it very hard to create any-width sites, because they have a tendency to wrap is really bad ways.

I decided that icons really resonated with me, and so I made up a little set. I’m not proud of them, but a couple turned out good. I’ll improve them later, and maybe eventually add some scripting to help with the dynamism.

Some might also notice that the icosidodecahedron in the background becomes rippled when it goes behind the content. A better example is here, where I found the concept. I’m going to have to search around for the technique he used to get that rippled-glass effect. I’m sure I’ll eventually learn that he used rippled glass to get that rippled-glass effect.
Maybe I should try a dirty-window effect (I don’t really have any rippled glass around). You could play with the concept, of course, and maybe have a person in the background who’s face changes depending on which element is floating over it.
There’s a lot of fun stuff out there.

So far, the layout was my top priority. Tomorrow, I might start on the wording.

Tags: ,
Posted in Old | No Comments »

« Older Entries