Brilliant example for portfolio
http://www.cubic.com.br *Coding Clean and Semantic Templates* *1.** Remove The Unnecessary <div> Tags* I’ve seen a lot of people wrap a <div> tag around the <form> or <ul> menu list. Why create an extra <div> tag that you don’t need? You can achieve the same result by applying the CSS rules to the selector. *Example 1:* The example below shows how you can drop the <div> tag and declare the styling to the form selector. *Example 2:* Sometimes we wrap the content with an extra <div> tag strictly for spacing purposes. The example on the left uses a <div class="sidebox"> to create margin space in between the boxes. But if each box has a heading (ie. <h4>), we can simply apply the margin space to the h4 selector and drop the extra <div class="sidebox"> tag. *2.** Use Semantic Markups* You should always use semantic markups to code HTML documents (ie. <h1> for headings, <p> for paragraph text, and <ul> for list items). So, even when the CSS is not presented nor supported, your document still makes sense. *Example:* The image below compares the rendering differences between <div> markups and semantic markups with no css supported. *3.** Minimize The Use of <div> Tags* Have you seen the messy templates where <div> tags are everywhere and they drive you crazy? Have you ever missed a closing </div> tag or have an extra opening <div> tag messing up the entire layout? I’m sure most developers have experienced it before. So, you should always minimize the use of <div>tag if possible. It will make debugging and editing easier. *Example 1:* Instead of using <div> tag for breadcrumb navigation, it makes more sense to use <p> tag. *Example 2:* The following example shows how I can use CSS to cut down two <div> tags by replacing with one <span> tag. They both produce the same layout. *4.** Format (Indent) Your Code* You should always format your source code (ie. indent your nested elements) so it is easier to read and debug. If you have Adobe Dreamweaver, you can easily format the code by using the *Commands > Apply Source Formatting*(from the application menu). *5.** Comment The Closing </div> Tags* When coding for platform templates (ie. WordPress themes), the template is most likely splitted into several files: index.php, header.php, sidebar.php, and footer.php. Hence, you should always make a comment for the closing </div> tags so you won’t get lost. For example, when I see </div><!-- /wrapper -->, I know it is the closing tag for <div id="wrapper">. *Example:* I usually insert a HTML comment tag right after the closing </div> tag. I use the forward slash to indicate it is the closing tag. *Conclusion* - Minimize the use of <div> tags. - You should only use the <div> tag for the main layout sections such as: header, content, sidebar, and footer. - The content should be in semantic HTML tags, not <div> tags. Format the source code and label the closing </div> tags. 5 Simple, But Useful CSS Properties *1.* CSS Clip The clip property is like a mask. It allows you to mask the content of an element in a rectangle shape. To clip an element: you must specify the position to absolute. Then, specify the top, right, bottom, and left value relative to the element. Image Clip Example The following example shows you how to mask an image using clip property. First, specify the <div> element to position: relative. Next, specify the <img> element to position: absolute and the rect values accordingly. .clip { position: relative; height: 130px; width: 200px; border: solid 1px #ccc; } .clip img { position: absolute; clip: rect(30px 165px 100px 30px); } Image Resize and Clip In this example, I’m going to show you how to resize and clip images. My original images are in rectangle format. I want to scale it down by 50% to create a thumbnail gallery in a square format. So, I used the width and height property to resize the images and mask them with the clip property. Then, I used the left property to shift the images to the left by 15px. .gallery li { float: left; margin: 0 10px 0 0; position: relative; width: 70px; height: 70px; border: solid 1px #000; } .gallery img { width: 100px; height: 70px; position: absolute; clip: rect(0 85px 70px 15px); left: -15px; } *2.* Min-height The min-height property allows you to specify the minimum height of an element. It is useful when you need to balance the layout. I used it on my job board <http://jobs.webdesignerwall.com/> to ensure the content area is alway taller than the sidebar. .with_minheight { min-height: 550px; } *3.* White-space The white-space property specifies how white-space is handled in an element. For example, specify white-space: nowrap will prevent the text from wrapping to next line. em { white-space: nowrap; } *4.* Cursor If you change the behavior of a button, you should change its cursor as well. For example, when a button is disabled, the cursor should be changed to default (arrow) to indicate that it is not clickable. So, the cursorproperty is extremely useful for developing web apps. .disabled { cursor: default; } .busy { cursor: wait; } .clickable:hover { cursor: pointer; } *5.* Display inline / block In case you didn’t know: block elements are rendered on a new line, whereas inline elements are rendered on the same line. <div>, <h1>, and <p> tags are examples of block elements. Examples of inline tags are: <em>, <span>, and <strong>. You can override the display style by specifying display: inlineor block. .block em { display: block; } .inline h4, .inline p { display: inline; } -- -Akshar- -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
