Solved

centering text in css menu responsive

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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

615 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