Loading ...Posts tagged with ‘css’
Custom font
October 28th, 2008
I saw another custom font solution today: typeface
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
A while ago, I blogged about the SIFR 3. And there are many other solutions to render text in fonts that your client’s machine does not have. For example, generating the text as an image. BTW wasn’t there a wordpress plugin that does this? I wasn’t able to find it in my quick search. Can someone enlighten me?
One thing I hate about all these solutions is that you may no longer highlight the text in order to copy its content in all the browsers I know. It just bugs me to no end when expected browser behaviors get changed because you want some fancy fonts for your site.
I wish more browsers would implement the @font-face css rule so maybe then we can get around this issue?
CSS Frameworks
September 21st, 2008
I write my CSS from scratch and I know enough tricks/hacks to pull out most of all what I want to accomplish. Although I’ve always heard the yahoo YUI project and understand what its reset css achieves, I never knew there are so many other CSS frameworks out there. Hidden pixels has listed a great number of them. I don’t know if I will consider using them. I can’t see I will gain a lot of benefits from what I’ve done by using a framework but I might look into it since I have some time off work coming up 
- Elements CSS Frameworks
- YUI Grids CSS
- YAML CSS Framework
- Blueprint CSS
- Schema Web Design Framework
- CleverCSS
- Tripoli CSS Framework
- ESWAT Web Project Framework
- Boilerplate CSS Framework
- WYMstyle CSS Framework
- ESWAT Web Project Framework
- Logicss Framework
- That Standards Guy CSS Framework
- 960 Grid System
- Emastic CSS Framework
How to STYLE a table using CSS (JSF examples)
October 18th, 2007
Tables are very important parts of the web interface. They are (hopefully) used for tabular data. It is one of the oldest and most basic HTML presentation tag but in order for it to smoothly fit into the new CSS age, we need to look at the most practical way in correctly setting up the markup and the CSS.
Nowadays, we no longer wish to make separate instances of a similar application for different clients. We want to thrive on making a single application that will fit the needs of as many clients as possible. This task is very challenging. In my opinion the ideal situation is to have the clients and developers both understand the benefits of the end goal and compromise to reach it. As developers we can always dream to have a single application reach the level of customization we can accomplish with many separate applications and yet don’t confuse the heck out of the end users. While I am unsure if that’s ever a possibility, I know ways that might help get us closer.
One of the biggest challenges is to give each client who uses the same application their own unique UI presentation. This is no small task and I only plan to address a small issue you might encounter in accomplishing this task. That’s how to mark up a table with the most amount of UI flexibility.
(more…)
Clear left workaround
September 25th, 2007
You may have run into this problem, you may have not. But I found an acceptable workaround to this particular problem.
Here’s the scenario.
So I have a two column layout where my navigation list (red) is floated to the left and my main content is on the right. In my main content I have another navigation list (gray) that floats to the left. And the text in my main content now wraps around. I really want my main content text below the gray navigation to still to the right of red navigation.
If I use a simply use a clear:left on the container around my content text, I will have it all the way below the red navigation list. This is expected behavior as clear:left means make sure there is no elements that are floated to the left of me. It however is not the ideal behavior I wanted.
In IE & Firefox (possibly other browsers) there is a *bug* that if you wrap the floating element in a fieldset, the fieldset acts as a container that stretches as far as the float elements.
This however really isn’t a good workaround because it uses a *bug* in both browsers and it DOES NOT work in browsers like safari. So I came up with a better solution today.
Float the ul element to the right with its width set to 100%, and then clear the container around the text to the right. This obviously only works if you don’t have anything above the text that’s also floated to the right.
