Solved

centering text in css menu responsive

Posted on 2012-04-06
3
334 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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.
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 embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

896 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now