CSS form

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

advance-css.ppt

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

Basic CSS presentation