PDA

View Full Version : How to get buttons to line up correctly!


PotterHarry
12-18-2008, 08:41 PM
Hi, I'm in the noobie category... am trying to edit a dreamweaver template which has no frames. I removed some unwanted design elements from part of the page, and in a blank area attempted to insert button images. Each time I do this the design breaks up ie elelents are displaced down the page. Tried creating a new layer to get round this, but it is displaced a few cms when I preview in IE (tried both relative and absolute) with the same poor result. I can only get the buttons to show up in the correct place by having them displaced in the WYSIWY dont get workspace. Must be my ignorance here, but please can someone point me in the right direction to a solution ... Thank you !!!

Ricky55
12-18-2008, 09:16 PM
code please

PotterHarry
12-18-2008, 09:45 PM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Web Template - Hotels!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="page">
<div id="Layer1" style="position:absolute; width:200px; height:258px; z-index:1; left: 13px; top: 236px;"><img src="images/1up.png" width="192" height="22"><img src="images/3up.png" width="192" height="22"><img src="images/4up.png" width="192" height="22"><img src="images/2up.png" width="192" height="22"><img src="images/5up.png" width="192" height="22"><img src="images/6up.png" width="192" height="22"><img src="images/7up.png" width="192" height="22"><img src="images/8up.png" width="192" height="22"><img src="images/9up.png" width="192" height="22"></div>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top.gif" alt="Welcome to The Venetian Hotel" width="778" height="18"></td>
</tr>
<tr>
<td id="border"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="27%" valign="top" id="padding-left"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="side-menu-bg">
<tr>
<td height="140" class="small-menu-padding"><table width="172" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="8" align="right" valign="top"><img src="images/side-link-left.jpg" alt="The Venetian Hotel" width="7" height="87"></td>
<td width="75" valign="top" id="small-menu-bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="home-icon-padding"><a href="#"><img src="images/home-icon1.gif" alt="Home" width="11" height="11" border="0"></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="#" class="sidelink">Home</a></td>
</tr>
</table></td>
<td width="10" valign="bottom" id="small-menu-bg"><img src="images/divider.gif" alt="The Venetian Hotel" width="3" height="68"></td>
<td width="77" valign="top" id="small-menu-bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="home-icon-padding"><a href="#"><img src="images/mail-icon.gif" alt="Contact Us" width="12" height="9" border="0"></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="#" class="sidelink">Contact Us</a> </td>
</tr>
</table></td>
<td width="9" valign="top"><img src="images/side-link-right.jpg" alt="The Venetian Hotel" width="5" height="87"></td>
</tr>
</table></td>
</tr>
<tr>
<td class="new-rule-padding"><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
<tr>
<td id="left-menu-padding">&nbsp;</td>
</tr>
<tr>
<td><img src="images/side-link-bottom.gif" alt="The Venetian Hotel" width="204" height="29"></td>
</tr>
</table></td>
<td width="73%" align="right" valign="top" id="pic-padding"><img src="images/pic.jpg" alt="The Venetian Hotel" width="565" height="389" border="0" usemap="#Map"></td>
</tr>


</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="57%" valign="top" id="padding-left-top"><table width="409" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%" align="left" valign="top"><img src="images/welcome-left.gif" alt="Welcome to The Venetian Hotel" width="11" height="277"></td>
<td width="89%" valign="top" id="welcome-bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="welcome-title">Welcome to our web site ! &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/arrow.gif" alt="Arrow" width="11" height="11"></td>
</tr>
<tr>
<td colspan="2" class="welcome-text"><span class="text-bold">Lorem ipsum dolor</span> sit amet, consectetuer adipiscing elit. Proin nec lacus dapibus dolor ultricies dignissim. Vivamus egestas sagittis enim. In viverra elit at nunc. In hac habitasse platea dictumst. Pellentesque vulputate molestie lectus. Phasellus eu platea dictumst. Pellentesque vulputate molestie lectus. Phasellus eu </td>
</tr>
<tr>
<td width="44%" valign="top" class="welcome-text"><span class="text-bold">Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet,consectetuer adipiscing elit.adipiscing elit.Lorem ipsum dolor sit amet,consectetuer adipiscing elit.</td>
<td width="56%" valign="top"><img src="images/welcome-pic.gif" alt="Welcome to The Venetian Hotel" width="228" height="146"></td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td valign="top" class="more-padding"><a href="#" class="morelink">more</a></td>
</tr>
</table></td>
<td width="9%" align="left" valign="top"><img src="images/welcome-right.gif" alt="Welcome to The Venetian Hotel" width="9" height="277"></td>
</tr>
</table></td>
<td width="43%" rowspan="2" align="left" valign="top" id="pic-padding"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="top"><img src="images/pic-bottom.gif" alt="The Venetian Hotel" width="325" height="72"></td>
</tr>
<tr>
<td valign="top"><img src="images/right-pic.gif" alt="The Venetian Hotel" width="340" height="169"></td>
</tr>
<tr>
<td height="92" valign="top"><span class="special-offer-text1">Special offer</span>
<p class="special-offer-text2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nec lacus dapibus dolor ultricies dignissim. Vivamus egestas sagittis enim. In viverra elit at nunc. In hac habitasse platea dictumst. Pellentesque vulputate molestie lectus. Phasellus eu </p></td>
</tr>
<tr>
<td valign="top" class="spl-offer-more-padding"><a href="#" class="morelink">more</a></td>
</tr>
<tr>
<td valign="top" class="copyright">&copy; Copyright Information Goes Here. All Rights Reserved.</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="padding-left-top"><table width="409" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%" align="left" valign="top"><img src="images/booking-left.gif" alt="The Venetian Hotel" width="9" height="119"></td>
<td width="90%" valign="top" id="booking-bg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="booking-padding">Book a Room &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/arrow2.gif" alt="Arrow" width="11" height="11"></td>
</tr>
<tr>
<td><form name="form1" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" valign="bottom" class="booking-padding">Check in </td>
<td width="55%" valign="bottom" class="list-padding"><label>
<select name="select" class="list">
<option selected>------------ Date -----------</option>
</select>
</label></td>
<td width="20%">&nbsp;</td>
</tr>
<tr>
<td valign="bottom" class="booking-padding">Check out </td>
<td valign="bottom" class="list-padding"><label>
<select name="select2" class="list">
<option selected>------------ Date -----------</option>
</select>
</label></td>
<td valign="bottom"><label>
<input name="Submit" type="submit" class="button" value="submit">
</label></td>
</tr>
</table>
</form> </td>
</tr>

</table></td>
<td width="8%" align="left" valign="top"><img src="images/booking-right.gif" alt="The Venetian Hotel" width="9" height="119"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/bottom.gif" alt="The Venetian Hotel" width="778" height="17"></td>
</tr>
</table>
<br>
<br>
</div>
<map name="Map"><area shape="rect" coords="28,261,291,370" href="#" alt="The Venetian Hotel">
</map></body>
</html>

edbr
12-19-2008, 12:26 AM
tables, still see id this is closer, i nested a table for your buttons
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Web Template - Hotels!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="page">
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top.gif" alt="Welcome to The Venetian Hotel" width="778" height="18"></td>
</tr>
<tr>
<td id="border"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="27%" valign="top" id="padding-left"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="side-menu-bg">
<tr>
<td height="140" class="small-menu-padding"><table width="172" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="8" align="right" valign="top"><img src="images/side-link-left.jpg" alt="The Venetian Hotel" width="7" height="87"></td>
<td width="75" valign="top" id="small-menu-bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="home-icon-padding"><a href="#"><img src="images/home-icon1.gif" alt="Home" width="11" height="11" border="0"></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="#" class="sidelink">Home</a></td>
</tr>
</table></td>
<td width="10" valign="bottom" id="small-menu-bg"><img src="images/divider.gif" alt="The Venetian Hotel" width="3" height="68"></td>
<td width="77" valign="top" id="small-menu-bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="home-icon-padding"><a href="#"><img src="images/mail-icon.gif" alt="Contact Us" width="12" height="9" border="0"></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="#" class="sidelink">Contact Us</a> </td>
</tr>
</table></td>
<td width="9" valign="top"><img src="images/side-link-right.jpg" alt="The Venetian Hotel" width="5" height="87"></td>
</tr>
</table></td>
</tr>
<tr>
<td class="new-rule-padding"><table width="100%" border="1">
<tr>
<td><img src="images/1up.png" alt="" width="192" height="22"></td>
</tr>
<tr>
<td ><img src="images/3up.png" width="192" height="22"></td>
</tr>
<tr>
<td><img src="images/4up.png" width="192" height="22"></td>
</tr>
<tr>
<td><img src="images/2up.png" width="192" height="22"></td>
</tr>
<tr>
<td><img src="images/5up.png" width="192" height="22"></td>
</tr>
<tr>
<td><img src="images/6up.png" width="192" height="22"></td>
</tr>
<tr>
<td><img src="images/7up.png" width="192" height="22"></td>
</tr>
<tr>
<td><img src="images/8up.png" width="192" height="22"></td>
</tr>
<tr>
<td><img src="images/9up.png" width="192" height="22"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="left-menu-padding">&nbsp;</td>
</tr>
<tr>
<td><img src="images/side-link-bottom.gif" alt="The Venetian Hotel" width="204" height="29"></td>
</tr>
</table></td>
<td width="73%" align="right" valign="top" id="pic-padding"><img src="images/pic.jpg" alt="The Venetian Hotel" width="565" height="389" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="27,261,290,370" href="#" alt="The Venetian Hotel">
</map></td>
</tr>


</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="57%" valign="top" id="padding-left-top"><table width="409" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%" align="left" valign="top"><img src="images/welcome-left.gif" alt="Welcome to The Venetian Hotel" width="11" height="277"></td>
<td width="89%" valign="top" id="welcome-bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="welcome-title">Welcome to our web site ! &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/arrow.gif" alt="Arrow" width="11" height="11"></td>
</tr>
<tr>
<td colspan="2" class="welcome-text"><span class="text-bold">Lorem ipsum dolor</span> sit amet, consectetuer adipiscing elit. Proin nec lacus dapibus dolor ultricies dignissim. Vivamus egestas sagittis enim. In viverra elit at nunc. In hac habitasse platea dictumst. Pellentesque vulputate molestie lectus. Phasellus eu platea dictumst. Pellentesque vulputate molestie lectus. Phasellus eu </td>
</tr>
<tr>
<td width="44%" valign="top" class="welcome-text"><span class="text-bold">Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet,consectetuer adipiscing elit.adipiscing elit.Lorem ipsum dolor sit amet,consectetuer adipiscing elit.</td>
<td width="56%" valign="top"><img src="images/welcome-pic.gif" alt="Welcome to The Venetian Hotel" width="228" height="146"></td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td valign="top" class="more-padding"><a href="#" class="morelink">more</a></td>
</tr>
</table></td>
<td width="9%" align="left" valign="top"><img src="images/welcome-right.gif" alt="Welcome to The Venetian Hotel" width="9" height="277"></td>
</tr>
</table></td>
<td width="43%" rowspan="2" align="left" valign="top" id="pic-padding"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="top"><img src="images/pic-bottom.gif" alt="The Venetian Hotel" width="325" height="72"></td>
</tr>
<tr>
<td valign="top"><img src="images/right-pic.gif" alt="The Venetian Hotel" width="340" height="169"></td>
</tr>
<tr>
<td height="92" valign="top"><span class="special-offer-text1">Special offer</span>
<p class="special-offer-text2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nec lacus dapibus dolor ultricies dignissim. Vivamus egestas sagittis enim. In viverra elit at nunc. In hac habitasse platea dictumst. Pellentesque vulputate molestie lectus. Phasellus eu </p></td>
</tr>
<tr>
<td valign="top" class="spl-offer-more-padding"><a href="#" class="morelink">more</a></td>
</tr>
<tr>
<td valign="top" class="copyright">&copy; Copyright Information Goes Here. All Rights Reserved.</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="padding-left-top"><table width="409" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%" align="left" valign="top"><img src="images/booking-left.gif" alt="The Venetian Hotel" width="9" height="119"></td>
<td width="90%" valign="top" id="booking-bg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="booking-padding">Book a Room &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/arrow2.gif" alt="Arrow" width="11" height="11"></td>
</tr>
<tr>
<td><form name="form1" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" valign="bottom" class="booking-padding">Check in </td>
<td width="55%" valign="bottom" class="list-padding"><label>
<select name="select" class="list">
<option selected>------------ Date -----------</option>
</select>
</label></td>
<td width="20%">&nbsp;</td>
</tr>
<tr>
<td valign="bottom" class="booking-padding">Check out </td>
<td valign="bottom" class="list-padding"><label>
<select name="select2" class="list">
<option selected>------------ Date -----------</option>
</select>
</label></td>
<td valign="bottom"><label>
<input name="Submit" type="submit" class="button" value="submit">
</label></td>
</tr>
</table>
</form> </td>
</tr>

</table></td>
<td width="8%" align="left" valign="top"><img src="images/booking-right.gif" alt="The Venetian Hotel" width="9" height="119"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/bottom.gif" alt="The Venetian Hotel" width="778" height="17"></td>
</tr>
</table>
<br>
<br>
</div></body>
</html>

PotterHarry
12-19-2008, 06:39 PM
Thanks edbr. I`m starting to wonder if it's my browser which is the problem. I have pasted your code into a new page. In Dreamweaver it looks spot on, but in explorer the buttons are displaced 3 cms to the left?

PotterHarry
12-19-2008, 07:22 PM
I can't spot any differences in that code edbr?