Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Flavio on May 31, 2009 03:35
open dhtmlx forum
WYSWYG messed up with div positions

Hi...
I have a small pb when I try designing my pages and insert tabbar inside existing divs.... probably the lack of experience.... basically I have a design with different divs.... I want to use the tabs with html only for SEO purposes so what i did is positionned the tabbar div in absolute position so it fits in my design...everything comes out fine in the browser but the pb I have is that everything is messed up within dreamweaver, making it difficult to work in WYSIWYG mode...I am also worried if I give the page to someone to work on it .... so is it only a div positionning problem within the code or is there a better way to do this ? Thanks to anyone who would be kind enough to look at my coding see what can be improved...
Many thanks

<>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="codebase/dhtmlxcommon.js"></script>
    <script src="codebase/dhtmlxtabbar.js"></script>
<script src="codebase/dhtmlxtabbar_start.js"></script>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxtabbar.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
.Style2 {
    font-family: Arial, Tahoma;
    font-size: 12px;
}
.Style11 {color: #FFFFFF}
.Style12 {color: #CC0000}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:hover {
    color: #CC0000;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="sidebar_left">
<div id="logo">
<div id="flags">
<div align="center"><a href="#"><img src="images/en.gif" alt="english flag" width="20" height="14" /></a> <a href="#"><img src="images/es.gif" alt="hi spanish" width="20" height="14" /></a> <a href="#"><img src="images/fr.gif" alt="hostel french flag" width="20" height="14" /></a></div>
</div>
</div>


<div id="facebook"><a href="#"><img src="images/sidebar_bottom.jpg" alt="facebook link" width="218" height="51" /></a></div>
<div id="activities">
<div id="sidebar_hi"><img src="images/sidebar1.jpg" alt="hostel international" width="218" height="71" /></div>
<img src="images/sidebar2.jpg" alt="cordoba hostel activities" width="218" height="132" /></div>
<div id="launho"><a href="#"><img src="images/launho.jpg" alt="cordoba hostel argentina university" /></a></div>

<div id="sidebar_visa"></div>
<div class="Style3" id="welcome">
<div id="intro"><img src="images/welcome.jpg" width="305" height="31" /></div>
</div>
</div>
<div id="links_right">
<p><a href="#">Cordoba Backpackers Hostel Activities</a><br />
<a href="#">Book with Hostel International</a><br />
<a href="#">Book with Hostelworld</a><br />
<a href="#">See Cordoba Backpackers Photos</a><br />
<a href="#">Our Adress & Map</a><br />
</p>
</div>
<div class="Style4" id="bottommenu">
<div align="center">Home <span class="StyleBottom">|</span> Tours <span class="StyleBottom">|</span> Activities <span class="StyleBottom">|</span> Reservations <span class="StyleBottom">|</span> Photos <span class="StyleBottom">|</span> Services <span class="StyleBottom">|</span> Contact <span class="StyleBottom">|</span> French <span class="StyleBottom">|</span> Spanish</div>
</div>
<div id="a_tabbar" class="dhtmlxTabBar" imgpath="codebase/imgs/" tabstyle="modern" offset="0" mode="top" style="width:540px; height:150px; position:absolute; left:216px; top:540px ; overflow:hidden" skinColors="#000000,#000000" align="right" />
<div class="Style2" id="a1" name="HI INTERNATIONAL CARD">
<table width="100%" border="0">
<tr>
<td><img src="images/internacional.png" width="180" height="116"></td>
<td><span class="Style11"><strong><br />
HOSTEL INTERNATIONAL <span class="Style12">INTERNATIONAL CARD</span></strong> Valid for 1 year. It allows you to get a special member price, in the hostels of Argentina and the world. It is for ArgentinIans and foreigners who travel around the world, for
people over 16 years old. <br />
<br />
<a href="#"><img src="images/get_it.gif" width="85" height="21" /></a></span></td>
</tr>
</table>
</div>
<div id="a2" class="Style2" name="HI NATIONAL CARD"> <table width="100%" border="0">
<tr>
<td><img src="images/nacional.png" width="180" height="116"></td>
<td><p class="Style11"><strong>HOSTEL INTERNATIONAL <span class="Style12">NATIONAL CARD</span></strong> Valid for 1 year. It allows you to get a special member price, in the hostels of Argentina and the world. It is for ArgentinIans and foreigners who travel around the world, for
people over 16 years old. </p>
<p class="Style11"><a href="#"><img src="images/get_it.gif" width="85" height="21" /></a></p></td>
</tr>
</table></div>
</div>
<div class="Style2" id="introtext">
<p><br />
<strong>HOSTEL CORDOBA BACKPACKERS</strong> member of <strong>HOSTELLING INTERNATIONAL ARGENTINA (HI)</strong> is llocated in the center, one of the safest areas of
<strong>CORDOBA in ARGENTINA</strong>.Two blocks from the main square and the historic center.
<br />
</p>
<p> Pleasant stay and excellent location in <strong>ARGENTINA</strong>.

<strong>HOSTEL CORDOBA BACKPACKERS </strong>offers <strong>private, double, triple rooms with private or sharing bathrooms</strong>. All rooms have got <strong>air condition an TV</strong>. <br />
<br />
Our 6, 5 and 4 bed rooms are equipped with personal shelves and lockers.have got a terrace in THE HOSTEL , a warm place with chairs and tables and a beautiful view to the Santo Domingo church. One of the most important of the city.

<br />
<br />
Our bar is downstairs,this area also has pool game and
free access to<strong> WIFI or internet</strong> from our computers, <strong>TV, DVD</strong> and very nice music. </p>
</div>
<div id="index_climbingwall"></div>

<div id="gallery"><img src="images/gallery.jpg" alt="hostel cordoba gallery" width="305" height="124" /></div>
<div id="header_flash">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','544','height','135','src','flash/header','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/header' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="544" height="135">
<param name="movie" value="flash/header.swf" />
<param name="quality" value="high" />
<embed src="flash/header.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="544" height="135"></embed>
</object>
</noscript></div>
<div id="menu">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','544','height','49','movie','flash/menu','quality','high' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="544" height="49">
<param name="movie" value="flash/menu.swf" />
<param name="quality" value="high" />
</object>
</noscript>
</div>
</div>
</body>
</html>

</>
Answer posted by Support on Jun 01, 2009 07:38
The code which you are using is correct and must works correctly on its own. 
Unfortunately its hard to predict how page processed by dreamweaver in WYSIWYG mode, so while working correctly in browser - it may be rendered not so well in WYSIWYG mode - this is common problem for complex javascript-based elements, which are not purposed for such use-case.