Solved

centering text in css menu responsive

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
displaying 3 dropdownlist  horizontally 3 31
Clear input text 15 26
Change how page is organized 3 35
Use Mid in Html 6 21
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

713 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