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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    53
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How can I center the items that appear in the ul.

    Hi, I have this css on my web site. How can I center the items that appear in the ul. The code below has my item menu floating to left and right. How can I put them in the center.

    Code:
    h1 {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:16px;
    	font-weight:bold;
    	margin:0;
    	padding:0;
    	}
    
    hr {
    	border:none;
    	border-top:1px solid #CCCCCC;
    	height:1px;
    	margin-bottom:25px;
    	}
    
    #stylefour{
    	position:relative;
    	display:block;
    	height:39px;
    	font-size:11px;
    	font-weight:bold;
    	background:transparent url(bgOFF.gif) repeat-x top left;
    	font-family:Arial,Verdana,Helvitica,sans-serif;
    	border-top:4px solid #656b61;
    	}
    
    #stylefour ul{
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	width:auto;
    	}
    
    #stylefour ul li{
    	display:block; 
    	float:left;
    	margin:0;
    	}
    
    #stylefour ul li2{
    	display:block; 
    	float:right;
    	margin:0;
    	}
    
    
    #stylefour ul li a,#stylefour ul li2 a{
    	display:block;
    	float:left;
    	color:#666;
    	text-decoration:none;
    	padding:11px 20px 0 20px;
    	height:23px;
    	background:transparent url(bgDIVIDER.gif) no-repeat top right;
    	}
    
    #stylefour ul li a:hover,#stylefour ul li a.current,#stylefour ul li2 a:hover,#stylefour ul li2 a.current{
    	color:#656b61;
    	background:#ffff99 url(bgON.gif) no-repeat top right;
    	}
    Thank you, jimanji.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jimanji,

    The easiest way would be to give your ul a width and center it with margins.
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jimanji (12-16-2010)

  • #4
    New Coder
    Join Date
    Oct 2010
    Posts
    53
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you both very much. I didn't knew it will be that easy. But I have about 2-3 months when I started using css. It's a beautiful language.

  • #5
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Seems like you got it but I'm always looking into CSS menu techniques too. If you want, you could look into my menu that I believe is doing what you want. The CSS can be found here cineweekly.com/core-style.css and the menu parts are on the bottom labeled /* START Menu */ and the submenus are labeled as well. I think it's easy for a beginner to understand and an example may help you out. At least I'm a visual learner.

  • #6
    New Coder
    Join Date
    Oct 2010
    Posts
    53
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by cineweekly.com View Post
    I think it's easy for a beginner to understand and an example may help you out. At least I'm a visual learner.
    You are right, you example is very useful. It also has a nice dropdown css code.
    Thank you!

  • #7
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    No problem. It's been great for me and took a while to find all the pieces I needed to put it together but know that the submenus look slightly off in Opera, but other than that no problems. I might look into fixing it but it's not really a problem at all.


  •  

    Posting Permissions

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