CSS category

Focus on details

A little secret I just discovered, "focus on details" bosses / clients don't understand sketches or mockups.

That's all for today, C U soon.

February 20, 2008, 2:40 PM Comments 0 TrackBack 0

Eric Meyer’s CSS Sculptor

No excuse now for not using clean, valid & compatible CSS layouts, after Eric Meyer's CSS Sculptor you could really do it as easy as choosing from 30 ready made layouts and control there margins, paddings, colors, backgounds etc... generating a clean, valid & compatible CSS layout really as if Eric code it himself, Every body is blogging about it.

In case if you don't know, Eric Meyer considered to be the top of the industry of CSS, He wrote alot of books including "Eric Meyer on CSS" and "More Eric Meyer on CSS" and alot more.

Any way I don't think I will use Meyer's Sculptor, I enjoy hand coding every bit of CSS on my DreamWeaver code view.

August 27, 2007, 1:57 PM Comments 0 TrackBack 0

Naked again

CSS Naked day 2007Are you surprised why this site is CSS naked just like last year, here comes again 5th April the annual CSS Naked Day started by Dustin Diaz on 5th April 2006.

Do you have enough courage to take of your CSS showing how semantic and clean your markup is.

April 4, 2007, 10:50 PM Comments 0 TrackBack 0

10 years of CSS

CSS10 LogoToday is the 10th anniversary of the CSS, there been 10 years since the first Cascading Style Sheets level 1 recommendation co-authored by Bert Bos and Håkon Wium Lie, celebrating this event the W3C has lunched the CSS10 site.

The site contains a brief history of milestones, Hall of Fame including the WaSP's CSS Samurai, ALA, & the CSS Zen Garden + essays & galleries.

Thanks to all who helped in making the CSS so great and hoping for another 10 great years for the CSS starting by CSS3 which will have some additional cool features like rounded corners and multiple backgrounds in one object, looking forward.

December 20, 2006, 6:02 PM Comments 0 TrackBack 0

Where am I

It's important for your site visitor to know where exactly he is right now so he could found his way among your site and know where he is and where can he go, in more than one level structured sites it maybe represented like this (Home > products > Laptops) for example, but in 1 level structured sites like this one for example there is other ways.

You also have to take care not to link to the same page you're on so the page you're on should not be linked to in the same page, as it's extremely confusing.

The most well known technique is adding a class to the list item and style it differently through the CSS if we took the navigation on the left side here as an example it will be like this

<ul>
<li class="here">home</li>
<li><a href="about.htm" title="accesskey: 2" accesskey="2">about</a></li>
...</ul>

Now you could style it let's say like this

.here { font-style: italic; }

This is a way but it's not the best, as you should never link to the same page you are on in the navigation we could take that chance and use the opportunity that the page your on lack the <a> around it's name in the navigation, so we got that example

<ul>
<li>home</li>
<li><a href="about.htm" title="accesskey: 2" accesskey="2">about</a></li>
...</ul>

And style it like that

#nav { font-style: italic; }
#nav a { font-style: normal; }

By that you specified that the non linked item in this undefined list will be italic, without the need of specifying a class name in each page it will just style it as italic if it's not a link.

You may need to add <span> instead of <a> around your non linked item for giving the desired style as I needed it here in this site. I wrapped the non linked item with <span> because I needed to add some padding to it, here is what's in point CSS

#header ul li a, #header ul li span {
display: block;
padding: 5px 0;
}

That's all for today, good luck with your usable, semantic & beautifully styled navigations.

November 14, 2006, 8:49 AM Comments 0 TrackBack 0

IE7 progress in applying CSS2.1

Beside IE7 support to transparent PNG and RSS, IE7 has gone very near to CSS2.1 specs, they still miss some points but it's way better than before, the IE team has announced the list of CSS changes on there blog post titled Details on our CSS changes for IE7, it's essential for every web designer who care about web standards to read.

I'm really glad that the end is near for IE6 especially after Microsoft putted IE7 as a high priority update on windows Automatic Update.

August 24, 2006, 3:08 PM Comments 1 TrackBack 0

HTML, CSS & accessiblity knowledge levels

Emil Stenström has started it, by his article levels of CSS knowledge followed by Roger Johansson writing about Levels of HTML knowledge and finally Joe Clark's Levels of Accessibility Knowledge.

They are all so true and convincing why don't you check your levels and work on giving each a push only if you need it if creating web sites is part of your job.

I consider my self on level 5 of HTML knowledge, also level 5 in CSS knowledge & 4 in accessibility, maybe I should push it more on accessibility, how about you ?

June 3, 2006, 4:17 PM Comments 0 TrackBack 0

black on white or white on black ?!

I was thinking why most of web pages uses black text on white background, maybe because this is the default colors of any web page, and why is it the default colors maybe because who first put this standard wanted to imitate papers and ink.

Why is it the default to light all screen pixels and only put off some pixels resembling the text, isn't this illogical ? I personally think it is.

White on black is better for accessibility check my zoom layout, it's also easier on the eyes, open a black on white page in a tab and a white on black page on another tab and switch between them you will feel the difference and wonder why is black on white is the default, I have made Freestyler and another web site under construction white on black other than this site zoom layout, another examples of white on black or more accurately light on dark web sites is Veerle's blog & Dustin Diaz, I see it more logical that white on black be the default.

Well ofcourse it's difficult to change this now but what do you think if you go back to the very beginning and you have the choice to put this standard what would you choose?

May 11, 2006, 2:12 AM Comments 0 TrackBack 0

OMG, 37Signals just bought Google!

Is it hard to believe check google now, well I think you got it by now, it's done using a very cool and inspiring tool by Cameron Adams called CSS Love Child.

I've been playing with for a while now. it's very funny to see your site body on other faces check point studios on Joe's face, Andy's face & Dustin's face.

Also encouraging to see other bodies on your face like 37Signals body, Doug's body, Andy's body.

Go have fun and come back here tell us in the comments below what delicious combines you've made.

May 3, 2006, 7:32 AM Comments 1 TrackBack 0

Stop Hacking, or be Stopped

Dave Shea in his article Stop Hacking, or be Stopped on Vitamin has proposed the CSS hacking problem and it's consequences, proposing that browsers respond to CSS specs are different and will still be different as CSS specs it's self is evolving from 1 to 2 and now 3, so this problem has to come to an end as browsers will never respond to CSS the same way even different versions in the same browsers will not.

I think the solution in the hands of The W3C they should put a standard for all browsers manufacturers to use, so that CSS coders could specify a CSS file for a specific browser legitimately without hacking.

IE conditional comments is the method the IE team has developed for filtering CSS files to Win/IE here is a sample code of this method

<!--[if IE]> <link rel="stylesheet" href="ie-specific-file.css" /> <![endif]-->

This method could be a good start for the W3C to build a standard on, any way read Dave's article Stop Hacking, or be Stopped

April 24, 2006, 5:46 PM Comments 0 TrackBack 0

FRESH PX to sponsor CSS Reboot

CSS Reboot Spring 2006

Here comes again the reboot time when web designers all over the world redesign there CSS styled sites showing the entire world all at once just how great accessible, standards design can really be. On 1st May all rebooters will expose there new designs.

I'm glad to announce that FRESH PX is sponsoring the reboot this year, as our goals are similar the only difference is to refresh web logs instead of reboot web sites.

April 21, 2006, 7:33 AM Comments 0 TrackBack 0

CSS Naked Day

In the spirit of promoting Web Standards along with good semantic markup and proper hierarchy structure, Dustin Diaz will start the first annual CSS naked day on 5th April.

Who has the courage to take off his CSS for a day and show his <body> to every one, check the naked page to see how can you participate and a list of all participants.

I'm in with Point & FRESH PX, see us naked next Wednesday.

April 3, 2006, 10:36 PM Comments 3 TrackBack 0

Zoom layouts update

I was away for about a month for some reasons and I just read Joe Clark's article Zoom layouts update I'm glad to be mentioned as one of the first few to apply Joe's zoom layout technique.

Joe commented on my link ( needs fine-tuning for overlapping layout components ) thanks Joe for pointing out the bug for me. It affects Safari only as far as I can see, the reason this bug appears is the negative margin values in the default style which I call it modern that affect other styles when switched to them.

As you can see I have one default style modern and two alternate new & zoom the margin in modern is #top { margin-top: -119px; } the negative values only the negative values affect the alternate styles when switched to them even if there is a rule that overwrite it like #top { margin-top: 0; } to fix the problem I have to overwrite it with a rule like #top { margin-top: -1px; } and maybe let the first object above #top push it one more px to the bottom.

I don't know if this is the best solution but it is one. Thanks a lot Joe and thanks all.

March 4, 2006, 1:39 PM Comments 0 TrackBack 0

Point new style has just been liquefied

Point new style has just been liquefied. I have been working all night on turning Point new style to liquid and I’m done. Go on Test it and tell me what do you think. Switch to the new style from the Side bar -> Choose styles.

What is liquid layout?

Liquid or fluid layouts are expandable with the browser try resizing the browser width while on New style and you will understand what I mean.

August 20, 2005, 6:30 AM Comments 0

Showing XFN relations

In the last post I explained what XFN is.

Since then I was thinking there should be more use of this, there should be a way to show this relations on every link, and I figure out a way.

Well I know maybe I'm not the first one to think of that but any way here is a technique to show XFN relations:

The technique:

Let's see the example I stated in the last post:

<a href="http://www.molly.com/" rel=" muse colleague acquaintance">Molly</a>

By adding some simple CSS rules we could show the relations after every link when hovered.

#content a:hover:after { content: attr(rel); }

We could also add some style to it to highlight it.

#content a:hover:after {
content: attr(rel);
color: #36C;
border-top: 1px dotted #36C;
}

hover here Molly and see more examples.

Take care

Avoid adding any thing beside attr(rel); in the content property, because adding it will effect all the links if you add brackets for example content:"( "attr(rel)" )"; it will have effect on all the links even the links without rel attribute will show empty brackets after it.

Add space before the first value of rel like this rel=" muse colleague acquaintance" to avoid letting the values appear sticking to the link.

Bugs

Any body experience any bugs please post it here.

August 17, 2005, 7:07 PM Comments 0 TrackBack 0

Zoom layouts

First of all you might like to read this article in a Zoom layout, switch styles right on the "Choose style panel" at the left side.

Low vision users, which are a lot more than blind users, need special needs so that they can read and navigate a web site, CSS can provide all these needs.

Aries Arditi ,PhD has been studying web accessibility for 15 years, he come up with "Low vision wish list" which is:

  1. Make it large enough but not too large.
  2. Enhance the contrast.
  3. Enhance the colour contrast.
  4. Present text all on one line.
  5. Increase spacing between letters.
  6. Let me choose my font.
  7. Let me control my reading speed.
  8. Let me see where what I’m reading fits into the big picture.
  9. Grant [the foregoing wishes] for any Web site.

Joe Clark has revealed a new technique in @media 2005 that provide most of this wish list, it is Zoom layout a single column layout with the navigation simplified and placed at the top, fonts become bigger but not too big, contrast enhanced between Background and text.

July 21, 2005, 3:54 PM Comments 0

The crazy side of point

Many people asked about the old colours of point that's why we decided to add the New point of view style, you can switch to it and back via the Styles panel at the left side.

May 22, 2005, 9:20 PM Comments 0

Categories: