A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: aligning div tag

  1. #1
    Senior Member da_hammer's Avatar
    Join Date
    Jul 2003
    Location
    Ritchie Street.
    Posts
    294

    aligning div tag

    Hi,
    Am having a align problem / my bad placement of div in the markup, so i arrive my content area is vertically moving down.. to the bottom of an another div tag.

    here is the markup am using:
    ----------------------------

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Pohoc: Hospitality &amp; Tourism</title>
    <link href="stylesheet/designertheme.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #banner{
    width:770px;
    }
    #navigation{
    width:350px;
    position:relative;
    top:10px;
    left:10px;
    }
    #contentarea{
    position:relative;
    vertical-align:top;
    left:10px;
    z-index:3;
    }
    #category{
    position:relative;
    width:500px;
    left:70px;
    }
    #explore{
    position:relative;
    width:150px;
    left:570px;
    border:dotted;
    border-color:#006699;
    z-index:1;
    }
    </style>
    </head>
    <body>
    <table width="770" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td bgcolor="#FF9933"><img src="images/top_round.gif" alt=""/></td>
    </tr>

    <tr><!-- here ya go with everything in the layout-->
    <td bgcolor="#FFFFFF">
    <div id="pohoclogo"><a href="index.htm"><img src="images/pohoc_logo.jpg" alt="POHOC: Hospitality &amp; Tourism" width="189" height="71" border="0"/></a>
    <div id="banner"><img src="images/hotel_page_banner.jpg" alt="Hotel Bookings Unlimited.." />
    <div id="navigation"><a href="index.htm" class="topnavlinks">Home</a> | <span class="topnavlinkactive">Hotels</span> | <a href="travel.htm" class="topnavlinks">Travel</a> <a href="food.htm" class="topnavlinks">Food</a> | <a href="bnb.htm" class="topnavlinks">BNB</a><div id="explore"><table width="170" border="0" cellspacing="2" cellpadding="2">

    <tr>
    <td><img src="images/promoting_india.jpg" alt="Promoting India" /></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>

    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>

    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    </div><div id="contentarea"><p class="runningcopy" align="left">POHOC is the ultimate guide to economy travel - be it for backpackers or any other budget travellers in India.</p>
    <p class="runningcopy">In addition, POHOC is an associate of the <a href="http://www.fhrai.com/hotelsrch.asp" class="runningyellowlinks">FHRAI</a> and is therefore uniquely positioned to offer reservation services with almost any listed hotel in the country.</p>

    <p><a href="http://www.fhrai.com/hotelsrch.asp" class="runningyellowlinks">Check here to find list of hotels in india &gt;&gt;</a></p><div id="category"><table width="84%" border="0" cellspacing="8" cellpadding="8">

    <tr>
    <td valign="top"><img src="images/budget_hotel_pic.jpg" alt="Budget Hotels" /><h4 class="h4header">Budget Hotels</h4><p class="runningcopy">The instant choice of any economy seeking individuals or groups.</p></td>
    <td valign="top"><img src="images/jungle_lodges_pic.jpg" alt="Jungle Lodges" /><h4 class="h4header">Jungle Lodges</h4><p class="runningcopy">Wild havens situated in deep woods or by riversides - nature untouched by civilization.</p></td>
    <td valign="top"><img src="images/rustic_mansions_pic.jpg" alt="Rustic Mansions" />
    <h4 class="h4header">Rustic Mansions</h4><p class="runningcopy">Ancient homes with all their antiquity and old world charm intact - carefully identified for you by POHOC.</p></td>
    </tr>

    </table></div>
    <p><a href="#" class="runningyellowlinks">Proceed to Reserve your choice >></a><br />
    <span class="runningcopy">(Require POHOC account, new users <a href="#" class="runningyellowlinks">Click here to Sign up.</a>)</span></p>
    </div></div></div></div>
    </td>
    </tr><!--end of here ya go with everything in the layout-->
    <tr>
    <td bgcolor="#FF9933"><img src="images/bottom_round.gif" alt=""/></td>
    </tr>

    </table>

    </body>
    </html>

    --------------------------------------------------------

    Am sure someone who is a developper can spot the mistake instantly ~ looking forward for a reply. Thanks in advance.

    hammer.

  2. #2
    Retired Mod aversion's Avatar
    Join Date
    Jun 2000
    Location
    insomnia
    Posts
    7,917
    You have three elements, including the contentarea and explore DIVs that are relatively positioned. Relatively positioned elements remain within the flow of document space with other relatively positioned elements.

    If you, just for example, change the positioning of the explore DIV to absolute the contentarea will move up as the other element moves out of the flow.

    I recommend you redo the layout with floats though to be honest.

  3. #3
    Senior Member da_hammer's Avatar
    Join Date
    Jul 2003
    Location
    Ritchie Street.
    Posts
    294
    Thanks & very kind of you for the advice.

    hammer.

  4. #4
    Senior Member drunknbass's Avatar
    Join Date
    Feb 2004
    Posts
    132
    why are you using tables and divs?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center