I am looking to style a list with images at the top and the bottom of the list. I know that in css3, there is the border-image property, however I need something that works in older browsers as well.
The list looks like this:
<ul>
<li> a </li>
<li> b </li>
</ul>
I need to have an image that comes before all the list items, and another one that comes after all the list items.
I know that I can do something like this:
<div id="top-image"></div>
<ul>
<li> a </li>
<li> b </li>
</ul>
<div id="bottom-image"></div>
Are there any better options than this?
May be you have to define bottom image in UL background & top image in first LI. like this:
ul{
background:url(bottom-image) no-repeat left bottom;
}
li{
background:url(bottom-image) no-repeat 0 0;
}
li + li{
background:none;
}
Check this example http://jsfiddle.net/CY5ck/
Related
I was wondering if there is a way you can apply a hover effect on parent element with just css.
For example, I have a navigation:
<nav>
<ul>
<li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li>
<ul id="audio_sub_menu">
<li class="mes">mēs 1</li>
<li id="klienti">mēs 2</li>
</ul>
<li class="main-nav" id="audio">paklausies!</li>
<li class="main-nav" id="video">paskaties!</li>
<li class="main-nav" id="kontakti">pasūti!</li>
</ul>
</nav>`
And what I want is to, when hovered on
nav ul ul li
element, it affects the
#firstLiElement
.
I know it can be done with JS, but there has to be also a way to do this with css. I found a lot of solutions when you need to affect the sibling or child, but didn't find anything for this situation.
EDIT:
Sorry, didn't even write what I was looking for... Yes, sub_menus are hidden, but when I hover the main navigation li element, they shove up, and they stay visible also when I hover on them. What I am missing is to change the background color of the main navigation li element when the sub menu is hovered.
I found this for you.
a < img { border: none; }
In this example, it would select a tags but only if they contained an img tag. (Aside: this would be a weird departure from the typical syntax where the actual elements being selected are on the right, this would be on the left).
a img:parent { background: none; }
The key difference being that the :parent syntax would only evaluate a single element, the parentNode available in the DOM for every element. This would be similar to forcing the :has selector to only evaluate children rather than all descendants.
https://css-tricks.com/parent-selectors-in-css/
I believe it can't be done. CSS or Cascade Style Sheet - keyword here is Cascade - executes in a cascade direction and not the other way around.
You can do this (assuming the audio_sub_menu, i.e., is hidden):
nav ul a:hover ul {
visibility: visible;
}
And you'll be targeting a child on its parent hover. So, you can either change your layout and design to use this knowledge, or go with the JS solution :)
edit
to get the same color, style the :hover on the parent as well and change the first </a> in your HTML code
<nav>
<ul>
<a href="#"><li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li>
<ul id="audio_sub_menu">
<li class="mes">mēs 1</li>
<li id="klienti">mēs 2</li>
</ul>
</a>
<li class="main-nav" id="audio">paklausies!</li>
<li class="main-nav" id="video">paskaties!</li>
<li class="main-nav" id="kontakti">pasūti!</li>
</ul>
</nav>
And the CSS
nav ul a:hover {
background-color: your_color;
}
nav ul a:hover ul {
visibility: visible;
background-color: your_color;
}
edit - On the hetasbo's answer
those are suggested css selectors, they don't exist
I have a nested UL structure that represents a folder tree which can grow very deep. I'm stuck at doing a simple :hover effect for the LI elements. The problem is that doing a li:hover won't work as it affects all the parent "li's" aswell. Usually I would have tried to apply the hover effect to a link element or something in the LI, to avoid parents taking the style aswell, but due to circumstances that's not an option now. I have a working solution by using javascript to place a class on the hovered LI and then style this class instead, but i'm really interested in seeing if there's actually a way of accomplishing this through pure css.
I imagine there may be a way of doing a very "hardcoded" css solution but i am more interested in a dynamic and clean one, since the structure can nest indefinitely.
Maybe there's some pseudo selector i'm not aware of? Note that it doesn't have to be IE<8 compatible
<ul>
<li>
This LI should not recieve the hover effect
<ul>
<li>
A li:hover will place the effect on this LI,
but also the parent LI, since that element is
also techincally being hovered.
</li>
</ul>
</li>
</ul>
If you want to use pure CSS then you will need to us parent, child, elements.
For the hover elements:
ul li:hover{
"Style"
}
For the other elements:
ul li ul li{
"Style"
}
UPDATE: I just reread your question, in which you state:
"Usually I would have tried to apply the hover effect to a link
element or something in the LI, to avoid parents taking the style as
well, but due to circumstances that's not an option now."
If that is true, then the solution below is not viable for your circumstance, and you cannot achieve what you desire with pure CSS. I've left my answer, however, as others who want to achieve this but can use a nested element may find it useful.
Pure CSS Only by Adding HTML
The only way you can possibly achieve something of what you seek by pure CSS is to add an extra element (like a span) within the li and perform the hover on that. I assume that whatever folder is being hovered, that folder alone is what you want to highlight. If so, this fiddle illustrates what I am saying, using this code:
HTML
<ul>
<li>
<span>Folder 1</span>
<ul>
<li>
<span>Folder 1.1</span>
<ul>
<li>
<span>Folder 1.1.1</span>
<ul>
<li>
<span>Folder 1.1.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
li span:hover {
color: red;
background-color: yellow;
}
Now, if you want child folders to also highlight on hover of a parent folder, then perhaps this fiddle illustrates what you want with this code change:
CSS
li span:hover,
li span:hover + ul span {
color: red;
background-color: yellow;
}
They key point is to utilize the extra element to control the hover, whether of the item itself or any later generation elements that the hover should affect.
Not clear at all... but if you want to style nested LI when you are hovered the parent LI without styling the parent one...
Try this:
CSS
ul li ul li {
color: blue
}
ul li:hover ul li {
color: red
}
fiddle example: http://jsfiddle.net/EHp3n/
Your question is not very clear and also it will confuse. Let me explain, when the user hover the city (India / China / UK), style should be applied to State and Country through CSS.
<ul>
<li>India (Apply Style)
<ul>
<li>India State (Apply Style)
<ul>
<li>India City (On Hover)</li>
</ul>
</li>
</ul>
</li>
<li>China
<ul>
<li>China State
<ul>
<li>China City</li>
</ul>
</li>
</ul>
</li>
<li>United Kingdom
<ul>
<li>UK State
<ul>
<li>UK City</li>
</ul>
</li>
</ul>
</li>
</ul>
ok, so developing a site for one of my friend's church using wordpress and I've run into a snag. I dont normally get all fancy with the nav bar, but I decided to take a swing at it... so here's what I'm doing:
nav bar background is a 1x64 pixel repeat-x. nav bar is actually a UL inline display. I want to have the background of each <li> tag be a static set image butted up next to each other for dynamic awesomeness. the problem: I cant force the background image to its full 100%. it is only as wide as the text is. The image size (made in photoshop) is 167x64 pixels. I cant center the links inside the <nav> tag horizontally and cannot get the <li> background the full size it's supposed to be. I've tried manually setting the height on everything in each level to be 64px as well as using verticle-align:middle; for the positioning I want and it's just really messing with my head #.#
site located at http://parnell.co/hurricane-church-of-god
page source:
<div class="nav-wrapper">
<!-- Nav -->
<nav>
<ul id="menu-nav-bar" class="menu">
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-18">Home</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">Sample Page</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">Blog</li>
</ul> </nav>
<!-- /Nav -->
<br class="clear">
</div>
<!-- /nav-wrapper -->
CSS Source:
/******************************************************
* Navigation *
******************************************************/
div.nav-wrapper {
margin-top:-16px;
-moz-border-radius: 15px;
border-radius: 15px;
background:url(img/nav-bg.png) repeat-x;
height:64px;
vertical-align:middle;
}
div.nav-wrappter ul,
nav ul li {
float:left;
height:64px;
vertical-align:middle;
}
nav ul#menu-nav-bar li {
display: inline;
list-style-type: none;
vertical-align:middle;
background-image:url(img/nav-button.png);
background-size:100%;
background-repeat:no-repeat;
height:64px;
}
nav ul#menu-nav-bar li a {
text-decoration:none;
height:64px;
vertical-align:middle;
}
Please bear with my sloppiness in code, i've been trying to wrap my head around it all day and have more or less started from scratch on that one part like 8 times. Any help you can give would be greatly appreciated
Ok, thanks to #ahillman3, I was able to get my mind straight and figure it out. Great link btw. As well the typo... that was about the biggest issue because nothing would have worked right until that was fixed. Specifying the width for the <li> tag forced the buttons to behave correctly. And as for centering the text, the css attribute display:block; when applied to nav ul#menu-nav-bar li a {} was the key to making the <a> tag (a line object) behave like a div or table (a block object). after that, it was as simple as adding some margin to get the text center in the box.
thanks guys!
How does one semantically marks up a navigation bar of icons + text, where text is below icons and icons are a sprite.
With two more conditions: navigation boxes are of different width and icon should serve as a link as well (be clickable)
Concrete example is # www.emex.ru.
In other words: how does one convert
<ul>
<li>
<a><img width=32 height=32/><br/>Link1</a>
</li>
<li>
<a><img width=32 height=32/><br/>Link2</a>
</li>
</ul>
to a version without <img> elements
An unordered list is common for navigation menus. You can style the ul and li tags to space and align each link however you need. You should be setting a class or ID on the li tags and setting the background image position. A nice example is here
http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/
Twitter bootstrap uses the <i> tag for doing this. See their examples.
So something like this:
<li>
<a>
<i class="icon-shoe"></i>
Shoe
</a>
<a>
<i class="icon-balloon"></i>
Balloon
</a>
</li>
And then in your CSS:
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
}
.icon-shoe {
background-image: url("path/to/shoe/icon.png") no-repeat;
}
.icon-balloon {
background-image: url("path/to/balloon/icon.png") no-repeat;
}
becuase you'll be using images for your navigation its important that you add the alt="" tag in so google can see your links anchor text.
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.