I saw a nice video on youtube about making transional gallery (http://www.youtube.com/watch?v=4sVTWY608go). I tried to do the slider right..
Now, I want to make a change. I want to give the first image a different width say(530px) and the other images(40px). Then when a user hover on any other images(not img no.1) the width of image no.1 change to be like(40px) and the hovering one (530px). how can I do that.
Here is my code:
HTML
<div class="divSlider">
<ul>
<li id="slideImg1"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
=========
CSS
===SET THE WIDTH OF THE IMAGES IN a
.divSlider li a{
width: 30px;
height: 500px;
text-decoration: none;
color: black;
display: block;
border: 2px solid gray;
border-radius: 5px;
}
=== image no.1 width
#slideImg1 a{
width: 540px;
}
=== when hovering on all the images except image no.1
.divSlider li a:hover{
width: 520px;
}
=== here is the problem I don't know how can I change it's width when user hover on other images
#slideImg1 li a:hover{
width: 20px;
}
Any help
TIA
If I understand your question correctly, here is one possible solution:
Demo Fiddle
The trick here is to set the CSS :hover to key off of the wrapping element, and then overwrite it with more specificity.
CSS:
/* initial setup */
li{ display: inline-block;}
a {
display: block;
width: 40px;
height: 150px;
background: url(http://www.placehold.it/150x150) no-repeat;
-webkit-transition: .3s;
transition: .3s;
}
#slideImg1 a { width: 150px;}
/* hover states */
.divSlider:hover #slideImg1 a {width: 50px;}
.divSlider ul #slideImg1 a:hover {width: 150px;}
a:hover { width: 150px;}
I think this would be done with javascript in a very easy way, so there's no point in trying to accomplish it with only css.
You would only need to add onMouseOver attributes and then do whatever you want with the javascript code.
I can post the code if you ask for it.
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;
}
First off, I'm really new to this so sorry if I sound dumb ;_;. Now, I'm trying to make a background color on my list items. Like this site has, black bar with the logo, search bar etc.. I tried wrapping divs everywhere but nothing seems to work.
HTML
<nav class="nav-menu">
<div class="container">
<ul>
<li>About Us</li>
<li>Staff</li>
<li>Schedule</li>
<li>Home</li>
</ul>
</div>
</nav>
CSS
.nav-menu ul {
margin-right: 50px;
}
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
}
.container {
color: black;
}
http://jsfiddle.net/Hm4KJ/
Set overflow to auto to display everything in the .content div (now everything is hidden because you use float property)
.container {
background: black;
overflow:auto;
}
I guess it is a typo, anyway , you should set background property instead of color to set background color.
Example
if you only want a background color in each list item you can use this one:
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
background:#000000;
display:inline-block;
padding:5px 10px;
}
http://jsfiddle.net/Hm4KJ/2/
You could add a clearfix after your floating element.
html:
put a
<div class="clear"></div>
after your <ul></ul>
related css:
.clear {
clear: both;
}
and you would need to change color: black; to background-color: black; ;-)
see: http://jsfiddle.net/Hm4KJ/4/
I'm not sure why my hover effect isn't working on my navigation bar, and I was wondering if anyone can point out where I've went wrong?
Here is my html and css:
<div id="nav">
<a class="selected" href="Property%20Advisor.html">Home</a>AboutContact Us
</div>
#nav {
position: fixed;
top: 0;
width: 100%;
height: 7%;
margin: 0;
text-align: center;
font-family: rosario, sans-serif;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav a {
display: inline-block;
font-size: 100%;
padding-top: 1%;
padding-left: 2%;
padding-right: 2%;
margin: 0;
border: 0;
padding-bottom: 1%;
color: white;
text-decoration: none;
margin-right: 1px;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav homeHover a:hover, onCLick {
background-color: #44597F;
color:orange;
}
.selected {
background-color: #000000;
color: orange;
}
Here is a JSfiddle of my code:
http://jsfiddle.net/VDmh8/1/
http://jsfiddle.net/VDmh8/3/
You need to change:
#nav homeHover a:hover, onCLick {
background-color: #44597F;
}
to:
#nav a:hover {
background-color: #44597F;
background-image: none;
}
because for one, #nav homeHover a:hover would select a hovered upon a element within an element with tag name homeHover within #nav, which won't target the a elements that you want.
Also, you need to reset the background-image property that you set for your unhovered a.
You just messed up your CSS target.
JSFiddle
You're trying to change #nav a I presume, so all you need to do is use the CSS selector - #nav a:hover.
Setting a background gradient for both your nav and link elements is generally a bad idea. The two gradients will attempt to fit into different sized spaces and clash together. Instead, try creating a nav with a gradient, and then making transparant buttons above the nav, so you don't need to specify a new gradient. This is a bit difficult to explain, so check below:
For the navigation button, just leave out the background entirely when it isn't being hovered, and it will show the #nav color behind, like here.
As a more general example:
#nav{
/* gradients here! */
}
.button /* not hovered */
{
/* Don't set a background color - it will be transparant. */
}
.button:hover /*the same button when it's hovered. */
{
background: #123456;
}
(Also PS: never use something like height: 7%; for the nav. It ends up scaling improperly.
Use a definite height, like height: 48px.
If you really want to make a responsive website, a CSS Media Query would be better suited in this situation.
Why do you have a HomeHover in your css? That way, it looks for #nav, then a HomeHover tag inside the nav and then the anchor tag to match.
nav a:Hover will do.
The background-image seems to be drawn over the background-color. You need to set the background-image to something else on the hover.
nav a:hover {
background-color: #44597F;
background-image: none;
}
Fiddle
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.
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.