SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tab navigation help

    I am struggling with a tab design. The border at the top of the content area and the border at the bottom of the tabs is giving me trouble.

    This is what I have so far.

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    <style type="text/css">
        #tabs{
            padding: 0;
            margin: 0;
        }
        #tabs ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #tabs ul li{
            display: inline;
            margin: 0;
        }
        #tabs ul li a{
            padding: 5px 16px;
            background-color: #c2d9f6;
            float: left;
            text-decoration: none;
            border: solid 1px #898c95;
            border-left: 0;
            margin: 0;
        }
        #tabs ul li a:hover{
            background-color: #c2d9f6;
            color: #7F9298;
            text-decoration: none;
            border-bottom: solid 1px #898c95;
        }
        #tabs ul li a.active{
            background-color: #eaf3ff;
            border: solid 1px #898c95;
            color:#000;
        }
        #content{   
            background-color: #eaf3ff;
            clear: both;
            color: #000;
            padding: 10px;
            border: solid 1px #898c95;
        } 
    </style>
    </head>
    <body>
        <div id='tabs'>
            <ul>
                <li><a href='#' class="active">Tab 1</a></li>
                <li><a href='#'>Tab 2</a></li>
                <li><a href='#' >Tab 3</a></li>
                <li><a href='#'>Tab 4</a></li>
                <li><a href='#'>Tab 5</a></li>
            </ul>
        </div>
        <div id="content">
            Content
        </div>
    </body>
    </html>
    I can't figure out how to get it so there is no border on the bottom of the tab or at the top of the content area. I also can't figure out how to get the left and right borders to flow nicely into the top border of the content area.

    Any help is appreciated.

    I am a programmer trying to learn this css stuff and would welcome any recommendations for worthwhile books.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You can get rid of that gap between the tabs and the main content area by zeroing out the body like this. Also the tabs can appear 'over' the top-border of the content area by relatively positioning all the tabs.

    Kinda hard to explain (Plus... It's late)

    Anyway, try this markup out and let us know if it works:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    	body {
    	margin:0;
    	padding:0;
    	}
    	#container {
    	padding: 20px;
    	}
        #tabs{
    	padding: 0;
    	margin: 0;
    	position: relative;
        }
        #tabs ul{
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	display: block;
    	border-left: solid 1px #898c95;
    	width: 100&#37;;
    	float: left;
    	position: relative;
    	top: 1px;
        }
        #tabs ul li{
    	display: inline;
    	margin: 0;
        }
        #tabs ul li a{
    	padding: 5px 16px;
    	background-color: #c2d9f6;
    	float: left;
    	text-decoration: none;
    	margin: 0;
    	border-right: solid 1px #898c95;
    	border-top: solid 1px #898c95;
        }
        #tabs ul li a:hover{
    	background-color: #c2d9f6;
    	color: #7F9298;
    	text-decoration: none;
        }
        #tabs ul li a.active{
    	background-color: #eaf3ff;
    	color:#000;
    	position: relative;
    	padding: 6px 16px 5px 16px;
        }
        #content{   
    	background-color: #eaf3ff;
    	clear: both;
    	color: #000;
    	padding: 10px;
    	border: solid 1px #898c95;
        } 
    </style>
    </head>
    <body>
    <div id="container">
    
        <div id='tabs'>
            <ul>
                    <li><a href='#' class="active">Tab 1</a></li>
                    <li><a href='#'>Tab 2</a></li>
                    <li><a href='#' >Tab 3</a></li>
                    <li><a href='#'>Tab 4</a></li>
                    <li><a href='#'>Tab 5</a></li>
            </ul>
        </div>
        
        <div id="content">
        Content
        </div>
        
    </div>
    </body>
    </html>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked beautifully, thank you.


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
  •