Solved

Changing li a width from px to percentage

Posted on 2016-08-30
14
32 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 51

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
 

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 51

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 51

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 51

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 51

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 51

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 51

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now