>[css-d] Positioning- relative or absolute? >Tawnya >Thu Apr 24 03:47:10 CDT 2008 > >Hi list, I've been lurking like a mad fiend for awhile here and I have >to say I have found it to be very rewarding. In fact reading css-d is my >coffee break reward! LOL
>I have almost run to deadline and would like to be a bit more flexible >in the placement of the gallery and popup box. I would like to be able >to position the box relative to the gallery div, but I seem to only be >able to get it positioned relatively or absolutely to the hyperlinked >thumbnail. Every which way but where I want it. My best solution was to >place the gallery at the top of the content and position the popup image >fixed to the page also at the top. >I also am having trouble with loading this page and crashing one of my >browsers (FF 2.0.0.14) on my machine but not on a laptop running the >same browser and OS. The page runs fine from my own HD but crashes when >live. I need to know if this is just my machine or not (I apologize in >advance if it crashes yours). I have only tested it in FF and IE6 so >far. > >Any comments or critiques that could help me write better CSS are >appreciated :) > >URL: http://www.closetsdoneright.com/backups/back-08.04.xx/index.htm >CSS: http://www.closetsdoneright.com/backups/back-08.04.xx/style.css > >Thanks, >Tawnya. So, I guess I scared you all off testing my page. No worries though, found a solution at tkj Design[1] found that this code did not work to align the popups with the gallery as I wanted. HTML <div id="gallery"> <a class="pop" href="#"> <img class="thumb" alt="" src="images/thumbimage1.jpg" width="86" height="50" > <img class="thumbpop" alt=" src="images/popimage1.jpg" > </a> <a class="pop" href="#"> <img class="thumb" alt="" src="images/thumbimage2.jpg" width="86" height="50" > <img class="thumbpop" alt=" src="images/popimage2.jpg" > </a> </div> CSS #gallery {margin:20px auto;} #gallery a.pop img.thumb {border:1px solid #000;}/* thumbnail style */ #gallery a .thumbpop {width:0; height:0; border:0px solid #fff;}/* initial size of pop-pic */ #gallery a.pop:hover {background-color: #8c97a3;}/* pop link hover style */ #gallery a.pop:hover img.thumbpop {position:absolute; top:100px; left:180px; width:auto; height:auto;}/* pop-pic hover position */ #gallery a.pop:hover img.thumbpop {padding:5px; border:1px solid #305fbf; background-color:#fff;}/*pop-pic hover style */ But the solution was even simpler; HTML <div id="gallery"> <a href="#"> <img alt="" src="images/thumbimage1.jpg" > <span><img alt="" src="images/popimage1.jpg" ></span> </a> <a href="#"> <img alt="" src="images/thumbimage2.jpg" > <span><img alt="" src="images/popimage2.jpg" ></span> </a> </div> CSS #gallery {position:relative; padding:5px; background-color:#fff;} #gallery a {display:inline; padding:0px; color:#000;} #gallery a img {border:1px solid #000;} #gallery a:hover {background-color:transparent;} /* this is needed for MSIE */ #gallery a span {display:none;} #gallery a:hover span {display:inline; position:absolute; top:-250px; left:0; padding:8px; border:1px solid #000; background-color:#fff; z-index:50;} [1] http://www.tjkdesign.com Thanks :) Keep up the good work! Tawnya. No virus found in this outgoing message. Checked by AVG. Version: 7.5.524 / Virus Database: 269.23.6/1407 - Release Date: 4/30/2008 11:35 AM ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
