I'm trying to get li elements in a ul to have equal width, and fit on one line, with CSS, without knowing how many lis there are when the CSSis made (i.e. dynamically generated HTML).
W3Schools has a navigation bar example, but it's fixed-width, and if you add another li rather scaling to fit, the whole layout gets thrown off.
This is their example:
CSS:
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
HTML:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Ideally, I would be able to add another li and the menu would still display great.
Even thought I hate this solution... if you really need it to work with just HTML/CSS and auto-update width, a table would do the trick.
Otherwise I would recommend just having some simple JS updates the widths for you. If you are adding the extra options via JS it would be easy to toss this in.
EDIT: Actually, depending on your targeted browsers. You could use the display: table stuff but it is limited to IE8+.
DEMO
You will have to do this with javascript I guess...
you could use javascript to get the window width and the number of list items. If you have these you can assign a fixed width using javascript.
Related
Im trying to create a menu where all links have a background associated with it, and displayed in an inline format. I want the widths of these elements all to be the same, but I have having a hard time trying to figure out how to do this, as the width seems to be based on the text length, padding does not seem to help with this issue as the text length varies. Any help would be greatly appreciated. Example JSFiddle:Here
Example:
HTML
<div id="menuLink">Fuzz</div>
<div id="menuLink">FuzzBuzz</div>
CSS:
#menuLink{
background:#cccccc;
display:inline;
width:200px;
height:50px;
}
inline elements are not affected by width statements.
Just make them inline-block.
.menuLink{
background:#ff0000;
display:inline-block;
width:200px;
height:50px;
}
<div class="menuLink">Fuzz</div>
<div class="menuLink">FuzzBuzz</div>
JSfiddle Demo
Note: You can't re-use IDs on the same page so I converted those to a class.
You may achieve the same thing by changing your html structure to the most adopted practice of using ul li for navigations.
<ul>
<li>Fuzz</li>
<li>FuzzBuzz</li>
</ul>
Same styling is still valid:
ul li{
display:inline-block;
width: 200px;
background-color:red;
height:50px;}
I've tried to search this topic but it's kind of a hard topic to get the right keywords to find what I'm looking for.
What is the difference between #menu-nav ul {...} and ul#menu-nav {...} ?
I am currently working to make a inline-block nav menu in a Wordpress theme and here is the CSS producing the effects I want (ie removing list-style-type, creating blocks, centering them within their parent container, etc).
ul#menu-nav {
margin:0 auto;
padding:0;
}
#menu-nav li {
list-style-type:none;
display:inline-block;
width:118px;
height:56px;
color:white;
border:1px solid black;
}
If I change the ul#menu-nav {...} to #menu-nav ul the padding:0; and margin:0 auto no longer overrides the User Agent stylesheet. Frankly, this makes me assume that my CSS is hacky and I am going about this wrong.
Any suggestions or help or references would help immensely! I'd like to understand fully why they produce different results.
ul#menu-nav and #menu-nav ul mean very different things.
ul#menu-nav means "the ul tag with the id "menu-nav". (Which is kind of superfluous, since id needs to be unique anyway then it doesn't make a difference which element has it. Unless I suppose the content is dynamic enough that there's a chance that id might be applied to different kinds of elements in different circumstances, but that's probably a confusing design anyway.)
Example:
<ul id="menu-nav"> <-- This is what's being selected
<!-- any other content -->
</ul>
#menu-nav ul means "the ul tag(s) which are descendants of the element with the is "menu-nav".
Example:
<div id="menu-nav">
<ul></ul> <-- This is what's being selected
</div>
#menu-nav ul {...}
Means any ul inside a tag with id="menu-nav"
and
ul#menu-nav {...}
Means an ul with id="menu-nav"
I am making a mobile webapp with JQuery Mobile. Now at the bottom I have some kind of a navigation menu. Here is the HTML
<ul data-role="listview">
<li data-icon="arrow-u">Top</li>
<li>Menu</li>
<li>Contacten</li>
<li>Klanten</li>
<li>Planning</li>
</ul>
Now I want the first listItem at the right side. So I made a css class 'top'
.top{
text-align:right;
padding-right:35px;
}
But for some reason it doesn't take this CSS class. Can anybody help ?
Try such:
ul li a.top{
text-align:right;
padding-right:35px;
}
OR such:
ul li:first-of-type a{
text-align:right;
padding-right:35px;
}
You are applying the top class to the a intead of the li.
Update
As your styling gets overridden, you need to increase the CSS-specificity of your selector until it is higher than the specificity of the rule that overrides it. As I don't know much of your DOM, the best I can give you is:
ul li.top{
text-align:right;
padding-right:35px;
}
But that might not be enought. Look through the article on CSS-specificity, there is a part on how to calculate specificity.
I've discovered that in certain cases overrides are a bit tricky. You may have to do something like this. Some browsers mobile & web are not picking up the overrides as I would have expected. End result I have to use important to make sure my style gets applied. Just be careful of how use this and where.
ul li.top{
text-align:right !important;
padding-right:35px !important;
}
I'm new to the html & css design. I have following design of css-
span.menu a:link, span.menu a:visited
{
display:block;
font-weight:bold;
color:#0000CC;
background-color:#E8EEFD;
text-align:center;
padding:4px;
text-decoration:none;
width:70px;
padding:5px;
border:5px solid gray;
margin:0px;
}
I want to place three link by using tag which should be shown in the following manner-
Calls Customers Venders
and i want to treat them as menu for this they should be placed in horizontal manner. But when i'm running my css design then they placed in the vertical manner like -
calls
customers
vendors
how to do this?
thanks.
Try using display:inline-block if you want to be able to set the width and have them inline.
This won't work with Internet Explorer 6, an alternative would be using float:left. However, this can have complications as the elements will be removed from the normal flow and if there is no other content in the parent element then its height would be reduced to 0. This could be overcome by adding overflow:auto to the parent
Instead of display: block use float: left.
add the css properties float:left
I have a horizontal <ul> menu. How can I fix the width of the <li> elements at, say, 250px each?
Styling the A tag can help maintain consistency and give you a little more flexibility than styling the LI tag, espeically if you end up making multi-line menu items.
ul li {
float:left;
}
ul li a {
display:block;
width:250px;
}
You should also use a CSS reset to maintain consistency between browsers.
You can do this via CSS:
ul > li { width: 250px; }
Depending on your you're doing the horizontal menu, you may need a display:block; style as well.
What Nick and Diodeus both say is right, but unless you want all of your list items to have that width, you better throw an id on that ul and then target it in your CSS.