Online gallery using div instead of table for page layout


Our online gallery up until previous post, used tables for setting layout for our gallery pages. Tables are primarily designed for tabulating data, not to layout page content. To define layout we should be using div tag. Our home page code shown below is modified to use div. To use div we should first get familiarized with CSS.

<html>
               <head>
                              <title>Gallery| Home</title>                             
                              <link rel="stylesheet" type = "text/css" href = "style/style.css">                             
               </head>
               <body>                                              
                              <div style="width:20%; float:left;">
                                             <!--this is left space-->
                              </div>
                             
                              <div style ="width:60%; float:left;">
                             
                                             <a href = "home.html" class = "active">Home</a>
                                             <a href = "about.html">About Us</a>
                                             <a href = "gallery.html">Gallery</a>
                                             <a href = "contact.html">Contact Us</a>
                                            
                                             <!-- this is title  -->
                                             <h1>Welcome to my gallery </h1>
                                            
                                             <p>
                                                            <!--your passage goes here-->
                                             </p>      
                              </div>
                              <div style="width:20%; float:left;">
                                             <!--this is right white space-->
                              </div>                  
               </body>
</html>

Writing this way makes codes are shorter and less cluttered. The div tag uses CSS to set behavior. simple layout can be achieved by setting width and float attribute. The width values are same value we used when using table to layout. 

In this version we used inline CSS method where we write the style attribute of div tag in html file. It is a good idea however to write all the styles in CSS file. In this way we can reuse the same style across all pages. So, lets write the styles in the CSS file.

.leftColumn{      
               width:20%;
               float:left;
}
.centerColumn{ 
               width:60%;
               float:left;
}

.rightColumn{    
               width:20%;
               float:left;
}

This are name of the class referred to when using div tag in html file. Now, all we need to do is change like example shown below.

…
<div style="width:20%; float: left;">
…

to this,

…
<div class = “leftColumn”>
…

Now, this content in this div block will follow style defined in leftColumn class. As the name implies the contents in this block is pushed to the left. do the same to centre column and right column and test. you should get same page display like using the table. You can use style to do more setting according to your ideas. Once you are satisfied with the look, change table to div in other pages. 



We can define inner layout inside a layout. For example replacing table in contact page to div. Add following codes in style.css file. this div is inside the centerColumn div we had earlier. see how to set the depth of the div in CSS. Ideally  group the related div so write in between centerColumn div and rightColumn code in the style sheet file and stick to this coding style for easy to find the codes in future.

…
// .centerColumn codes are here
.centerColumn .address{
               height:250px;
               width:50%;
               float:left;
}
.centerColumn .map{     
               height:250px;
               width:50%;
               float:right;
}
// .rightColumn codes are here
…
replace
…
<table>
               <tr>
                              <td width = "500px" valign = "top">
                                           <!-- your address goes here-->
                              </td>
                              <td align = "right" width = 500px>
                                          <!-- your map goes here-->
                              </td>
               </tr>
</table>
…

with

…
<div class = "address">
 <!-- your address and contacts goes here-->
</div>
<div class = "map">
             <!-- your map goes here-->
</div>
…           

Codes are now less cluttered and easier to read. Rewriting code and improving them is normal in programmers daily life. Hope everyone get some idea on how to implement div tags in your projects.

Discussion is welcome. Please email me at civmook@gmail.com for any assistance...

Comments

Post a Comment

Popular posts from this blog

Drawing Simple Pie Chart

Image
To draw pie chart with 5 sectors. The program calculates the total of all the input given by user and find the angle in degrees to draw each sectors. When the program first loads, chart based on default values is painted by the program. User can edit the values in the text field and presses draw button to redraw the chart. Each time the draw button is pressed, new set of angle is calculated and repainted. I have attached the the sources for this program. It is simple and needs upgrades. Pie.java This class executed the program and initializes the components JTextField and JPanel to draw the chart. package coolApp.graphics; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Pie { JTextField a,b,c,d,e; JButton btnDraw; double total; JPanel contentPane; Pie(){ JFrame frame = new JFrame("Pie - CoolApps"); frame.setSize(500,500); contentPane = new JPanel(); contentPane.setLayout(new BorderLayout()); frame...
Read more

VB.net connecting to SQL Server

Connecting to SQL server 2014 from VB.Net 2017, read values from the database and display the data in windows form. Before begin to write this program, first we need to import SqlClient class. Imports System.Data.SqlClient Step 1 Create a sql connection object. This is to make connection to object. Dim conn As New SqlConnection() Step 2 Set the connection string to the sqlconnection object: conn.ConnectionString = connStr Road block The variable connStr is a connection string. Connection object need connection string to make connection to database. It has information like who providing the database, the name of the database and some security information. Dim connStr As String = "Data Source = ServerInstanceName;Initial Catalog=testDB;Integrated Security=True" Let's break down the connection string into the three main components. Dim provider As String = "ServerInstanceName;" Dim database As String = "Initial Catalog=testDB;" Dim ...
Read more

Setting up data set and display it

Before we display some data in DataGridView control in Visual Basic window we must create a data set. Data Set is an object that can hold data tables where all the data is stored in rows and columns. the first step is to create a table. Dim  dataTableObjectName as DataTable = New DataTable(tableName) this will create a table which is reference using the dataTableObjectName Example Dim userTable As DataTable = New DataTable("Users") Next step is adding columns to the table Dim column as DataColumn dataTableObjectName.Columns.Add (columnName, columnType) Example userTable.Columns.Add("userID", Type.GetType("System.Int.32")) ' adding second and third column userTable.Columns.Add("userName", Type.GetType("System.String")) userTable.Columns.Add("userContact", Type.GetType("System.String")) once we we columns in the table we can add row The rows contains records or the data for each user. dat...
Read more