Solved

Changing li a width from px to percentage

Posted on 2016-08-30
14
56 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
[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
  • 7
  • 6
14 Comments
 
LVL 57

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
Independent Software Vendors: 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!

 

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 57

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 57

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 57

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 57

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 57

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 57

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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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…

734 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