I have a list of images that need to darken on rollover. I would REALLY love to do this without a bloated css rollover technique as anytime spent out of photoshop makes me very happy. I got part of the way there but something is going wrong. Here it is live:
http://daveywhitney.com/dark/
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Darken</title>
<style type="text/css">
#topnav {
float:left;
margin:22px 0 0 50px;
list-style:none;
}
.kitchy {
background-color:#000000;
width:112px;
height:203px;
}
#topnav a:hover{
opacity:.6;
}
#topnav li {
display:inline;
}
</style>
</head>
<body>
<ul id="topnav">
<li class="kitchy"><img src="img/kitch.jpg" /></li>
<li><img src="img/deck_small.jpg" /></li>
<li><img src="img/door_small.jpg" /></li>
<li><img src="img/lumber_small.jpg" /></li>
<li><img src="img/tools_small.jpg" /></li>
<li><img src="img/paint_small.jpg" /></li>
</ul>
</body>
</html>
How is this:
JSFiddle
What I changed:
<ul> and <li> to <div>. Added kitchy class to all menu items,
Changed this CSS:
#topnav {
float:left;
margin:22px 0 0 50px;
list-style:none;
}
.kitchy {
background: #000;
width:112px;
height:103px;
float:left;
margin:5px; /*Optional*/
}
#topnav a:hover{
opacity:.5;
}
This might be what you're looking for :
How to darken an image on mouseover?
Dont set the width, height, for the li, and don't set it to inline, instead use float: left.
See: http://jsfiddle.net/x9M2N/1/
Related
The problem I am having is I cannot figure out why when I target all the images within each li tag they do not come out the same size. They all shrink or get larger but do not stay the same size. The first item will be small then they all gradually increase in size with the last item being the largest.
Here is a snapshot pay attention to the crosses:
Here is my html:
<nav class="nav2">
<ul>
<li><img src="images/down_arrow.png" alt="cross">MENU</li>
<li><img src="images/down_arrow.png" alt="cross">LOCATIONS</li>
<li><img src="images/down_arrow.png" alt="cross">CATERING</li>
<li><img src="images/down_arrow.png" alt="cross">GIFT CARDS</li>
<li><img src="images/down_arrow.png" alt="cross">ORDER ONLINE</li>
</ul>
</nav>
And here is my css for that section if you notice I target the images and give them the same width.
/*SECOND NAV*/
.nav2{
font-size:15px;
color:grey;
}
.nav2 ul{
padding:0;
margin-left:600px;
}
.nav2 li{
display:inline-block;
}
.nav2 li a{
text-decoration:none;
color:black;
font-weight:bold;
height:100%;
width:100%
padding:0;
}
.nav2 li img{
margin:0;
padding:0;
vertical-align: middle;
width:30%;
margin-right:-10px;
}
The ultimate goal is to make them look like this:
Your help is greatly appreciated and thank you in advance.
so for the HTML I have
<section id="slider">
<div class="rslides_container">
<ul class="rslides" id="slider1">
<li><img src="images/IMG_5858.jpg" alt="The Process"></li>
<li><img src="images/IMG_5642.jpg" alt="Pieces of a Quilt"></li>
<li><img src="images/IMG_5764.jpg" alt="Here's Looking at You"></li>
<li><img src="images/IMG_5847.jpg" alt="Which Way Do I Go"></li>
<li><img src="images/IMG_5851.jpg" alt="Which Way Do I Go"></li>
<li><img src="images/IMG_5659.jpg" alt="Which Way Do I Go"></li>
<li><img src="images/IMG_5664.jpg" alt="Which Way Do I Go"></li>
</ul>
</div>
</section>
and for the css I have
#slider
{
width:585px;
background-color:#e0e0e0;
padding:11px;
display:block;
float:left;
margin-left:27px;
margin-top:-621px;
}
any idea why in Chrome it is looking fine but in FF the margin-top is slightly higher and in IE it is even higher than FF and Chrome. Any idea how to fix this?
you need to wrap aside element in a div and then give a float:left; and remove positoin:absolute and margin:left from #slider and use same margin properties you have used for aside element.
Check the DEMO.
#slider
{
background-color:#e0e0e0;
float:left;
margin:25px 0 0 40px;
padding:0 12px;
width:30%;
/*margin-left:370px;
margin-top:80px;
position:absolute;*/
}
.wrap{float:left;}/*contain all aside element*/
Instead of
display:block;
float:left;
Try replacing the two lines with
display: inline-block;
I currently have the following code. I am trying to get the second, third, and fourth "li" elements to vertically-align in the middle of the nav bar. The first "li" is an image, and the second-fourth are all text.
Here is a screenshot of it currently.
http://i49.tinypic.com/bfesl3.png
I have tried using "vertical-align:middle" and padding. Note that the second, third and fourth "li" elements appear vertically-aligned in the middle if viewed in Firefox but not in other browsers.
Here is the code I have.
<ul class = "nav">
<li><img src="img/randomtitle.png" style="padding-left:8px;padding-top:8px;"/></li>
<li>about me</li>
<li>films</li>
<li>contact me</li>
<span class="navlinkimages">
<li><img src="social/social_vimeo.png" height = "30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_youtube.png" height = "30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_facebook.png" height="30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_twitter.png" height = "30px" style = "margin-right:-14px;" /></li>
</span>
</ul>`
CSS Code:
.nav {
list-style-type:none;
padding-left:0;
margin-left:0;
font-family:DinC;
padding-bottom:5px;
background-color: #000000;
border-radius:5px;
height:35px;
}
.navlinkimages {
float:right;
padding-top:5px;
}
.nav li {
display:inline;
vertical-align:middle;
}
ul.nav a:hover {
color:#FA4B2A;
}
.nav li img {
vertical-align:middle;
}
ul.nav a{
text-decoration:none;
margin-right:27px;
color:#FFFFFF;
}
Is there a way to make it vertically-aligned on all browsers?
Thanks!
Try this:
.nav li {
display:inline;
vertical-align:middle;
line-height:35px;
}
Give each of those li a's a class middle:
<li>
<a class="middle" href="aboutme.html" style="REDACTED">about me</a>
</li>
Define middle like:
.middle {
line-height: 35px; /** or same as ul height */
}
Inline elements are always vertically centered within their line-height.
DEMO
Hope someone can help me, I am trying to center my gallery (list items) and I feel I have tried everything and nothing is working, if someone could point me in the right direction it would much appreciated.
http://www.jamessuske.com/thornwood/gallery.php
HTML CODE
<div class="gallery">
<ul>
<li><img src="pics/icon1.jpg" border="0" /></li>
<li><img src="pics/icon2.jpg" border="0" /></li>
<li><img src="pics/icon3.jpg" border="0" /></li>
<li><img src="pics/icon4.jpg" border="0" /></li>
<li><img src="pics/icon5.jpg" border="0" /></li>
<li><img src="pics/icon6.jpg" border="0" /></li>
<li><img src="pics/icon7.jpg" border="0" /></li>
<li><img src="pics/icon8.jpg" border="0" /></li>
CSS CODE
.gallery{
width:965px;
float:right;
}
.gallery ul{
list-style-type:none;.gallery li{
float:left;
text-align:center;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
Centering child elements can be done like this:
Apply text-align:center to the parent element
Remove any floats from children and apply or ensure that the display is inline or inline-block
So something like this:
.gallery ul {
text-align:center;
}
.gallery li {
float:none; /* or just make sure you don't float them */
display:inline-block;
}
Should work for you, if your goal is to center the images but have them in rows.
Can't do it with float left:
Example http://jsfiddle.net/HerrSerker/KvPPe/
.gallery{
width:965px;
}
.gallery ul{
list-style-type:none;
text-align:center
}
.gallery li{
display: inline-block;
}
* html .gallery li { /* IE6 */
display: inline;
}
*:first-child + html .gallery li { /* IE7 */
display: inline;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
You are going to continue to have significant problems with all this because you don't have a doctype and you are in 'quirks mode'. Add this to your very first line: <!DOCTYPE html>.
However, by adding the doctype, this may change the whole layout. But that's the cost of not starting off properly.
Given the following code:
HTML:
<div id="nav_bar">
<ul>
<li >HOME</li>
<li>GALLERY</li>
<li>TO DRINK</li>
<li>TO EAT</li>
<li>LOCATION</li>
<li>CONTACT</li>
<li><img class="flag"src="images/italy_flag.png" alt="" /></li>
<li><img class="flag"src="images/uk_flag.png" alt="" /></li>
<li><img class="flag"src="images/spain_flag.png" alt="" /></li>
</ul>
</div>
CSS:
#nav_bar{
width:745px;
height:20px;
background-image:url(../images/bkg_nav_bar_02.png);
margin:5px auto;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
}
#nav_bar ul{
list-style:none;
text-align:center;
}
#nav_bar a{
text-decoration:none;
font-size:.8em;
margin:0 10px;
font-weight:bold;
color:#FFFF33;
}
#nav_bar li{
display:inline;
margin-bottom:3px;
}
.flag{
position:relative;
float:right;
border:none;
margin-top:4px;
margin-right:10px;
}
The text links are correctly vertical aligned in Safari and Chrome and so are the image links, but in Firefox (3.5) the text links are slightly out of position, a bit towards the bottom. Why?
Sounds like the size of the image is slightly larger than the size of the text.
Try forcing the height of the li in CSS.