When i started my Web development career all i knew about HTML was table,td,tr,css and a few other tags. Most of the times i used ASP.NET components, without much tweaking. But soon i came across Web 2.0 techniques and realized the advantages of using Div elements + advance CSS handling. And so i began (again!) .......
To my initial horror i just couldn't get any thing in write place. Div' s overlapping each other, validation alerts flying all over the place, page changing structure after postback,.....just to name a few problems. But i had to focus, do my homework and start correctly. After reading some useful articles on the NET (You can find many!) and taking some expert tips from our lead designer, i finally started getting things write.
Now i was writing less HTML code as most things were configured through CSS. Just required to apply proper classes to the DIV's or give id's to them. You can follow any of the methods classes/id's but using same id's on same page is not W3C complaint. Also the most important thing that i realized about div's is that it's more cross browser compliant hence saves a lot of time configuring your web page for different browsers. Web pages look more cleaner than before.
So now i think that i have started off with WEB 2.0 (WEB 3.0 buzz already round the corner!!).
The learning path just got longer......................................................
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
21 December 2008
11 December 2008
Rounded Corner Box Using Div and CSS
Ever since the advent of WEB 2.0, the way web pages have been designed has changed significantly. People these days go for more of a soft look to their pages with rounded corners every where. One of the best way of designing rounded corner box is by using div and CSS combination. Here is a sample code for the same...
<style type="text/css">
.round_box {
background: url(round_tl.png) no-repeat top left;
}
.round_top {
background: url(round_tr.png) no-repeat top right;
}
.round_bottom {
background: url(round_bl.png) no-repeat bottom left;
}
.round_bottom div {
background: url(round_br.png) no-repeat bottom right;
}
.round_content {
background: url(round_r.png) top right repeat-y;
}
.round_top div,.round_top,
.round_bottom div, .round_bottom {
width: 100%;
height: 15px;
font-size: 1px;
}
.round_content, .round_bottom {
margin-top: -19px;
}
.round_content { padding: 0 15px; }
</style>
<body>
<div class="round_box">
<div class="round_top"><div></div></div>
<div class="round_content">
<p>Your Content Here</p>
</div>
<div class="round_bottom"><div></div></div>
</div>
</body>
Note: You must have the correct image for cornering your pages!
I have found a great site that auto generates the HTML Code,CSS and corner images according to your choices for Absolutely FREE!! Check it out : RoundedCornr
<style type="text/css">
.round_box {
background: url(round_tl.png) no-repeat top left;
}
.round_top {
background: url(round_tr.png) no-repeat top right;
}
.round_bottom {
background: url(round_bl.png) no-repeat bottom left;
}
.round_bottom div {
background: url(round_br.png) no-repeat bottom right;
}
.round_content {
background: url(round_r.png) top right repeat-y;
}
.round_top div,.round_top,
.round_bottom div, .round_bottom {
width: 100%;
height: 15px;
font-size: 1px;
}
.round_content, .round_bottom {
margin-top: -19px;
}
.round_content { padding: 0 15px; }
</style>
<body>
<div class="round_box">
<div class="round_top"><div></div></div>
<div class="round_content">
<p>Your Content Here</p>
</div>
<div class="round_bottom"><div></div></div>
</div>
</body>
Note: You must have the correct image for cornering your pages!
I have found a great site that auto generates the HTML Code,CSS and corner images according to your choices for Absolutely FREE!! Check it out : RoundedCornr
10 December 2008
Using Div to generate Table Like Structure
"The Div tag defines a division or a section in an HTML document. The Div tag is often used to group block-elements to format them with styles"- offical defination by W3Schools.
If you are new to using div elements then the very first problem that you might face is generating the table,tr,td structure using only div's (since you were so hooked up on the old Table structure). But the fact is that using div's you can (and will) save lot of HTML coding (after learning few simple tricks), plus the div elements are also very very flexible.
Here's a basic code snippet to get you started with...
<style type="text/css">
.tablediv {
display: table;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
border-collapse:separate;
}
.rowdiv {
display: table-row;
width:auto;
}
.celldiv {
float:left; /*fix for IE since display:inline doesn't work */
display: table-cell;
}
</style>
/* Style can be used in HTML as follows:*/
<body>
<div class="tablediv" style="width:500px;">
<div class="rowdiv" style="width:100%;">
<div class="celldiv" style="width="50%;"> one cell/td in a table</div>
<div class="celldiv" style="width="50%;"> one cell/td in a table</div>
</div>
</div>
</body>
If you are new to using div elements then the very first problem that you might face is generating the table,tr,td structure using only div's (since you were so hooked up on the old Table structure). But the fact is that using div's you can (and will) save lot of HTML coding (after learning few simple tricks), plus the div elements are also very very flexible.
Here's a basic code snippet to get you started with...
<style type="text/css">
.tablediv {
display: table;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
border-collapse:separate;
}
.rowdiv {
display: table-row;
width:auto;
}
.celldiv {
float:left; /*fix for IE since display:inline doesn't work */
display: table-cell;
}
</style>
/* Style can be used in HTML as follows:*/
<body>
<div class="tablediv" style="width:500px;">
<div class="rowdiv" style="width:100%;">
<div class="celldiv" style="width="50%;"> one cell/td in a table</div>
<div class="celldiv" style="width="50%;"> one cell/td in a table</div>
</div>
</div>
</body>
Subscribe to:
Posts (Atom)