Solved

Changing li a width from px to percentage

Posted on 2016-08-30
14
43 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 54

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
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 

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 54

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 54

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 54

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 54

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 54

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 54

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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
P tag not forcing line space 2 27
How do I set diff properties in a table row? 3 19
Can't get container centered 4 13
Customizing jQuery UI Accordion CSS 3 14
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

773 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