css - How to make a:hover images scroll with div box -


alite used tutorial site: http://www.webreference.com/programming/css_gallery/index.html

the problem is, when added more images, gallery on right fell out of div margins. fix used overflow:auto. when there lot more images, allowed scroll down div. problem image shown when hover positioned @ top part of div. when scroll down much, image either gets cut out top or doesnt appear @ all. kinda on page right here. if scroll down page far enough wont see post more unless scroll up. there css code can use fix this. want position:fixed effect in div box hover thing. how edit tutorial code that?

the issue step 9 in tutorial

#container li {          float:left;   }  

an important concept know floats clear property. because space of images exceed of containing div, images fall out of div. there several ways resolve issue. read here more http://css-tricks.com/all-about-floats/

1.overflow: auto; have implemented

2.define class

.clear {       clear:both; } 

and put <div class="clear"> right before closing tag of container

3.use pseudo selector :after

.clearfix:after {     content: ".";     visibility: hidden;     display: block;     height: 0;     clear: both; } 

change <div id="container"> ... <div id="container" class="clearfix">

personally, prefer method 3, because makes markup cleaner. aware of browser compatibility method 3.


Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c# - Copy ObservableCollection to another ObservableCollection -

All overlapping substrings matching a java regex -