• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 70
  • Last Modified:

Changing li a width from px to percentage

Hello;

I try change the width of e.g:
li.health a {
	color:#ffffff;
	 background-color: #0a0a5c;
	  font-weight:bold;
	   font-size: 12px;
	    height:35px; 
		width:90px;
		}

Open in new window

from px to % according the amount of container width(%90)but cannot.
You can see this link:
http://jsfiddle.net/jamshidi/6DEv9/169/
Thanks for your help
0
MOSTAGHASSI
Asked:
MOSTAGHASSI
  • 7
  • 6
2 Solutions
 
Julian HansenCommented:
What are you trying to achieve - I don't understand your question.

In your fiddle you have the width: 90% - what is it not doing that you were wanting it to do?
0
 
Walid MESSAOUDIWeb DevelopperCommented:
It doesn't work because you didn't set the width of the parent " li .health ", then when you set the width of " a  width : 90%" it will take the 90% of the width of her parent balise.
0
 
MOSTAGHASSIAuthor Commented:
Thanks,my mean is changing the width  in this part below(and another li)  from px to %:
we can calculate 90px to percentage and suppose it is 12% but it doesn't work .

li.health a {
	color:#ffffff;
	 background-color: #0a0a5c;
	  font-weight:bold;
	   font-size: 12px;
	    height:35px; 
		width:90px;
		}

Open in new window


please let me know that which part
0
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!

 
MOSTAGHASSIAuthor Commented:
I lost the previous fiddle,you can see it in this link:
https://jsfiddle.net/jamshidi/bLLrqkws/
0
 
Julian HansenCommented:
You have just repeated your opening question.

% of what - screen - fixed container?

Not sure why you want to style your width on your li elements surely if this is a menu you just put constant padding on either side of the <a> and let the width sort itself out - otherwise for short menu items you have a lot of space around the text and on longer items no space

I am trying to figure out what you are trying to do and why.
0
 
Julian HansenCommented:
I just looked at your fiddle, a couple of things

You are styling each li a individually. Rather create one style for the li a and then override the width using the class name.

Secondly, a % width is relative to its container - setting that on the <a> element will just be relative to the <li> - which is why you are having the problem Rather set the width on the <li> element something like this
.navcontainer ul li {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: block;
  float: right;
  margin-right: 0;
  overflow: hidden;
  width: 12%;  /* SET WIDTH HERE */
}

Open in new window

If you need to override for specific elements then do so using that elements class
.navcontainer ul li.artandculture {
  width: 15%;
}

Open in new window

0
 
MOSTAGHASSIAuthor Commented:
In  'navcontainer ul' the width was before 1000px,then i changed it to percentage -->100%,now i want that change the width of elements inside that container from px to %.
0
 
Julian HansenCommented:
Yes - so make the <li> elements a percentage width and the li a width: 100%. That should do what you want. See my last post.
0
 
MOSTAGHASSIAuthor Commented:
Thanks,yes, now it is ok.
Do you think that if i keep my codes as i posted in fiddle,on devices with different resolution i encounter problem?

Or you think that i change it from pixel  to % as you suggested and i tested(it is ok)?
0
 
Julian HansenCommented:
If you are concerned about different devices you should be looking at a responsive framework like Bootstrap or Foundation.

On small screens you will run into a problem - as there will be two many options in your menu to fit so they will wrap - which is why a responsive framework will show a hamburger menu.
0
 
MOSTAGHASSIAuthor Commented:
Yes,responsive is in my program and i do it with adding media query ,i work with Dreamweaver .
0
 
Julian HansenCommented:
Bootstrap is a responsive framework - it is a style sheet you add to your pages - it has predefined styles that you can use to make your site responsive

http://getbootstrap.com/

They have already solved many of the problems you are having.
0
 
MOSTAGHASSIAuthor Commented:
Yes,Bootstrap is a responsive framework,and it is for front-end,but is it easy that we add php codes,do you work it with server programming?
0
 
Julian HansenCommented:
PHP is a server scripting language - you use it to write HTML output.
Bootstrap is a style sheet - that's it.
When you output HTML from your PHP you just give it the Bootstrap classes you want to style the page - the stylesheet does the rest.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now