HTML and CSS Interview Questions and Answers
Q. Can you have a DIV element nested inside a SPAN element?
A. It is a bad practice to have a DIV element nested inside a SPAN element. You can have a SPAN inside a DIV. The reason being the DIV is a block element and SPAN is an inline element. So, why would you want to have a block element inside an inline element? SPAN is a like sub tag, which applies styles for the specified content in-between the SPAN tag.
Q. How will you decide between using nested HTML table tags and a DIV tag with CSS?
A. Use DIV tags with CSS for laying out the web pages and use TABLE for representing data.
Tabular data represented using html table tag.
To layout web page elements
The traditional way of laying out web pages was to place them inside invisible tables as demonstrated below. This way of laying out is more complicated to do, harder to maintain and makes the web pages to load very slowly.
Bad: Laying out with nested TABLE tags and CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Table Layout</title>
<style type="text/css">
table {
width: 100%;
height: 1000px;
}
td.header {
width: 100%;
text-align: center;
background-color: yellow;
}
td.contents {
width: 80%;
text-align: center;
background-color: orange;
}
td.rhsmenu {
width: 20%;
text-align: center;
background-color: green;
}
td.footer {
width: 100%;
text-align: center;
background-color: blue;
}
</style>
</head>
<body>
<table>
<tbody>
<tr height="15%">
<td class="header" colspan="2">Header Information</td>
</tr>
<tr height="65%">
<td class="contents">Contents go
here</td>
<td class="rhsmenu">RHS Panel</td>
</tr>
<tr height="20%">
<td class="footer" colspan="2">Footer Information</td>
</tr>
</tbody>
</table>
</body>
</html>
The newer way to lay out your page elements is using DIVs and CSS. It can do everything tables can do and much more, and as an added bonus it loads a lot faster than tables ever did. It is easier to maintain, if you don't go overboard with nested DIVs. Use DIV for the conatainer and then use other elements SPAN, P, etc with CSS.Good: Laying out with DIVs and CSS tag
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Div Layout</title>
<!-- This can be defined outside in its own file and included into an html file -->
<style type="text/css">
body {
display: block;
width: 400px;
height:400px;
text-align: center;
}
/* main content container floated to the left*/
#content {
position: relative;
width: 80%;
height: 65%;
float: left;
background-color: orange;
width: 320px;
}
/* rhs menu container floated to the left*/
#rhs-menu {
position: relative;
width: 20%;
height: 65%;
float: left;
background-color: green;
}
/* header container floated to the left*/
#header {
position: relative;
width: 100%;
height: 15%;
float: left;
background-color: yellow;
}
/* footer with "clear"" to ensure that the footer is always below content and rhs-menu */
#footer {
position: relative;
width: 100%;
height: 20%;
clear: both;
background-color: blue;
}
/* align text vertically*/
#content p,#rhs-menu p,#header p,#footer p {
position: absolute;
top: 50%;
left: 50%;
height: 50%;
width: 50%;
margin: -15% 0 0 -25%;
}
/* position the logo using absolute (from top left corner) or relative*/
.logo-text {
position: absolute;
top: 5px;
left: 10px;
}
</style>
</head>
<body>
<div id="header"><span class="logo-text">logo goes here </span>
<p>Header Information</p>
</div>
<div id="content">
<p>Contents go here</p>
</div>
<div id="rhs-menu">
<p>RHS Panel</p>
</div>
<div id="footer">
<p>Footer Information</p>
</div>
</body>
</html>
Note: It is a best practice to define HTML, CSS, and JavaScript in separate files. The CSS is combined with HTML in these examples for illustration purpose only.
The typical usecase for the "clear" css tag is when you want to put a footer at the bottom of your page, beneath the RHS menu and the content sections. So, by using the CSS tags like float, clear, absolute, relative, and display you can create attractive, maintainable, and faster layouts.
posted by Unknown at
8/02/2012 02:49:00 PM
1 Comments:
Thanks for sharing. Its good to see fresh content always.
Post a Comment
Subscribe to Post Comments [Atom]
<< Home