Solved

centering text in css menu responsive

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

776 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