<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td height=25> </td>
<td width=1346 align=center rowspan=3>
<table width=1346 height=100 cellpadding=0 cellspacing=0 border=0>
<tr>
<td width=100 height=100 rowspan=3 background=images/CNT-original.png style="background-size: cover; background-position: center,center"> </td>
<td height=25 align=right><b><font size=2>Contact Us</font></b></td>
</tr>
<tr>
<td height=49 valign=absmiddle bgcolor=#006CB8><img src=images/top-bar-right.png height=49 align=absmiddle><font size=6 color=white><b> Cruise and Touring</b></font></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td bgcolor=#666666>
<table width=1246 cellpadding=0 cellspacing=0 border=0>
<tr>
<%
Set Menu=oConn.Execute("SELECT * FROM menu WHERE menu_live=YES ORDER BY menu_order")
Do Until Menu.EOF
%>
<td onMouseOver=ChangeColor(this); onMouseOut=UnChangeColor(this); align=center><font size=4 color=white> <%=Menu("menu_name")%> </font></td>
<%
Menu.MoveNext
Loop
%>
<td width=50%> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td bgcolor=#006CB8 height=49 align=right><img src=images/top-bar-left.png height=49 align=absbottom></td>
<td bgcolor=#006CB8 height=49> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<html>
<head>
<title>Cruise and Touring</title>
<link rel=icon href=images/CNT_icon.png>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { font-family: Arial }
body { margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; padding:0; }
.table { display:table; }
.cell { display:table-cell; }
.row { display:table-row; }
</style>
<script language="Javascript">
function ChangeColor(value){
value.style.backgroundColor = '#006CB8'
value.style.color = '#000000'
}
function UnChangeColor(value){
value.style.backgroundColor = '#666666'
value.style.color = '#000000'
}
</script>
<%
Dim oConn,oConnAE,Login
Set Login=Server.CreateObject("ADODB.Recordset")
Set oConn=Server.CreateObject("ADODB.Connection")
oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/cntcore.mdb")
' Set oConnAE=Server.CreateObject("ADODB.Connection")
' oConnAE.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("ae-core/activcore.mdb")
' SESSION("cn")="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("ae-core/activcore.mdb")&";Persist Security Info=False"
%>
</head>
<body>
<div class=table style="width:100%; border:0px">
<div class=row>
<div class=cell style="height:25px"> </div>
<div class=table style="width:1346px; height:100px; border:0px;">
<div class=row>
<div class=cell style="width:100px; height:100; background-image: url(images/CNT-original.png); background-size: cover; background-position: center,center"> </div>
<div class=cell style="height:25px; align:right;"><b><font size=2>Contact Us</font></b></div>
</div>
<div class=row>
<div class=cell style="height:49px; valign:absmiddle; bgcolor:#006CB8;"><img src=images/top-bar-right.png height=49 align=absmiddle><font size=6 color=white><b> Cruise and Touring</b></font></div>
</div>
<div class=row>
<div class=cell> </div>
</div>
<div class=row>
<div class=cell> </div>
<div class=table style="width:1246px; border:0px;">
<%
Set Menu=oConn.Execute("SELECT * FROM menu WHERE menu_live=YES ORDER BY menu_order")
Do Until Menu.EOF
%>
<div class=cell style="onMouseOver:ChangeColor(this); onMouseOut:UnChangeColor(this); align:center;"><font size=4 color=white> <%=Menu("menu_name")%> </font></div>
<%
Menu.MoveNext
Loop
%>
<div class=cell style="width:50%;"> </div>
</div>
</div>
</div>
</div>
<div class=cell> </div>
</div>
<div class=row>
<div class=cell style="bgcolor:#006CB8; height:49px; align:right;"><img src=images/top-bar-left.png height=49 align=absbottom></div>
<div class=cell style="bgcolor:#006CB8; height:49px;> </div>
</div>
<div class=row>
<div class=cell> </div>
<div class=cell> </div>
</div>
</div>
</body>
</html>
just a tip for you: maybe sometimes just asking what someone has done and some manners also goes along way :)
<div class="table">
<div class="table-head">
<div class="table-row">
<div class="table-data">fruit</div>
<div class="table-data">color</div>
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-data">apple</div>
<div class="table-data">red</div>
</div>
</div>
</div>
.table {
display: table;
}
.table-head {
display: table-header-group;
}
.table-body {
display: table-row-group;
}
.table-row {
display: table-row;
}
.table-data {
display: table-cell;
}
<!doctype html>
<html lang="en"><head>
<title>Cruise and Touring</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style>
body {
background:#fff;
margin: 0;
}
#topBar {
height: 101px;
border: 1px solid #fff;
}
#contact1 {
float: right;
margin-right:5px;
}
#boatBar {
background: #006CB8;
height: 49px;
margin-top: 26px;
color: #fff;
font-family: sans-serif;
font-size: 32px;
font-weight: bold;
line-height: 45px;
}
#imgHold {
display: inline-block;
vertical-align: top;
background: #fff;
margin-left: 33px;
margin-right: 11px;
border-radius: 50%;
padding: 2px 7px;
margin-top: -28px;
}
#imgHold img{
width: 100px;
vertical-align: middle;
}
#menu1 {
background: #666666;
margin-left: 133px;
font-size: 20px;
}
#menu1 a{
display: inline-block;
padding: 2px 6px;
color: white;
font-family: sans-serif;
margin: 1px 9px;
text-decoration: none;
}
#menu1 a:hover {
color: red;
background:#006CB8;
}
</style>
</head>
<body>
<div id="topBar"><a href="#" id="contact1">Contact Us</a>
<div id="boatBar">
<div id="imgHold"><img src="http://dev.gmoney.club/cnt.com.au/dev/images/CNT-original.png" />
</div>Cruise and Touring
</div>
</div>
<div id="menu1"><a href="#">Home</a><a href="#">Cruising</a><a href="#" >Touring</a><a href="#">Cheap Getaways</a><a href="#">Last Minute Deals</a>
</div>
</body>
</html>
Here is a simple example with tables and divs that shows both the similarities and differences.
Open in new window