Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Nov 2008
    Posts
    3
    Member #
    17763
    Hey everyone, thanks for taking the time to read this. I'm having a problem with my navigation bar layout. It's a simple problem, but I can't figure out how to solve it. What I need is my navigation bar to have tabs that will list horizontally, which works in this code:

    Code:
    <html>
    	<head>
    		<style type="text/css">			
    			#portalPageHeader {
    				background-color: #000000;
    				overflow: hidden;
    			}
    			
    			div.tab {
    				float: left;
    				background-color: #C0C0C0;
    				margin: 2px 5px 1px 5px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="portalPageHeader">
    			<div id="list">
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    			</div>
    		</div>
    	</body>
    </html>
    (See attachment 1)

    ...unfortunately, some users will have a lot of tabs. When the user has too many tabs (and yes, some users need to have that many tabs) to fit the window, it wraps. (See attachment 2)

    So I needed to figure out how to make the div#list not wrap the floats. What I came up with was making the div.tab display being inline instead of floating, and the div#list would have nowrap, like so:

    Code:
    <html>
    	<head>
    		<style type="text/css">			
    			#portalPageHeader {
    				background-color: #000000;
    			}
    			
    			div#list {
    				white-space: nowrap;
    			}
    			
    			div.tab {
    				display: inline;
    				background-color: #C0C0C0;
    				margin: 5px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="portalPageHeader">
    			<div id="list">
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    			</div>
    		</div>
    	</body>
    </html>
    But, as you can see in attachment 3, they nicely stay on the same line but they extend past the #portalPageHeader div! Shouldn't the #portalPageHeader div expand to contain them? How can I make it expand? Or is there any other way to make my page expand to contain a single line of navigation tabs?

    Thanks in advance =)

    - Evan
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    First of all, always declare a doc-type of some kind, otherwise, the browser
    automatically goes into "quirks mode".

    Since you're OK with the horizontal scroll bar, and your site may be wider than
    some users' browser windows, you should just declare the body a defined width.

    It will never 'shrink' to anything smaller than 1000 (in my example).
    All that happens is the horizontal scroll bar appears when it get less than 1000 pixels.
    Everything on the page itself remains unaffected.


    Code:
    <!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">
    <title>This is a descriptive title of my page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<head>
    		<style type="text/css">
    body{
    width:1000px;
    }			
    			#portalPageHeader {
    				background-color: #000000;
    			}
    			
    			div#list {
    				white-space: nowrap;
    			}
    			
    			div.tab {
    				display: inline;
    				background-color: #C0C0C0;
    				margin: 5px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="portalPageHeader">
    			<div id="list">
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    				<div class="tab">Here's a tab</div>
    			</div>
    		</div>
    	</body>
    </html>



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:09 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com