PDA

View Full Version : help with hoverbox



metathirteen
Mar 19th, 2010, 10:54 PM
having problems making this work right :(
is there anyway i can make it so the pic is regular size just smaller when its in hover?
http://www.switcharoo.vacau.com/practice/test.html

mbaker
Mar 20th, 2010, 04:43 PM
The following may do what you are after. However I suspect it still contains much additional CSS that is not required to achieve the result you want.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://www.switcharoo.vacau.com/practice/" />
<title>Untitled Document</title>
<style type="text/css">
ul.box{background:#0FF; overflow:visible;background: #ddd;
margin: 0 0 18px;
padding: 8px 0 0 8px;
width: 636px;
height: 106px;}
ul.box li img{width:100%; height:60px; border:solid 2px black;}
ul.box li{display:inline; }
ul.box li a{z-index:0; position:relative; float:left; display:inline; overflow:hidden; width: 90px;
height: 98px; white-space:normal; }
ul.box li a:hover{z-index:99; overflow:visible; display:block;}
ul.box li a:hover img{width:50%; height:30px; margin: 15px 22px; }
</style>


</head>
<body>

<ul class="box">
<li><a href="#"><img src="7.jpg" alt="" /></a></li>
<li><a href="#"><img src="7.jpg" alt="" /></a></li>
<li><a href="#"><img src="7.jpg" alt="" /></a></li>
<li><a href="#"><img src="7.jpg" alt="" /></a></li>
<li><a href="#"><img src="7.jpg" alt="" /></a></li>
</ul>

</body>
</html>


Instead of ul.box li a img:hover which causes much flickering, I've used ul.box li a:hover img.

metathirteen
Mar 20th, 2010, 06:50 PM
thanks. its working a lot better now :).
i was trying to copy the method from tinypic.com but i couldnt get it right.
why did you take out position:absolute? just wondering.

mbaker
Mar 20th, 2010, 10:41 PM
why did you take out position:absolute? just wondering.
I'm no expert at CSS, but I have found that less is better, and if something works without a rule, its better to leave it out.

As I said in my first message, I suspect that many of your current rules aren't required. I just did not take the time to figure out which, so left them in. However I suggest that you work on figuring out the minimum that it will work with.

metathirteen
Mar 20th, 2010, 11:47 PM
yea i know what u mean. too many things make it confusing -.-
i still dont understand what im doing wrong to not get the result i want but its working. i keep trying to remake it because i basically copied it from tinypic and it feels like i cheated. i didnt learn anything =/. so im trying to remake it AGAIN. hopefully itll come out better than my last attempt lol.

metathirteen
Mar 21st, 2010, 12:04 AM
see this is what i keep getting when i make it myself :'(
http://www.switcharoo.vacau.com/practice/hover_test2.htm

why doesnt it work?

mbaker
Mar 21st, 2010, 01:47 PM
This may be closer to what you want:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<title>title</title>
<base href="http://www.switcharoo.vacau.com/practice/" />
<style type="text/css">
ul.box{
background-color:#000;
line-height:80px;
}
ul.box li img{width:60px; height:60px; vertical-align:bottom;}
ul.box li{display:inline;}
ul.box li a:hover img{width:80px; height:80px;}
</style>
</head>
<body>

<ul class="box">
<li><a href="#"><img src="http://codingforums.com/img/logo.gif" alt="logo" /></a></li>
<li><a href="#"><img src="http://codingforums.com/img/logo.gif" alt="logo" /></a></li>
<li><a href="#"><img src="http://codingforums.com/img/logo.gif" alt="logo" /></a></li>
<li><a href="#"><img src="http://codingforums.com/img/logo.gif" alt="logo" /></a></li>
<li><a href="#"><img src="http://codingforums.com/img/logo.gif" alt="logo" /></a></li>
</ul>

</body>
</html>

I've removed all z-index - only required if you have overlapping areas and you want to specify which should be on top. You have no overlapping areas so z-index is not required.

I've removed all overflow:visible and position:relative (and subsequently empty rules) - they did not appear to be doing anything.

I've added line-height:80px to give room for the images to expand into. (line-height worked better than height)

I've added vertical-align:bottom; to ul.box li img to place the images at the bottom of the black bar, so when they expand they have room and don't push all the others down.

metathirteen
Mar 21st, 2010, 06:50 PM
um well i was trying to go for this effect:
http://www.switcharoo.vacau.com/practice/test_hover.html

but i try doing it by not looking at the source, but everytime i try i cant ever get it working. even when i look at the source i still dont understand whats making it work and why mine wont -.-

mbaker
Mar 21st, 2010, 10:46 PM
To put it simply, your's doesn't because it doesn't. That is yours is different, so it does something different.

To understand how that works I suggest you do any combination of the following:

One: Look up each of the properties on a CSS reference website. From that write out what each rule is doing.
Two: Experiment - try removing one property at a time and see what happens and/or try changing values and see what happens. Try removing one rule at a time and see what happens.
Three: Compare your style sheet and html to the version that works. What do you have that it does not have and vice versa? Use one and/or two above to work out what effect these differences will have.

Remember:
1. Don't seat the small stuff.
2. Its all small stuff.

metathirteen
Mar 21st, 2010, 11:15 PM
i appreciate ur help but could somebody else help me?
ur advice isnt helping, ive tried that already and still i dont see what im doing wrong. ive been trying over and over for 3-4 days now and i just want to learn what im doing wrong so i can fix it, understand it, and move on to the next project.

metathirteen
Mar 22nd, 2010, 04:51 AM
ok so im trying again and still a no go. i took out everything that doesnt seem too important (margins, padding, etc.) now the pics slide under each other...


ul.box{overflow:visible;}
ul.box li{display:inline;}
ul.box li img{width:60px; height:60px; border:2px solid #fff; margin:10px;}
ul.box li a{z-index:0; position:relative; display:inline; float:left; overflow:hidden;}
ul.box li a:hover{z-index:1; display:block; overflow:visible;}
ul.box li a:hover img{width:90px; height:90px; position:absolute; top:10px; left:10px}


so much for not seating the small stuff. =/

mbaker
Mar 22nd, 2010, 02:47 PM
The problem you are now having is that on hover, one of the containers collapses when you take the content out. Try adding width:70px; margin:1px; to ul.box li a to give it an explicit width, so that it does not collapse on hover.

As I may have mentioned previously I'm not an expert on CSS.

I found this by comparing your CSS code with the CSS from your working example (which I've changed to .box0) as in:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.box{overflow:visible;}
ul.box li{display:inline;}
ul.box li img{width:60px; height:60px; border:2px solid #fff; margin:10px;}
ul.box li a{z-index:0; position:relative; display:inline; float:left;
overflow:hidden; /**/ width:70px; margin:1px; /**/ }
ul.box li a:hover{z-index:1; display:block; overflow:visible;}
ul.box li a:hover img{width:90px; height:90px; position:absolute; top:10px; left:10px}

ul.box0{background:#0FF; overflow:visible;background: #ddd; width: 720px; }
ul.box0 li{display:inline;}
ul.box0 li img{width:70px; height:70px; border:solid 2px black;}
ul.box0 li a{z-index:0; position:relative; float:left; display:inline;
overflow:hidden; width: 74px; height: 74px;margin:10px 10px;}
ul.box0 li a:hover{z-index:99; overflow:visible; display:block;}
ul.box0 li a:hover img{width:205%; height:205%; position:absolute; left:-35px; top: -30px;}

</style>


</head>
<body>

<ul class="box">
<li><a href="#"><img src="pic1.png" alt="" /></a></li>
<li><a href="#"><img src="pic2.png" alt="" /></a></li>
<li><a href="#"><img src="pic3.png" alt="" /></a></li>
<li><a href="#"><img src="pic4.png" alt="" /></a></li>
<li><a href="#"><img src="pic5.png" alt="" /></a></li>
</ul>

<hr style="clear:left" />

<div id="content">
<ul class="box0">
<li><a href="#"><img src="pic1.png" alt="" /></a></li>
<li><a href="#"><img src="pic2.png" alt="" /></a></li>
<li><a href="#"><img src="pic3.png" alt="" /></a></li>
<li><a href="#"><img src="pic4.png" alt="" /></a></li>
<li><a href="#"><img src="pic5.png" alt="" /></a></li>
</ul>
</div>

</body>
</html>


Other than saying compare your CSS to CSS that you know produces the result you want, I don't know how to help further.

metathirteen
Mar 22nd, 2010, 11:15 PM
but WHY does it collapse? wouldnt they just stay where they were and the pic overlap it? and why add it to a and not to just li or img?

mbaker
Mar 23rd, 2010, 03:47 AM
The ul.box li a collapses because the ul.box li a:hover img rule removes the img from its surrounding a by taking it out of the flow by giving it an absolute position. Without contents and without a width of its own, the a collapses.

The img already has a width, and it is giving the img a different width and an absolute position that is causing the problem, so assigning another width to the img won't help. Next out from the img is a, so that is where I put the width. You could always experiment to see what would happen if the width were applied to the li.

phuongtim39
Mar 25th, 2010, 03:39 AM
Here is, in my opinion, the most interesting part:
CSS Code:

//If first time key in date run statement
if(first == 0){
++first;//Track if is the first record key in
items[i] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
//Else continue key in record
else{
entries = items[0].getEntries();//Get number of entries entered
for(j=0; j<entries; ++j){

duplicate = items[j].equals(itemNumber, itemDesc, sellPrice, quantity);//Check for duplication of entries

if(duplicate == true) {
Print.duplicateError();
--i;
--looping;
break;
}
}
if(duplicate == false)//else save record
items[entries] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
___________________
guided tours Argentina (http://www.adventurebound.com/argentina-tours)

metathirteen
Mar 31st, 2010, 05:18 PM
Here is, in my opinion, the most interesting part:
CSS Code:

//If first time key in date run statement
if(first == 0){
++first;//Track if is the first record key in
items[i] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
//Else continue key in record
else{
entries = items[0].getEntries();//Get number of entries entered
for(j=0; j<entries; ++j){

duplicate = items[j].equals(itemNumber, itemDesc, sellPrice, quantity);//Check for duplication of entries

if(duplicate == true) {
Print.duplicateError();
--i;
--looping;
break;
}
}
if(duplicate == false)//else save record
items[entries] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
___________________
guided tours Argentina (http://www.adventurebound.com/argentina-tours)

wtf?!

mbaker
Apr 1st, 2010, 05:04 PM
wtf?!

Rather than comment on something that looks like spam, I think the appropriate response is to use the "report this post" link at the top of the post in question. I've already done that for that post, but feel free to report it also.

Michael.