If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there’s more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn’t work for Firefox but there’s a workaround that can be done with jQuery.
HTML Tutorials
[HTML Tutorial] Using ellipsis
February 10th, 2010[HTML Tutorial] Top 15+ Best Practices for Writing Super Readable Code
December 23rd, 20091. Commenting & Documentation
IDE’s (Integrated Development Environment) have come a long way in the past few years. This made commenting your code more useful than ever. Following certain standards in your comments allow IDE’s and other tools to utilize them in different ways.
Take this example:
The comments I added at the function definition can be previewed whenever I use that function, even from other files.
» Read more: [HTML Tutorial] Top 15+ Best Practices for Writing Super Readable Code
[HTML Tutorial] 9 Most Common IE Bugs and How to Fix Them
December 2nd, 20091. Centering a Layout
Centering an element is probably something every web developer has to do while creating a layout. The easiest and most versatile way to center an element is to just add margin: auto; to the relevant element. The above method will take care of centering the element irrespective of the resolution and/or browser width. IE 6 in quirks mode however decides to handle this in the most unfortunate way possible: by not handling it at all.
Consider the Following Code:
- #container{
- border: solid 1px #000;
- background: #777;
- width: 400px;
- height: 160px;
- margin: 30px 0 0 30px;
- }
- #element{
- background: #95CFEF;
- border: solid 1px #36F;
- width: 300px;
- height: 100px;
- margin: 30px auto;
- }
The output you’d expect:
[HTML Tutorial] How To Create a Horizontally Scrolling Site
November 26th, 2009If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to “wrapping” that element down onto the next line. The more content on the page, the taller it gets, not the wider. Why is this? Because it just makes sense. Our eyes are used to reading fairly short lines of text, so if we were to see a paragraph of text in one long straight line, it would be painful to read. Paragraphs need to have line breaks in them to be readable (hence the term “blocks” of text). We sure as heck don’t want to hard-code line breaks into the markup ourselves. Obviously, we don’t have to, the browser does this wrapping for us. Thus the vertical expansion.
This natural flow has lead to conventions in web page layout and even into hardware itself. Notice how many computer mice (mouses?) have a special scroller exclusively for vertical scrolling. But web pages are equipped with both vertical AND horizontal scrollbars right? If we are responsible with our web layout, we can go “against the grain” and create web pages that use primarily horizontal scrolling and can even expand horizontally as we add more content. Perhaps a slight blow to “useability”, but it sure can be a cool creative touch!
» Read more: [HTML Tutorial] How To Create a Horizontally Scrolling Site
[HTML Tutorial] You Want Faster Loading Pages?
November 14th, 2009The Visual
Have you ever gone into someone’s site and you sit there waiting, looking at a blank page? You know the page is loading because the little numbers across the bottom are rolling, but there’s nothing. Well, my pages don’t do that.
When you log into HTML Goodies, the entire page loads right away. All the text is there. What’s not there yet are the images. But there are little boxes that appear to be pressed into the page just waiting for the image to arrive. (To learn how to get those images up faster, check this out.) Sometimes there’s even text in the box telling you what’s going to go in the box. Neat trick, huh?
[HTML Tutorial] Creating Links to Other Pages
November 9th, 2009Creating A Hypertext Link
Today you will learn only one basic technique: How to create a (hyper) link to another page. It’s a set tag format that’s part of the Hyper Text Markup Language (HTML) like any of the others you may have seen. Once you learn the format, you can make as many links as you want to any other page you want.
Now an example: What is below would create a link to the HTML Goodies home page.
[HTML Tutorial] So You Want ME As Your Homepage
November 1st, 2009The Code
I’ll show you how it’s done, but a word of warning first. Only offer this as something the user can click on to enact. Yes, it is possible to set this script to an onLoad event handler so that it happens as soon as the user logs into your page. Don’t do that. For one thing, the process doesn’t happen without your users knowing. A little box pops up once the script runs, asking if the user really wants your page set to be the home page. Don’t make them click “no” every time they come in. Keep everyone happy and let them choose whether to set your page as their home page or not.
» Read more: [HTML Tutorial] So You Want ME As Your Homepage
[HTML Tutorial] HOW TO MAKE AN IMAP
October 25th, 2009Source:www.tutorialparadise.com
[HTML Tutorial] Create an active image
October 20th, 2009Use these to jump around or read it all…
[Basic Link Format]
[An Image Link]
[Removing the Blue Border]
This is a topic that is covered in the Primers section of HTML Goodies, but deserves its own short tutorial. The volume of e-mail I receive runs in cycles. The questions become more and more complex and then, all of a sudden, they become very simple. The new wave of HTML artists are trying their hands at the craft. And this is the question they ask most:
[HTML Tutorial] Basic HTML: Manipulating Text
October 14th, 2009So, how did it go with your first HTML page last night? I’ll assume it went well. Because if I don’t, I can’t go on, and I want to go on. So, now you know the basics about placing tags and manipulating text in terms of strong and emphasis styles. That’s good, and along with the <HR>, <BR>, and <P> commands you’ll be able to play around pretty well with text placement. Now we’ll talk about changing text size.
Loading ...
