I'm not happy with my code which uses a sprite image to show different images for each item in a list. The code can be seen here:
http://jsfiddle.net/spadez/JBuE6/45/
Before it was possible to click anywhere along the width of the column and it would select the list item because I used display: block.
However, because my sprite requires:
width: 0px;
It means I have to click on the actual list text in order to select it. Removing the width: 0px from the class .nav li achieves the affect I want. Can anyone show me how to do this, with some clean efficient code.
I'd take advantadge of CSS pseudo-elements, like ::before. You can do it in this way:
http://jsfiddle.net/franciscop/JBuE6/53/
HTML:
<nav>
<ul>
<li>
User
</li>
...
CSS:
nav a {
color: gray;
display: block;
line-height: 26x;
width: 100%;
}
nav li a::before {
display: inline-block;
content: "";
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 20px;
}
#user::before {
background-position: -10px -6px;
}
OLD ANSWER [alternative]:
I would change the padding left and the sprite to the <a>, so that you can click them also.
.nav li {
}
.nav li a {
color: gray;
display: block;
line-height: 26x;
padding-left: 30px;
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 0px;
}
http://jsfiddle.net/franciscop/JBuE6/50/
You should be putting your images on the links, not the list. Use display:block and padding-left: to provide enough room. In general, put all non-positional styling on the A-tag, not the LI.
Other than that, you are doing it the right way.
Related
I'm trying to make a drop down menu but the hover is not producing the desired display effect. I just want the drop down menu to display when the mouse hovers over the list element. I'm new to HTML and CSS, so I can't pinpoint my error.
The relevant HTML:
#strip{
width: 950px;
height: 28px;
background-color: #2c276d;
font-size: 10pt;
}
.strip{
margin:0;
padding: 0;
}
.strip li{
list-style-type: none;
float: left;
}
.strip li a {
color: white;
text-decoration: none;
display: block;
text-align: center;
width:140px;
height:23px;
padding-top:5px;
border-right: 1px solid #FFFFFF;
}
.strip li.shrt a{
width: 145px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropcmpy {
display: none;
position: absolute;
background-color: #2c276d;
font-size: 10pt;
width: 145px;
}
.dropcmpy a {
color: white;
display: block;
text-decoration: none;
padding: 5px;
border-top: 1px solid #FFFFFF;
}
.strip li a:hover{
background-color: #28A2D5;
}
li.shrt:hover .dropcmpy {
display: block;
}
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">Com</li>
</ul>
</div>
<div class="dropcmpy">
Key
Ad
Fac
Car
FAQ
</div>
</div>
No matter how I format that last piece of CSS, it doesn't produce a drop down menu, unless I do
#main:hover .dropcmpy {
display: block;
}
or give the first div a class, and then use that. Otherwise the dropdown menu will not appear. This presents the issue that the entire strip will then produce the menu, while I want only the shrt to.
As john stated, selector .class1 .class2 is targeting an element with class="class2" that is a child of an element with class="class1".
which means you need to put the dropdown menu INSIDE the element, thats supposed to show the dropdown when hovered.
Usuall way is using another list inside the button, for example
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">
Com
<ul class="dropcmpy">
<li>Key</li>
<li>Ad</li>
<li>Fac</li>
<li>Car</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</div>
</div>
and css
.dropcmpy {display: none;}
.shrt:hover .dropcmpy {display: block;}
That should do it, hope it was helpful :).
In order to show an object on hover with css, that object must be the sibling or child of the thing being hovered (As there are no parent selectors). This is not the case in your code.
So you have a few options:
Make div.dropcmpy a child of li.shrt. (As in Teuta Koraqi's answer)
Hack. Use an empty pseudo element (.dropcmpy::before) and absolutely position it over li.shrt, then use that as the hover element.
Use javascript
I don't know what the structure of your page is so can't say which of these would be best for you. The first is certainly the cleanest if you can manage it.
The problem is with inheritance. The last block that you are trying to use is looking for a .dropcmpy element that is a child of .shrt (which obviously doesn't exist). The reason the alternative works is because .dropcmpy is a child of #main.
I don't see any issue with using #main as the hover listener, since everything related to the dropdown is contained in it anyways.
After a reminder from #JohnCH, I realized you could do a sibling selector like this to get the functionality I think you want.
#strip:hover+.dropcmpy {
display: block;
}
I am working on my online shop, and I want to add stages, like in the picture below:
My problem is getting one of the stages to be highlighted, depending on the page it should be shown on. I had a standard div and ul in my HTML:
<div id='stages'>
<ul>
<li class='selected'>Cart</li>
<li>Your Details</li>
<li>Summary</li>
<li>Payment</li>
<li>Complete</li>
</ul>
</div>
And my CSS (so far):
div#stages {
position: relative;
display: block;
height: 40px;
text-align: center;
}
#stages > ul > li:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#stages > ul > li {
text-align: center;
width: 110px;
height: 40px;
line-height: 40px;
display: inline-block;
background: #DDD url(/img/bin/bg-steps.png) no-repeat top right;
margin: -3px;
text-indent: -15px;
}
#stages > ul > li.selected {
background: #306bb4 url(/img/bin/bg-steps.png) no-repeat bottom right;
}
#stages > ul > li:last-child {
background: #DDD!important;
padding-right: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
Originally using the image 'bg-steps.png':
Which looks nice. However to get an item selected is proving to be too hard, because it needs a different image at the begining of the LI and at the end. Can anyone help/simplify this for me? See here for a JSFiddle.
EDIT: This is my aim:
Try this one: jsFiddle
Here I added some pseudo classes :before and :after
In here you do not need your pictures in the background and it is made in PURE css and html
With CSS3, you don't need to use images.
It can be achieve using a pure CSS solution with pseudo classes :before and :after.
You can use it to generate triangles before and after each li element.
You can find a full working example in this JSFiddle.
I have used a similar trick in one of my project, and it's well supported in FF, Chrome and IE10. For other browsers, you need to check yourself because I don't test them.
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
I haven't really ever done a background navigation rollover, I usually just change the colour of the text once it's been rolled over. However I'm try to do this now but can't seem to get it right.
I'm trying to do it all with CSS as I believe there is a way however I do see a lot of others using sprites and image rollovers. Which way is the best? I might end up having a lot of images on my website so I'm trying to stay away from them so I myself, am thinking strictly CSS. There is a way right?
This is my website
CSS
#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}
HTML
<nav id="main-navigation">
<ul id="main-nav-left">
<li class="current">Home</li>
<li>About</li>
<li>Current Season</li>
<li>Past Seasons</li>
<li>Contact</li>
<li>Partners/Sponsors</li>
</ul>
</nav>
But I want it to look like this
What am I missing?
Use this
#main-navigation li a:hover {
color: #c7bd89;
background-color: #900;
width: 120%;
line-height: 30px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 30px;
}
All the problem is that you're defining a height ... You should define a line-height instead and it will work flawlessly ... But I still can find a space for improvement in terms of padding and margin.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/quR4E/3/
demo: http://jsfiddle.net/quR4E/3/embedded/result/
screen shot:
Try changing your #main-navigation li a to this:
#main-navigation li a {
/*display: block;*/
text-decoration: none;
color: black;
padding: 5px;
}
Using display block was pushing the text outside the box. Adding the padding will give you some spacing around the text.
Sprites are definitely better than using multiple images but in the end they are essentially going to be the same thing. If you can create your images small enough (for bandwidth performance) it won't affect your site that much. Sprites are nice to group images. Using background colors and borders around text is also a very efficient way to go.
Have a look at what I did here: http://torontobanfffilmfest.com/splash
Each of the eight blocks has a single image in two versions, one light and one dark, attached side-by-side. In the top-left corner, for example, is an image, splash_buy_tickets_m.png, that is 582 pixels wide. But the space in which it's displayed is 291 pixels wide. We only see half the full image, and WHICH half depends on :hover.
The CSS that makes the image change on rollover is pretty simple:
#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. {
background-position: -291px 0;
}
If each of the buttons in your button bar consists of an "active" and an "inactive" version, then you can just change the image position within the DIV in which it's shown, shifting horizontally or vertically.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Navigation hyperlinks only work when mouse is on the text
Can you set a link to the whole width of an < li > instead of just where the text is?
This is what I mean, I want the user to be able to click on anywhere on the button and go to the link and not just the text: http://jsfiddle.net/b7S4L/
One of the problems is that I cannot use display: block; because I have a number after the < a > link for example (1)
Don't style the LI at all, (other than float:left and clearing padding, marging and list-style-type) if needed. Put all styling on the A (and use display:block).
I don't want the number on the right to be on a seperate line that's
the problem, it should be on the right of the Text
I think I understand what you're trying to do here. Though, I'm not sure because your question has been quite confusing..
First, do set display: block on the a. That is the right thing to do here.
Then, move the number inside the a, and add a span inside:
<li class="cat-item cat-item-147">
<a href="http://test.vps.graenseguiden.dk/newscat/food/" title="Vis alle indlæg i kategorien Food">
<span>Food</span> (4)
</a>
</li>
Then, some extra CSS is needed. You should merge the new CSS with what you already have - for the demo, I've added it within the HTML pane for simplicity (marked with <!--new css right here-->):
http://jsfiddle.net/thirtydot/b7S4L/3/
div.gg_newscats li a {
display: block;
padding: 16px 0;
color: #333
}
div.gg_newscats ul li {
padding-top: 0;
padding-bottom: 0
}
div.gg_newscats li a span {
color: #cc0014
}
div.gg_newscats li a:hover {
text-decoration: none
}
div.gg_newscats li a:hover span {
text-decoration: underline
}
The messing around with span and :hover is to keep the colour and underline exactly as you had it.
Anchor tags by default are inline boxes, which means that they don't fill their parent entirely (they don't take all the space) and they shrink only to fit their content. Thus you should use this CSS to make'em fill the space of li element:
li a
{
display: block;
height: 100%;
}
Also keep in mind that you should remove any padding from the li elements and remove margins of a elements. This way, border of anchor tags meet borders of li tags. For an example, look at links of Thought Results.
One solution I tend to use is to make the <a /> element within a <li /> element blocklevel with
display: block;
After that removing any padding you specified on the <li /> element and add it on the <a /> element instead and you should get the same visual output, but with the entire <li /> as a link
While you can manage this with jQuery, you can also use simple CSS for most browsers:
<style>
ul { width: 200px; background: #ccc; }
li { line-height: 3em; }
a { display: block; width: 100%; height: 100%; padding: 5px; }
</style>
<ul>
<li>This is a link</li>
</ul>
Add display:block; to the style and you're all set!
EDIT
Eh, didn't see the jsFiddle example. If you remove the top/bottom padding from the LIs and put it on the As, plus put the count in a SPAN within the As, these rules will achieve the desired result:
div.gg_newscats a {
display: block;
height: 100%;
padding: 10px;
}
div.gg_newscats a span {
color: black;
}
div.gg_newscats ul li {
float: left;
font-size: 13px;
margin-left: 2%;
margin-top: 2px;
text-align: center;
width: 30%;
padding: 2px;
}
Sample HTML:
<li class="cat-item cat-item-148">
<a title="Vis alle indlæg i kategorien Electrical" href="http://test.vps.graenseguiden.dk/newscat/electrical/">
Electrical
<br>
<span>(1)</span>
</a>
</li>
Edit 2
new code... a lot simpler... only thing that didn't go the way I liked was that the text-decoration of the link had to go.
.cat-item
{
padding: 0px;
}
.cat-item a
{
padding: 13px 0px 13px 0px;
}
.cat-item span
{
margin-left: 5px;
color: black;
}
.cat-item a:hover
{
text-decoration:none;
}
I had to change the markup just a little (put the numbers in a span) but other than that it wasn't too much
demo here: http://jsfiddle.net/ZW6uV/1
had to tack on !important because of a conflicting imported style sheet.
Edit
Readers Digest version: Don't put your padding on the <li> ... ever. Put padding on the <a> within the <li> and then it will fill the empty space and have the same effect but be able to handle the click also. -snip-
Yes just remove any padding from the LI element and push out the padding as needed on the anchor tag
<li class="link-wrapper">
<a href="http://this.com" >Go Here</a>
</li>
CSS
.link-wrapper{
margin: 0;
padding: 0;
}
.link-wrapper a{
display: block;
padding: 3px 5px;
}
Since you are using jQuery, you can do it this way:
$("li.cat-item").click(function () {
$("a", this).click();
return false;
});