Hello Friends I am back with some some latest posts after a very very long time.
I hope my future posts will help you.
I am back
Leave a reply
CSS form
To Get the above result in a form please go thought the following code…
<html>
<head>
<title>Form Design</title>
<style>
fieldset
{
border: 1px solid #781351;
width: 20em
}
legend
{
color: #fff;
background: #758958;
border: 1px solid #781351;
padding: 2px 6px
}
</style>
</head>
<body>
<form action=”#”>
<fieldset>
<legend>Testing Form</legend>
<p><label for=”name”>Name</label> <input type=”text” id=”name” /></p>
<p><label for=”e-mail”>E-mail</label> <input type=”text” id=”e-mail” /><br /></p>
<p class=”submit”><input type=”submit” value=”Submit” /></p>
</fieldset>
</form>
</body>
</html>
Nested DIVs v/s nested TABLEs
If we have a bunch of nested DIVs. How is this better than the nested tables they replaced? Now the answer lies in the way the tag was intended to be used. DIVs imply a logical and structural grouping. Even when they are nested they remain structural markup. In our example we grouped images with their captions (first level), and then grouped these image/caption pairs with similar image/caption pairs (second level). These are both examples of structural grouping that is handled much better by the DIV tag.
Whenever, tables imply a relationship between column and/or row headers, and the data in the table cells. When we use them for layout, we lose the structural semantics of a table. And we are back to using HTML for layout. Nesting tables only compounds the problem and as well now a days its not ideal to use table for layout its not good for search engin results too.
Advance CSS
creating Navigation with CSS
HTML Code
<div id=”navigation”>
<ul>
<li><a href=”index.html”><div id=”home”>Home</div></a></li>
<li><a href=”news.html”><div id=”news”>News</div></a></li>
<li><a href=”#”><div id=”how”>How it works</div></a></li>
<li><a href=”#”><div id=”affiliated”>Affiliated membership</div></a></li>
<li><a href=”#”><div id=”location”>our location</div></a></li>
<li><a href=”#”><div id=”about”>about us</div></a></li>
<li><a href=”#”><div id=”stuff”>hot stuff</div></a></li>
<li><a href=”#”><div id=”contact”>contact us</div></a></li>
</ul>
</div>
CSS Code
<p id=”vjContent”>CSS3 I am loving it. </p>
Features Available in Radian And Goldberg
| Features | Radiant | Goldberg |
| UI implementation | Using radius | Using Rails |
| Content management | HTML + Text + Radius | HTML + Text + FCKeditor |
| Content visibility management | Status based | User role based |
| User / Role Management | Basic | Advanced |
| Navigation | Automatic | Menu Editor |
| Extensible | Add on (Behavior & Extensions) | Easy integration of rails code |
| Default templates | None | Bundled |
| Welcome email | None | Can be configured |
| Technical knowledge required | Basic to medium | Medium to advanced |
Advance CSS
Advance CSS Presentation meterial
1. Introduction
2. Box Model
3. The CSS box model is made up of four parts:
4. Box Model Issues
5. Styling List (CSS navigation)
6. CSS button
7. Rounded corner without images
8. Working with divs
9. Float
10. Clear
11. Tableless designs
12. CSS Hacks
13. Some Important hacks
14. !important
15. CSS box model hack
16. @import “non-ie.css” all;
17. Grouping styles
18. Nested Styles
19. Conditional CSS (With Examples)
20. Conditional CSS
21. Validation
22. Overview of XHTML
23. How do I convert to XHTML?”
24. Benefits to XHTML
CSS Presentation
Material of CSS Presentaion
1. Introduction of CSS.
2. Use of Style Sheets
3. Example of every type of CSS
4. Consistent Appearance & Ease of Maintenance
1. Increase Accessibility
2. Apply Additional Effects (with examples)
3. Replace Non-standard Tags
4. Reduce Web Page File Size
6. Keep it in mind when using CSS
7. Type of CSS (with Example code)
8. Apply Additional Effects
9. CSS selectors (in details)
10. Browser Support
11. CSS and Accessibility
