No matter if you design a lot or only messes with CSS one time or another, you will be always checking for more info about CSS.
Here you can find a huge list of CSS related websites: http://csssubmiter.com/the_list – check it out.
Posts Tagged ‘CSS’
CSS site list
Posted by mcloide on August 26, 2009
Posted in CSS, development, resources | Tagged: CSS | 1 Comment »
Simple Clearing of Floats
Posted by mcloide on April 30, 2009
Cool tip:
Got this from a friend of mine today. Is very simple and it does work on most of browsers.
” When you have two floated elements inside a container element, instead of adding a clearing DIV before the closing of the container element, you can try adding the following two CSS properties to the container:
display: inline-block;
overflow: auto;Tested this and it worked on IE 6, IE 7, Firefox and Safari.
Source of tip: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ (display: inline-block is not mentioned here, but I found it is needed for IE 6). “
Posted in CSS, cool, development, resources | Tagged: clear, clearing, CSS, div, float | Leave a Comment »
Direction:rtl;
Posted by mcloide on March 13, 2009
It might seem unusual to work a site around to read from the right to the left, but if you are considering to have your site in a world scale, you better know what kind of enviroment you will face. Culture knowledge, what to do , what not to and mostly usability where our challenges in the last 2 weeks.
I’m working with Goal.com and just this week we have released the Persian version of the site. Making the default site become a RTL version site, in a way that anyone that reads from the right to left could easily read and access, have become a major experience.
CSS changes, small functions adaptations, mirrored words and parenthesis, all of this made part on the changes that we made for that site. The site would look just like the current one, but inversed and all of that with the same usability that we already have for the site. It was a lot of work and lot of fun.
After the site was launched, we got feedback from all over the world thanking us for making that possible and now I do truly realize why it is so important to have correct usability on the site, reading format and culture on a site.
Different users, different rules, different scenario and tons of hard work. The best of all, on the end, you can truly see that it is all worth the time.
If you are wondering what you would be facing, on a CSS matter, for this kind of changes, take a look at the W3 Org Internationalization Article.
By the way, if you follow soccer (I’m a braziliam so…), check out the Goal.com site, is trully good and fan oriented.
Posted in Design, PHP, development | Tagged: CSS, Design, direction: rtl, goal.com, rtl, usability | Leave a Comment »
Iphone it
Posted by mcloide on September 25, 2008
How about you create a version of your WordPress website for Iphone, well here is a small tutorial of how to do it.
All the coding is using the Zend Framework Database Handler, so if you are using one of my classes or anything else, change it to work for you.
The first thing you will need is to download the IUI framework. It have a series of scripts, css, and some other things that are going to be used when you are checking the site with your Iphone.
Now create a PHP script page with this html header. It’s the same one that is being used at the samples of the framework.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>McLoide.com Iphone Version</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "../iui/iui.css";</style>
<script type="application/x-javascript" src="../iui/iui.js"></script>
<!--
<script type="application/x-javascript" src="http://10.0.1.2:1840/ibug.js"></script>
-->
</head>
<body onclick="console.log('action', event.target);">
Now you have to create the following structure:
- Toolbar – will be displayed at top with a back button and the stats (battery, etc) button
- Home – will be the first thing loaded when the Iphone load the page, so this should have a list of the contents of the website
- Summary – This will display a small summary of what’s about the the content that is about to be displayed and a back button
- Display – This will display the full content of the item
Imagine this as a site tree that is being build dinamicaly and every click displays one of the tree branches.
So, how your body will be built? It’s simplier to display the code than explain, so, here’s the rest of the code:
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a href="stats.php" class="button">Stats</a>
</div>
<ul id="home" title="Posts" selected="true">
<?php
$stmt = "select * from wp_posts where post_status = 'publish' group by post_title order by ID asc";
$data = $GLOBALS['db']->fetchAll($stmt); # This is using Zend Framework Db Hanlder
foreach($data as $key => $contents) {
?><li><a href="#summary<?php echo $contents['ID'] ?>"><?php echo strip_tags($contents['post_title']); ?></a></li><?php
}
# retrieving all info of your posts
?>
<li><a href="stats.php">Stats</a></li>
</ul>
<?php
#building the summary list
foreach($data as $key => $contents) { ?>
<ul id="summary<?php echo $contents['ID'] ?>" title="<?php echo strip_tags($contents['post_title']); ?>">
<li><a href="#display<?php echo $contents['ID'] ?>"><?php echo count_words(strip_tags($contents['post_content']),20); ?></a></li>
<li><a href="#home">Back</a></li>
</ul>
<?php } ?>
<?php
#building the display blocks
foreach($data as $key => $contents) { ?>
<div id="display<?php echo $contents['ID'] ?>" class="panel" title="<?php echo $contents['post_title']; ?>">
<h2><?php echo $contents['post_title']; ?></h2>
<p><?php
echo $contents['post_content'];
?></p>
</div>
<?php }#note count_words is just a small function to get an string and correctly break into a smaller string without breaking the words
?>
With this in place all you need to do now is test it and for that you can test it in the Iphone tester. It’s not 100% accurate but it will give you a great idea of how things will work in the real Iphone and you can always access it by your computer browser.
Off course this is a simple example and there is much more you could do to work with this. Imagine a full application only to work out with Iphones.
If you want to see this example working, you can see a demo from in http://www.mcloide.com/iphone/
Have fun.
Posted in Ajax, CSS, PHP, Zend, development, resources | Tagged: Ajax, CSS, first demo, framework, iphone, iUI, PHP, Zend | 1 Comment »
