Solved

centering text in css menu responsive

Posted on 2012-04-06
3
356 Views
Last Modified: 2012-04-08
I'm trying to center type in a css menu but I need to use percentages instead of  px. It works to some extent but when you move the browser to expand the type becomes off center again. Any suggestions


      .menus      {    
                  width: 100%;    
                  background-color: #333;
                              }

                  .menus ul{  
                        margin: 0;
                        padding: 0;    
                        float: left;
                        width: 100%;
                              }  

                  .menus ul li{    
                         display: inline;
                  }  
                  
                  .menus ul li a{    
                        float: left;
                        text-decoration: none;
                        width: 100%;    
                        color: white;        
                        background-color: #333;
                        line-height:180%;
                        font-size: 75%;                  
                  }  
                  
                  .menus ul li a:visited{    
                        color: white;
                  }  
                  
                  .menus ul li a:hover, .menu ul li .current{      
                       color: #fff;    
                        background-color:#0b75b2;
                  }

                  .menus ul li.broad a{
                        background-color:#8eb161;
                        width: 22%;
                        padding-left: 3%;
                  }

                  .menus ul li.broad a:hover{
                        background-color:#667e46;
                        width: 22%;
                        padding-left: 3%;
                  }

                  .menus ul li.fun a{
                        background-color:#b885de;
                        width: 20%;
                        padding-left: 5%;
                  }

                  .menus ul li.fun a:hover{
                        background-color:#7a5a91;
                        width: 20%;
                        padding-left: 5%;
                  }

                  .menus ul li.cor a{
                        background-color:#cc6666;
                        width: 22%;
                        padding-left: 3%;
                  }
                  .menus ul li.cor a:hover{
                        background-color:#a63a3a;
                        width: 22%;
                        padding-left: 3%;
                  }
                  .menus ul li.profit a{
                        background-color:#468fd8;
                        width: 22%;
                        padding-left: 3%;  
                  }

                  .menus ul li.profit a:hover{
                        background-color:#4079b2;
                        width: 22%;
                        padding-left: 3%;
                  }







<div class="menus">
<ul>
<li class="broad"><a href="#">BROADCAST</a></li>
<li class="fun"><a href="#">FUN STUFF</a></li>
<li class="cor"><a href="#">CORPORATE</a></li>
<li class="profit"><a href="#">NON-PROFIT</a></li>

</ul>
</div>
0
Comment
Question by:designaire
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 14

Expert Comment

by:EMB01
ID: 37819091
I don't understand what you may be trying to achieve.  Can you not just use "text-align: center" like so (?):

                  .menus ul li a{    
                        text-align: center;
                        width: 100%;    
                        color: white;        
                        background-color: #333;
                  }
0
 
LVL 16

Accepted Solution

by:
HagayMandel earned 195 total points
ID: 37821423
This does it:

The CSS:
<style type="text/css">
.menus {     
	  width: 100%;     
	  background-color: #333; 
} 
.menus ul{   
	margin: 0;
	padding: 0;     
	float: left;
	width: 100%;	
}  
.menus ul li{    
	display: inline;
	text-align:center;		
}   
	  
.menus ul li a{     
	float: left; 
	text-decoration: none; 
	width: 25%;    
	color: white;         
	background-color: #333;
	line-height:180%;
	font-size: 75%;                  
}     
.menus ul li a:visited{     
	color: white;
}   	  
.menus ul li a:hover, .menu ul li .current{      
	color: #fff;     
	background-color:#0b75b2;
} 
.menus ul li.broad a{
	background-color:#8eb161;	
}
.menus ul li.broad a:hover{
	background-color:#667e46;	
}
.menus ul li.fun a{
	background-color:#b885de;	   
}
.menus ul li.fun a:hover{
	background-color:#7a5a91;	
}
.menus ul li.cor a{
	background-color:#cc6666;			
}
.menus ul li.cor a:hover{
	background-color:#a63a3a;				
}
.menus ul li.profit a{
	background-color:#468fd8;	
}
.menus ul li.profit a:hover{
	background-color:#4079b2;				
}
</style>

Open in new window


The HTML:
<div class="menus">
  <ul>
    <li class="broad"><a href="#">BROADCAST</a></li>
    <li class="fun"><a href="#">FUN STUFF</a></li>
    <li class="cor"><a href="#">CORPORATE</a></li>
    <li class="profit"><a href="#">NON-PROFIT</a></li>
  </ul>
</div>

Open in new window

0
 

Author Comment

by:designaire
ID: 37821667
Yes, I guess I was being stupid...thought it didn't work for some reason
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question