Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: centering tabs

  1. #1
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts

    centering tabs

    How do i center my tabs?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
     "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    
    <title>Untitled Document</title>
    
    
    <link rel="stylesheet" type="text/css" href="css/main.css">
    
    
    </head>
    
    
    <body>
    
     
    
    <div id="banner" align="center">
    
    <img src="images/bannerjay.jpg"  alt="">
    </div>
    
    
    
    <ul id="nav">
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Designes</a></li>
    	<li><a href="#">Contact</a></li>
    </ul>
    
    
    
    </body>
    
    </html>


    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    
    body {
    	margin:auto;   
     }
    
    
    #banner{
    	alignment-adjust:central;
     }
    
    
    #nav li {
    	float: left;
    	 }
    
    #nav {
    	width: 100%;
    	float: left;
    	margin: 0 0 3em 0;
    	padding: 0;
    	list-style: none;
    	background-color: #BBA359;
    	border-bottom: 1px solid #ccc; 
    	border-top: 1px solid #ccc;
    	 }
    	
    	#nav li a {
    		display: block;
    		padding: 8px 15px;
    		text-decoration: none;
    		font-weight: bold;
    		color: #000;
    		border-right: 1px solid #ccc;
    		 }
    		
    	#nav li a:hover {
    		color: #BBA359;
    		background-color: #000;
    		 }

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    margin left:auto
    margin right: auto

    that should work, or place the nav within another container div that is centered similarly, Im a novice but I *think* that should work.
    however, if you are you sure you want the list items to float left within centered tabs?

  • #3
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I tryed that but didn't work

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    5
    Thanked 2 Times in 2 Posts
    You can use:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>

    <div id="banner" align="center">
    <img src="images/bannerjay.jpg" alt="">
    </div>

    <center>
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Designes</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </center>
    </body>
    </html>
    @charset "UTF-8";
    /* CSS Document */


    body {
    margin:auto;
    }


    #banner{
    alignment-adjust:central;
    }


    #nav li {
    display: inline-block;
    }

    #nav {
    width: 100%;
    display: inline-block;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #BBA359;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    }

    #nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #000;
    border-right: 1px solid #ccc;
    }

    #nav li a:hover {
    color: #BBA359;
    background-color: #000;
    }
    Last edited by miennh_coding; 06-05-2012 at 04:02 AM.

  • #5
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Tryed that and still not centering.

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Charisma View Post
    Tryed that and still not centering.
    Weird. Its works with me.

  • #7
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    5
    Thanked 2 Times in 2 Posts
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    <head>
    <style>
    @charset "UTF-8";
    /* CSS Document */


    body {
    margin:auto;
    }

    #banner{
    alignment-adjust:central;
    }
    #nav li {
    display: inline-block;
    }
    #nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #BBA359;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    }

    #nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #000;
    border-right: 1px solid #ccc;
    }

    #nav li a:hover {
    color: #BBA359;
    background-color: #000;
    }
    </style>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
    <div id="banner" align="center">

    <img src="images/bannerjay.jpg" alt="">
    </div>
    <center>
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Designes</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </center>
    </body>
    </html>
    create a html file with content above.

  • #8
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I've tried all this and it is centering it in my page but my links are vertical and not horizontal.

  • #9
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I'm reposting my code because I have been playing with it so much. I think I screwed it up now.

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    
    body {
    	margin:auto;   
     }
    
    
    #banner{
    	alignment-adjust:central;
     }
    
    #nav li {
    	float:left;
    	 }
    
    #nav {
    	width: 100%;
    	float: left;
    	margin: 0 0 3em 0;
    	padding: 0;
    	list-style: none;
    	background-color: #BBA359;
    	border-bottom: 1px solid #ccc; 
    	border-top: 1px solid #ccc;
    	 }
    	
    	#nav li a {
    	
    		display: block;
    		padding: 8px 15px;
    		text-decoration: none;
    		font-weight: bold;
    		color: #000;
    		border-right: 1px solid #ccc;
    		 }
    		
    	#nav li a:hover {
    		color: #BBA359;
    		background-color: #000; }


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
     "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    
    <title>Untitled Document</title>
    
    
    <link rel="stylesheet" type="text/css" href="css/main.css">
    
    
    </head>
    
    
    <body>
    
     
    
    <div id="banner" align="center">
    
    <img src="images/bannerjay.jpg"  alt="">
    </div>
    
    
    
    <ul id="nav">
    
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Designes</a></li>
    	<li><a href="#">Contact</a></li>
    </ul>
    
    </div>
    
    </body>
    
    </html>


  •  

    Posting Permissions

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