SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with stretchy table!

    I am trying to build a table ... oops I mean navigation strip ... that does not require table cells, yet stretches the cells across 100% of the screen.

    Problem is that the table needs two rows, and in the far right one, a log which spans both these rows. the logo cell must be fixed, the others stretchy

    I got a fixed width version to play ball, but cannot get the stretchy version to work.

    Any suggestions?

    Here's some code for you to copy-and-paste

    Code:
    <style>
    * {font-family:verdana;}
    body {margin:2px;margin-left:4px;}
    .topRow, .bottomRow, .topLinks {text-align:center;display:inline;width:17%;margin-right:2px;margin-bottom:2px;;font-weight:bold;font-size:10px;padding:1px;height:15px;}
    .topRow	{background:#006;}
    .bottomRow {background:#f00;}
    a, a:link, a:visited, a:hover {color:#fff;text-decoration:none;}
    #logo {float:right;}
    #mainNav {float:left;}
    </style>
    </head>
    <body>
    <div id="mainNav">
    	<div id="logo"><a href="/default.htm"><img src="images/logo161.gif" width="171" height="32" alt="Logo" border="0"></a></div>
    	<div class="topRow"><a href="http://search/search/">Search</a></div>
    	<div class="topRow"><a href="/Homepage/forms/default.htm">A to Z</a></div>
    	<div class="topRow"><a href="/personnel/">Phone Book</a></div>
    	<div class="topRow"><a href="/sections/help/">Help</a></div>
    	<div class="topRow"><a href="/comments/feedback.asp">Contact Us</a></div>
    	<div class="topRow"><!--empty-->&nbsp;</div>
    	<br />
    	<div class="bottomRow"><a href="/homepage/automenu/Frameset_360.htm">Society</a></div>
    	<div class="bottomRow"><a href="/homepage/automenu/Frameset_361.htm">Business&nbsp;Results</a></div>
    	<div class="bottomRow"><a href="/homepage/automenu/Frameset_362.htm">Community</a></div>
    	<div class="bottomRow"><a href="/homepage/automenu/Frameset_255.htm">Products</a></div>
    	<div class="bottomRow"><a href="/sections/employees/">Employees</a></div>
    	<div class="bottomRow"><a href="/homepage_demo/automenu/Frameset_363.htm">Reference</a></div>
    </div>
    If I drop the width down to 16% the nav fits, but the gap between the nav and the logo is unacceptable - it must be 2 pixels also.

    All help greatly appreciated!

    PS - this is for an intranet and the audience have ie5 on pc only, so cross-browser hacks are not necessary. Not that I normally advocate this, but for this task it's not worth trying to make it work with netscape (all versions), opera and so on. Thought that might help!
    Last edited by lloydi; Nov 13, 2002 at 04:33.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback


Bookmarks

Posting Permissions

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