[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
spanimg alt= src=images/popimage1.jpg /span
/a
a href=#
img alt= src=images/thumbimage2.jpg
spanimg 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/
