This might be painfully easy, so my apologies in advance, but I'm on Hour 5 trying to figure this mess out. Here's the UL I'm trying to present as a horizontal bar:
<div id="navbarwrapper">
<ul id="navbar">
<li>Search</li>
<li>Tips</li>
<li>Neighborhoods</li>
<li>Relocation</li>
</ul>
</div>
And here's the strange CSS that seems to malfunction:
#navbar {}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li {display: inline;}
#navbar ul li a {text-decoration:line-through;}
The problem I'm having is that with this markup, the text wrapped in anchor tags in the HTML aren't receiving line-through (I'm using line-through as a placeholder because it's obvious when it's working or not; I don't actually want a line-through in the end).
Here's the strange bit. If I replace the "#navbar ul li a" nest with the following, it works:
#navbar li a {text-decoration:line-through;}
Furthermore, if I change "#navbar li{display: inline;}" with the following, I lose the inline property:
#navbar ul li{display:inline;}
Is it because I'm duplicating with "#navbar" and "ul"? It seems entirely too strange to me, and I feel as though I've been able to use this syntax in the past without error.
Thanks for the help in advance.
Your ul already have id of navbar. That's why #navbar ul doesn't match anything.
ul#navbar will match.
Your selectors are not correct.
#navbar is the UL element itself, so the selector #navbar ul does not target anything.
The correct selectors are
#navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li { display: inline; }
#navbar li a { text-decoration:line-through; }
#navbar ul is wrong...#navbar is the ul itself.
Your <ul> has the ID #navbar, so with #navbar ul you are actually addressing an additional ul inside your ul.
Try
ul#navbar li a {text-decoration:line-through;}
Related
I have Joomla 3.4.5 + Virtuemart 3 + Template Purity III.
I have a problem with the "pages navigation" links. You can see the problem here:
http://alturl.com/ofbav [link broken]
The problem is the list <ul> is displayed vertically instead of horizontally.
I would like to know which css code I have to add to get horizontally and "normal" looking my pagination buttons.
Can some expert help me please?
Not sure. Try like this.
.vm-pagination > ul > li
{
display:inline-block;
padding:0px 10px;
}
EDIT:
According to comment below if you want one code should solve both the problem then use it like below. In the above code i tried to apply only for the direct children list items. In your bottom page case it is not direct children. So change your code like below.
.vm-pagination ul > li
{
display:inline-block;
padding:0px 10px;
}
You should put list-style: none; on "ul" to get rid of the bullet points and display: inline; or display: inline-block; on the contained "li"s to display them in a row.
.vm-pagination ul li
{
list-style: none;
}
.vm-pagination ul li
{
display: inline;
}
Then you can play with marging+paddings+borders to make them look more like tabs.
Just add text-align: left; to your pagination ul. Also you can disable list styling with list-style: none;. And as a final step, you can remove unnecessary paddings and margins of your ul element
.vm-pagination > ul {
text-align: none;
list-style: none;
padding: 0;
}
use in your style may help you
ul
{
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
ul li
{
float:left;
padding:4px 4px;
}
Im trying to style the submenu on my wordpress menu
http://www.milknhny.co.uk/SofiaWork/
I tried
.headermenu ul ul
etc,... and it didnt work, can anyone suggest the correct class structure?
ive already tried
.headermenu ul li ul li also
thanks
Your ul's got an id attribute. Why not use it in css:
#menu-header-menu - I think it is the top-level menu.
#menu-header-menu .sub-menu - targets ALL sub menus of top-level menu.
Not sure what you are trying to customise, but the anchor text also has a background which does not help styling, so if you remove this it can help you style the list item better.
#headermenu ul ul li a {
background: none;
}
#headermenu ul ul li a:hover, ul.headermenu ul ul li:hover {
background: none;
}
Then use :
#headermenu ul ul li {
background: red ;
}
AND:
#headermenu ul ul li:hover {
background: yellow;
}
I'm trying to add a sub-menu to the css at http://jsfiddle.net/hozey/9dGuc/, but can't seem to get the hang of it. Could someone please help this newbie? Here's the html. I want to make a sub-menu for Horses 1, 2 and 3.
<div class="menu">
<ul>
<!--begin to insert contents-->
<li class="item-first">Home</li>
<li><a class="current">Portfolio ▼</a>
<ul>
<li>Horses 1</li>
<li>Horses 2</li>
<li>Horses 3</li>
<li>Dogs</li>
<li>People</li>
<li>Stills</li>
</ul>
</li>
<li>Order</li>
<li>Contact Me</li>
</ul>
</div> <!-- end menu -->
</div>
Here's the css I've got so far:
body {
margin: 0px;
}
#wrapper {
border: px solid black;
margin: 1em auto;
font-family: Arial,Helvetica,sans-serif;
width: 760px;
text-align: left;
background-color: #cccccc;
overflow:hidden;
height:150px;
}
.menu {font-family: arial, sans-serif;width:760px;position:relative;font-size:0.7em; margin:0px auto;}
.menu ul li a {display:block;
text-decoration:none;
width:97px;
height:25px;
text-align:center;
color:white;
padding-left:1x;
border:px solid;
border-width:0 0px 0px 0;
background:;
line-height:25px;
font-size:1.0em;}
.menu ul {padding:0;margin:0;list-style-type: none; }
.menu ul li {float:left;position:relative;}
.menu ul li ul {visibility:hidden;position:absolute;}
.menu ul li:hover a, .menu ul li a:hover {color:white;background:#3BA110;}
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible;left:0;}
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block;
background:#444444;
color:white;
width:97px;
padding-left:1px;
border-right:none;}
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#3BA110;color:white;}
This will get you started, though it's far from perfect. As Zeta pointed out, without the child combinator, making a deeply nested menu is not only difficult, but it also results in bad code.
What you need to do is make sure you know exactly what each of your selectors is targeting. You want your second and third tier lis to behave differently, so you need to be certain that your selector for the second isn't also effecting the third.
Literally all that I did to solve your problem was apply the child combinator all over the place on the code you already had, as I knew you were writing code for first and second tier menu items. After that, I tacked on a simple selector to target third tier items and had a working menu.
Were I you, I'd go back through your code and make sure you know exactly what your selectors are targeting, then rewrite your CSS. It's not too hard to do, and it can result in surprisingly little code for very complex nested menus.
html (for just a third tier menu item)
...
<!-- the rest of the menu -->
<li>
Horses 1
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<!-- the rest of the menu -->
...
css (for just the third tier)
.menu ul ul ul { visibility: hidden; position: absolute; top: 0; left: 97px; }
.menu ul ul li:hover ul { visibility: visible; background-color: #eee; }
And just for a few examples of how to select different tier menus and items:
css (to target the 'header items')
.menu > ul > li { }
css (to target the first dropdown)
.menu > ul > li > ul { }
css (to target the first dropdown items)
.menu > ul > li > ul > li { }
.menu ul ul > li { } /* This will also target submenu items */
.menu > ul > ul > li { }
css (to target the submenu to a dropdown item)
.menu > ul > li > ul > li > ul { }
.menu ul ul ul { }
css (to target the submenu item of a dropdown item)
.menu > ul > li > ul > li > ul > li { }
.menu ul ul ul li { }
What we can gather from the above code is that you don't want to stop doing using the child combinator until you're at the last tier of your menu. In general, menu ul[n] li, where I'm using pseudocode to represent n number of uls, will target any li deeper than n depth in your menu. So in your case, it's fine to use .menu ul ul ul li as the third tier is the last one. But you wouldn't want to use .menu ul ul li to write style that's meant just for the first dropdown, as that selector also targets the third, fourth, and so on depth as well.
Just for completeness, the bare minimum to get a working deeply nested menu is done by thinking like this:
You want anything after the first ul to start off as hidden. So you can do:
.menu ul ul { visibility: hidden; }
This hides any ul that is nested within another ul. So it hits all of our submenus. And it only applies to lists within our menu.
Then you want each submenu to be visible when you're hovering over its parent's link. We can handle all of our submenus with a single selector, I think:
.menu li:hover > ul { visibility: visible; }
That should be general enough to apply to every level of a menu. Reading right to left, we make the ul visible when we're hovering over an li that is its direct parent. And, like usual, this only applies to an li that is within our menu.
Of course, you could use a, too, if you wanted.
CSS Menus are a great time to think and learn about CSS efficiency. Once you have a working menu, see if you can optimize it! The tags I posted here might not be the quickest; I just thought of them off the top of my head. I'll leave it to you to find the best selectors to use.
And that's really the basics of complex nested CSS menus. Hope it helps.
Removed link, problem solved
The menu at the top is supposed to be a dropdown menu, but it expands to the right instead.
My CSS is this (I believe this is the relevant bit anyway)
#primary-nav, #primary-nav ul { list-style: none; margin: 0px; padding: 0px; }
#primary-nav ul { position: absolute; top: auto; display: none; }
#primary-nav ul ul { left: 100%; top: 0px; }
#primary-nav li { float: left; }
#primary-nav li li { float: none; position: relative; }
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { display: none; }
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul { display: block; }
I have no clue where exactly the direction for the menu is set.
Take a small and nice reading here.
Remove the position: absolute; from the CSS of #primary-nav ul also maybe have a look at using FireBug, it's prilliant at experimenting with these things. Also what browser are you looking in? FF displayed the menu vertically but just wasn't aligned properly and didn't have the background.
I am seeing this menu as a vertical drop-down, not a horizontal one. Please specify what browser you're viewing in when asking CSS questions, as it makes a big difference in how to answer your question. Let us know if it is fixed, and what fixed it for future readers.
One thing I noticed is that your menu items poke out of your vertical list at the right. Try applying the padding to only the <li> element, not the anchor tag. This should fix your problem. When you apply it to both, you have to keep in mind that first you're putting the padding on the <li>, then adding more padding to the inner element so that it expands outside of it's container which only has the first amount of padding applied.
It is kindof dropping down now, but in Firefox 2 it flashes and is barely unclickable due to that. And in IE7 it's poorly aligned and totally unclickable...
I am using YUI reset/base, after the reset it sets the ul and li tags to list-style: disc outside;
My markup looks like this:
<div id="nav">
<ul class="links">
<li>Testing</li>
</ul>
</div>
My CSS is:
#nav {}
#nav ul li {
list-style: none;
}
Now that makes the small disc beside each li disappear.
Why doesn't this work though?
#nav {}
#nav ul.links
{
list-style: none;
}
It works if I remove the link to the base.css file, why?.
Updated: sidenav -> nav
I think that Dan was close with his answer, but this isn't an issue of specificity. You can set the list-style on the list (the UL) but you can also override that list-style for individual list items (the LIs).
You are telling the browser to not use bullets on the list, but YUI tells the browser to use them on individual list items (YUI wins):
ul li{ list-style: disc outside; } /* in YUI base.css */
#nav ul.links {
list-style: none; /* doesn't override styles for LIs, just the UL */
}
What you want is to tell the browser not to use them on the list items:
ul li{ list-style: disc outside; } /* in YUI base.css */
#nav ul.links li {
list-style: none;
}
The latter example probably doesn't work because of CSS specificity. (A more serious explanation can be found here.) That is, YUI's base.css rule is:
ul li{ list-style: disc outside; }
This is more 'specific' than yours, so the YUI rule is being used. As has been noted several times, you can make your rule more specific by targeting the li tags:
#nav ul li{ list-style: none; }
Hard to say for sure without looking at your code, but if you don't know about specificity it's certainly worth a read.
In the first snippet you apply the list-style to the li element, in the second to the ul element.
Try
#nav ul.links li
{
list-style: none;
}
shouldn't it be:
#nav ul.links
Maybe the style is the base.css overrides your styles with "!important"? Did you try to add a class to this specific li and make an own style for it?
Use this one:
.nav ul li {
list-style: none;
}
or
.links li {
list-style: none;
}
it should work...