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
Solved

Changing li a width from px to percentage

Posted on 2016-08-30
14
47 Views
Last Modified: 2016-08-30
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
Comment
Question by:MOSTAGHASSI
  • 7
  • 6
14 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41776045
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
 

Expert Comment

by:Walid MESSAOUDI
ID: 41776064
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
 

Author Comment

by:MOSTAGHASSI
ID: 41776104
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:MOSTAGHASSI
ID: 41776122
I lost the previous fiddle,you can see it in this link:
https://jsfiddle.net/jamshidi/bLLrqkws/
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41776127
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
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41776137
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
 

Author Comment

by:MOSTAGHASSI
ID: 41776139
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
 
LVL 55

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41776146
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
 

Author Comment

by:MOSTAGHASSI
ID: 41776159
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
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41776169
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
 

Author Comment

by:MOSTAGHASSI
ID: 41776200
Yes,responsive is in my program and i do it with adding media query ,i work with Dreamweaver .
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41776214
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
 

Author Comment

by:MOSTAGHASSI
ID: 41776221
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
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41776340
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

792 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