Starting to Position with CSS
Tuesday, November 18th, 2008Once you have a series of
1. Set a width on your body
You don’t have to do this, but most pages are easier to read if you don’t assume that everyone will have their browser set to the same settings as your browser. I like to design for 1024×768 resolution, with a typical width of around 800px. However, I also have done fluid widths using percentages. It’s all up to you.
2. Float everything
Once you have your maximum width, then you can float everything on the page, and have it line up. For example, if you want your navigation
But if you wanted it to be on the right side, you’d make it a width of less than 100% and float right.
Then, anything that comes after it would be floated left, and as long as those elements had a smaller width than 600px (800 - 200), they would slide right in to the left of the navigation.
3. Use floats to create margins
One of the great things about floats is that you can use them to create margins without using CSS. For example, if my navigation is on the right and 200px wide and my body content is floated left and 580px wide, there will be a 20px margin between the two elements, without any margin tags at all.
4. Get multiple columns by nesting
If you want three columns, you create two divs that float left and right, and then in the wider div, you create a second set of two columns that float left and right inside it. HTML
CSS (note that the inner divs have a width of 50% because they are half of the outer container, which is the “leftside” div:
5. Test in multiple browsers
While this technique works most of the time, some browsers react strangely to floats. You may have to play with the widths to get your elements to show up correctly.
Web Designing-Specifying colours
Wednesday, July 16th, 2008This tip is in the shorthand article mentioned earlier, but I use it so much I’ll repeat it here: in CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit:
#000 is the same as #000000, #369 is the same as #336699.
And remember that octothorpe (#) before the colour code.
Another colour related tip is that you can specify web safe colours by using only digits that are multiples of 3 for the red, green, and blue values: 0, 3, 6, 9, C, and F. #99c is a web safe colour, #98c is not.
Web Designing-Remember case sensitivity
Wednesday, July 16th, 2008When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors.
Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names. If for some reason you do use mixed case, make doubly sure to match the case in your CSS with that in the markup.
Web Design-Specify a unit unless the value is 0
Wednesday, July 16th, 2008Not specifying a unit for length values is a very common mistake among CSS beginners. In HTML you can get away with that, but in CSS all length values must have a unit. There are two exceptions: line-height and 0 (zero) values. Note that the value must be immediately followed by the unit – do not insert a space between them.
There is no need to specify a unit for 0 (zero) values because zero pixels equals zero centimeters equals zero of any other length unit. Despite this it’s very common to see something like padding:0px where padding:0 would do.
While there’s nothing wrong with specifying a unit when the value is 0, it’s a waste of space and – at least to me – looks untidy.
Web design-Use CSS shorthand
Wednesday, July 16th, 2008To save space and make your CSS files easier to read I recommend using shorthand syntax to declare several properties in a single declaration. How the available shorthand properties are used is described in my article Efficient CSS with shorthand properties, so I’m referring you to that instead of going into any details here.
HTML:how to double underline text with css style
Monday, June 30th, 2008<html>
<head>
<title>Double Underlined Text Example</title>
<style type=”text/css”>
.double_underline {
border-bottom: 3px double;
}
</style>
</head>
<body>
<span class=”double_underline”>Double Underlined Text</span>
</body>
</html>
Learning PHP
Saturday, June 28th, 2008PHP Programming has become one of the trends today. To learn more about it, you can first start through the internet. Although you may also try books however internet provides more comprehensive information. Think what topics about PHP are you most interested about. You can visit and join forums discussing PHP programming. You can even ask questions in the forums. Friends who are into the field of programming might help.
If you want to know more about PHP Programming, it should not be limited to that there are also other areas that you need to learn about like JavaScript, HTML and CSS. It is helpful to always have knowledge on the latest trends and innovations regarding PHP Programming.
SEO : Use Headings
Thursday, June 26th, 2008In college and some high schools, essays are written using a standard guideline created by the Modern Language Association (MLA). These guidelines included how to write you cover page, title, paragraphs, how to cite references, etc. On the Web, we follow the W3C’s guidelines as well as commonly accepted “best practices” for organizing a web page.
Headings play an important role in organizing information, so be sure to include at least H1-H3 when assembling your page. Using cascading style Sheets (CSS), I was able to make my h1 at the top of this page more appealing. Here’s a piece of code you can pop into your heading:
<style type=”text/css”>
h1 font-size: 18px;
h2 font-size: 16px;
h3 font-size: 14px;
</style>
Since a page full of headings would look just plain silly, my SEO tip would be to fill in the blank space with paragraphs, ordered and unordered lists, images, and other content. Try to get at least 400+ words on each page.
Div - The Habit of Using Divs for Everything in CSS Layouts
Tuesday, June 24th, 2008I admit, I have been guilty of this. Once you get started doing CSS layouts, it’s easy to get sucked into the use of DIV tags for everything. At one point, I was even working on a site where every paragraph was surrounded by <div class=”para”>…</div>. That’s a bit excessive. But it’s completely understandable. When you’re first learning CSS layouts, it’s hard enough to understand how to get the page to look the way you want it to look without worrying about whether or not you’re using semantic markup to create your Web page. And besides, nearly every example written uses the div tag to demonstrate how to put up CSS layouts, why should you be any different?
Start Thinking Semantically
When you’re trying to set up a Web page where the styles are separated from the content, you should also be trying to markup your content so that it defines the content that is contained in it. The way you do this is by thinking about the structure of your page and what the elements you’re placing on the page are rather than just what they’re going to look like. For example, this About Web page has some standard elements in the design.
* At the top is the breadcrumb trail
* The About logo
* A search bar/box
* Navigation on the left (divided into sub-sections)
* Navigation in two columns on the right
* A title, sub-title, and author information
* Body content in the middle of the page
* Ads in various locations on the page
Now it would be easy to simply mark up these sections as divs and then give them all unique ids and be done with it. But semantically, these are not all just divisions of the content, in fact, in many cases they have very specific roles on the page.
* The breadcrumb
Arguably, this is not the most important part of the page, but it still is a header of sorts. I would mark this up as an <h5> or <h6> to state to the browser that it’s a header, but it’s not a very important one.
REMEMBER
Using CSS we can style these tags to look however we want them to look. Don’t think of <h1> as “big, bold, and ugly” - think of it as “the most important header on the page”. So an h5 header is saying “this is a fairly low-importance header on the page”, not “small and bold”.
* The About logo
You have a choice here. If you think that this logo should be given prominence on the page, then use an <h1> header on the image. If you just want it to be an image - then use an <img> tag and put an id on it that indicates it’s the logo.
* The search bar/box
Another header - probably <h4>. It’s more important than the breadcrumb, but not really high priority.
* Navigation - left or right
Navigation is 99.99% of the time a list of links. So, if you’re using a list for your navigation, then use a list for your markup. The About lists tend to have a header item at the top (”Essentials” on the left or “More About the DIV Tag” on the right). I would call these out with a header tag around the list item:
<li><h4>Essentials</h4></li>
Then you can use IDs descendant selectors to style the specific areas (like the left and right headers).
* Title, sub-title, and author information
These are clearly headers. Even the image in the author information can be styled using headers - you don’t even need an img tag if you don’t want to use one.
* Body content
Here’s our first div. But be sure to use paragraph tags for the paragraphs inside it and header tags for headers, etc.
* Advertisements
These can also be divs, but many sites are using iframes to place their ads. If you do this, you don’t need to surround it with a div, just style the iframe.
Use Divs for Divisions
I’m, by no means, advocating that we stop using divs. Let’s just start using them where we need to use them, and use the other tags we have available when they should be used. Divs are meant to be logical divisions of content on the page.
In the above example, there may be div tags that I didn’t mention to help lay out the page. But use them only once you’ve used up your semantic markup.
6 Tools for Web Design
Tuesday, June 24th, 20081. w3Schools.com - I’m still shocked on a daily basis by the number of people that don’t know what the w3 is or have ever heard of w3schools.com. The w3 is basically the governing body of web standards. They are the people that define what is XHTML and CSS. Now, what is w3Schools? It’s free, complete documentation for all things web. If you don’t know your <pre> from your <ol>, this is the place to go. If you still rely on dreamweaver to sort out your <div>s or, heaven forbid, you still code with tables, the w3schools is a great place to start learnin’ yo self some real code. It takes a second to get past the design (it’s aweful, ironically), but there’s a metric ton of good information there.
2. Apache - Oh Wait, it’s already there. Just click that “Personal Web Sharing” check box in your Sharing system preferences and you have everything you need to build a basic static HTML site. I get all my software updates from entropy.ch and there are a hundred good tutorials out there for installing PHP, Ruby On Rails, django, or whatever software you plan to use.
3. subversion - Subversion is amazing, to say the least. Once you go “version control system” you can’t go back. Basically, subversion is a way to keep all of your sites (or your blog theme, etc) backed up and versioned. You install subversion server on your computer or a remote server, and then check in your site to the server. Then you can checkout your site to your webserver and always have an updatedable, but also revertable site. If you break your design, roll it back to the last time you checked it in. Want to move webhosts? It’s as easy as 1 command. And want to update your site to that new design you’ve been working on, “svn up” and your good-to-go. For a great tutorial on installing subversion, check out this great tutorial from Hivelogic.
4. Textmate - Put down Dreamweaver and step away from the handholding. Seriously people, it’s really not that hard, and you’ll make so much nicer sites because of it. Textmate is a god send for web site designers. Yes, you’ll have to code by hand, but you can also post to your blog, get live updating previews of your code, and use the aforementioned subvesrion, straight from inside Textmate. And, with code competion and bundles, a well experienced ‘mater can type 2 or 3 characters and complete entire lines of code.
5. Firefox - Ok, this one seems like low-hanging fruit, but if you add Firebug, Web Developer, and Colorzilla to Firefox 2, you have one sweet testing/debuging environment. Firebug is like sending Firefox to medical school, seriously slice and dice capabilities. Web Developer extesion is like buying one of those nice big red Snap On tool chests full of tools, and shoe horning it into your browser and Colorzilla is just that, a color picker as powerful as Godzilla. I can’t imagine doing webdesign with out these great little pieces of kit.
6. Safari from O’Reilly Publishing - Safari from O’Reilly is amazing, that’s about all I can say. If you can’t tell, I’m big on documentation, and Safari is like having a bookstore in your computer. You can search through hundreads of REALLY REALLY great books (sorry about the caps, Safari gets me hot). My favorites on there are Bulletproof Web Design, The Zen of CSS, and Eric Meyer on CSS.
7. BONUS - Here’s all the other mac only software that I use and abuse that is worth a mention: xScope, CSSEdit, Transmit, Linotype FontExplorer X, Xyle Scope.
-
Blog Tryangled Solutions
URL: blog.tryangled.com
Site-Rank: 0.50100
Yahoo backlinks: 178
Alexa rank: 1429691
All the Web links: 548 (+93)
Altavista links: 543 (+88)
Pages in Google: 2870 (+320)