To make DIVs behave like TABLEs, you have to tell them to behave that way using the display property. These are the values that we’ll be using: table, table-row and table-cell.
A good example would be putting a table in our right navigation bar since it’s still empty:
First, we have to set their style properties in our style.css code:
#rightnav {
float: right;
width: 200px;
height: 400px;
background-color: #FF99CC;
border-right: 1px dashed #000000;
}
.table {
display: table;
border: 2px solid red;
}
.row {
display: table-row;
border: 2px solid red;
}
.left, .right, .middle {
display: table-cell;
border: 2px solid red;
}
Since our goal is to place it in our right nav, we inserted the codes right after #rightnav. Basically, we set them up to display as a table instead of plain text. We have also indicated that the borders must be 2 pixels, solid and red.
Let us then insert some content to our .html code:
<div id="rightnav">This is the rightnav
<div class="table">
<div class="row">
<div class="left">
<h2>Left</h2>
<p>Hi</p>
</div>
<div class="middle">
<h2>Middle</h2>
<p>Hello</p>
</div>
<div class="right">
<h2>Right</h2>
<p>Howdy?</p>
</div>
</div>
</div>
</div>
The ones in red are the codes that we have added. We have placed them inside the <div id=”rightnav”> in order for it to appear in our right navigation bar. Notice that we have a new function, <h2>. We have set this function for it to give distinction between the column title and the column text.
h2 {
font-size: 15px;
color: green;
padding: 5px;
font-family: Verdana;
}
Also, we have placed <p> and </p> marks to indicate that the text is a paragraph.
<div> <h2>Left</h2> <p>Hi</p> </div> <div> <h2>Middle</h2> <p>Hello</p> </div> <div> <h2>Right</h2> <p>Howdy?</p> </div>
Then we check the outcome of the changes that we’ve made to our .html and .css codes:
Let’s now have a recap of our current .html and .css codes. We now have a new and improved .html file: (Highlighted in red are the newly added ones)
<html>
<head>
<link href="style.css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<a href="http://www.makawebsitex.com">This is the header</a>
<div>
<ul>
<li><a href="http://www.makeawebsitex.com">Header 1</a></li>
<li><a href="http://www.makeawebsitex.com">Header 2</a></li>
<li><a href="http://www.makeawebsitex.com">Header 3</a></li>
<li><a href="http://www.makeawebsitex.com">Header 4</a></li>
</ul>
</div>
<p>Header Paragraph</p>
</div>
<div id="leftnav">This is the leftnav
<div>
<ul>
<li><a href="http://www.makeawebsitex.com">Navigation Link 1</a></li>
<li><a href="http://www.makeawebsitex.com">Navigation Link 2</a></li>
<li><a href="http://www.makeawebsitex.com">Navigation Link 3</a></li>
<li><a href="http://www.makeawebsitex.com">Navigation Link 4</a></li>
</ul>
</div>
<p>Navigation Links Paragraph</p>
</div>
<div id="rightnav">This is the rightnav
<div>
<div>
<div>
<h2>Left</h2>
<p>Hi</p>
</div>
<div>
<h2>Middle</h2>
<p>Hello</p>
</div>
<div>
<h2>Right</h2>
<p>Howdy?</p>
</div>
</div>
</div>
</div>
<div id="body">This is the body<br><br><br>
<div>
<h1>This is where you place your content</h1>
The quick brown fox jumps over the lazy dog.
</div>
</div>
<div id="footer">This is the footer</div>
</body>
</html>
And of course, our updated .css file:
#container {
width: 900px;
}
#header {
width: 900px;
height: 100px;
background-image: url(http://img694.imageshack.us/img694/4239/makeawebsitex.png);
border-bottom: 3px dotted #000000;
position: relative;
}
#header a {
color: pink;
text-decoration: none;
font-family: arial;
font-size: 12px;
}
#header a:visited {
color: #FF33CC;
text-decoration: underline;
}
#header a:hover {
color: red;
text-decoration: none;
font-weight: bold;
}
.HeaderLinks {
position: absolute; top: 80px; right: 10px;
}
.HeaderLinks ul {
margin: 0px;
}
.HeaderLinks li {
margin: 0px 10px 0px 0px;
color: pink;
list-style-type: none;
display: inline;
}
#header p {
color: green;
font-family: Verdana;
font-weight: bold;
}
#leftnav {
float: left;
width: 200px;
height: 400px;
color: red;
font-family: Trebuchet MS;
background-color: #FF99CC;
border-right: 1px dashed #000000;
border-left: 2px solid #000000;
border-bottom: 3px dotted #000000;
}
.NavigationLinks {
position: absolute; top: 150px; left: 0px;
}
.NavigationLinks ul {
margin: auto;
}
.NavigationLinks li {
margin: 10px 10px 10px 10px;
list-style-type: square;
color: #FFFFFF;
}
.NavigationLinks li a {
color: #FFFFFF;
padding: 3px 3px 3px;
text-decoration: none;
font-size: 15px;
font-family: arial;
}
.NavigationLinks li a:hover {
color: red;
font-weight: bold;
}
.NavigationLinks li a:visited {
color: white;
text-decoration: underline;
}
#leftnav p {
color: green;
font-size: medium;
text-align: center;
font: Verdana;
position: absolute; top: 300px; left: 10px;
}
#rightnav {
float: right;
width: 200px;
height: 400px;
background-color: #FF99CC;
border-right: 1px dashed #000000;
}
.table {
display: table;
border: 2px solid red;
}
.row {
display: table-row;
border: 2px solid red;
}
.left, .right, .middle {
display: table-cell;
border: 2px solid red;
}
#body {
margin: auto;
width: 620px;
padding: 10px 15px 10px 15px;
text-align: center;
}
#footer {
clear: both;
background-color: red;
}
.content {
margin: auto;
padding: 10px 10px 10px 10px;
background-color: yellow;
border: 5px dotted red;
width: 300px;
height; 100px;
color: red;
}
h1 {
font-size: 25px;
color: blue;
padding: 15px;
font-family: Arial;
}
h2 {
font-size: 15px;
color: green;
padding: 5px;
font-family: Verdana;
}
That’s all for today, and I hope you were able to keep track of our topics using the codes provided above.
Related posts:
Loading ...
