Home > CSS

CSS

The Best Overall Code Editor Ever: Komodo Edit

A while back I wrote a post about what I think is the best Python code editor but I decided to write an update and write a little more about Komodo Edit…

I use Dreamweaver to write HTML/CSS/JavaScript/PHP code and a few days ago I decided to open Komodo Edit and see how it does with PHP.

I did try other editors for PHP but their support for HTML and CSS was lame and I’m so used to Dreamweaver’s comprehensive code completion features.

Well, I was surprised that Komodo Edit has all those features (& more) and handles PHP/CSS/HTML/JavaScript beatuifully, open a new PHP file and after ?> type:

And then hit space, it will suggest everything Dreamweaver suggests and more! then write:

style=”

And again it will suggest every CSS property, then type:

It will suggest all the possible values, more than Dreamweaver…

The other thing is that it will show you function descriptions for all the functions and that could be very handy.

I have to say that I don’t know if I’m going to pay for Dreamweaver ever again and if you are looking for a free and excelent code editor, try Komodo Edit.

I have no affiliation with ActiveState and what I said above is my personal thoughts and ideas and an attempt to show this excellent/free/open-source product to others.

Happy Coding.

Comments (1) Filed under: CSS, HTML/XHTML, JavaScript, Komodo Edit, PHP, Web Design, Web Development Posted by: Codehead

To Validate Or Not To Validate Your Markup

To be honest, I personally think that as long as my pages work fine and look the same on all the major browsers, I’m fine. But for me, it is also very important to properly balance all my tags and try to keep the pages as close to be valid as possible.

But here is something interesting, these are screenshots of my attempt to validate some of the major Internet players such is Google, Facebook, Twitter etc.

(Click on the images to see them in full size)

(You can try this tool here: http://validator.w3.org/)

It doesn’t look like these guys care either but at the end, it’s up to you to decide if it’s worth it for you to validate your markup and write perfect HTML/XHTML/CSS…

Comments (3) Filed under: CSS, HTML/XHTML, Web Browsers, Web Design, Web Development Posted by: Codehead

Rotate Text Using CSS

This is not a standard property yet but here it is:

.THE_TEXT_CLASS {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE */
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -o-transform: rotate(-90deg); /* Opera */
}

For now, it’s best if you use images instead…

Comments (0) Filed under: CSS, HTML/XHTML, Web Design, Web Development Posted by: Codehead

Enforce a Minimum Height For a Box

Here is the CSS:

.your-element {
   height: 500px;
   min-height: 500px;
   height: auto;
}

Of course, you might change 500px to whatever height you wish…

Comments (0) Filed under: CSS Posted by: Codehead

Multi Column Lists

Assuming that we want a 2 column list, here is the CSS:

ul#multi-column-list {
	width: 200px;
}
 
ul#multi-column-list li {
	width: 100px;
	float: left;
}

And HTML:

<ul id="multi-column-list">
   <li>Left</li>
   <li>Right</li>
   <li>Left</li>
   <li>Right</li>
   <li>Left Again</li>
   <li>Right Again</li>
</ul>

As you can see when the ul is 200pxs and lis are each 100pxs in width, your list will be arranged in 2 columns, so if you want to create a 4 column list, set the li’s width to 50px:

ul#multi-column-list {
	width: 200px;
}
 
ul#multi-column-list li {
	width: 50px;
	float: left;
}

HTML:

<ul id="multi-column-list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>