Log in

View Full Version : Fix image position at top of vertical UL list?


greek333
01-09-2009, 09:53 PM
Here's my page:


<div id="shop_sidenav">
<h3>Related Products</h3>
<ul id="nav">
<lh><strong>Most Popular</strong></lh>
<li><a href="/Shop/BlockBase/BlockBase.asp">BlockBase</a><ul><li><img src="/Shop/imgs/50/BB_50.png" alt="BlockBase" /></li></ul>
</li>
<li><a href="/Shop/Quilting/Quilting.asp">Quilting Designs, Vols. 1-5</a><ul><li><img src="/Shop/imgs/50/Qm5_50.png" alt="Quilting Designs" /></li></ul>
</li>
<li><a href="/Shop/Kalei/Kalei.asp">Kaleidoscope Collection</a><ul><li><img src="/Shop/imgs/50/Kaleidoscope_50.png" alt="Kaleidoscope Collection" /></li></ul>
</li>
<li><a href="/Shop/EQ6Books/EQ6Simp.asp">EQ6 Simplified book</a><ul><li><img src="/Shop/imgs/50/EQ6Simp_50.png" alt="Simplified" /></li></ul>
</li>
<li><a href="/Shop/EQ6Books/EQ6PiecedDraw.asp">EQ6 Pieced Drawing book</a><ul><li><img src="/Shop/imgs/50/EQ6DRAW_50.png" alt="Pieced Drawing" /></li></ul>
</li>
<li><a href="/Shop/EQ6Books/EQ6AppDraw.asp">EQ6 Appliqu&eacute; Drawing book</a><ul><li><img src="/Shop/imgs/50/EQ6APP_50.png" alt="Applique Drawing" /></li></ul>
</li>
<li><a href="/Shop/DearJane/DJ.asp">Dear Jane</a><ul><li><img src="/Shop/imgs/50/DJCD_50.png" alt="Dear Jane" /></li></ul>
</li>
<li><a href="/Shop/Karen/KarenCD.asp">Karen K. Stone CD</a><ul><li><img src="/Shop/imgs/50/KSCD_50.png" alt="Karen Stone CD" /></li></ul>
</li>
</ul>
<br />
</div>


Here's my CSS:


#shop_sidenav {
FLOAT: right;
BACKGROUND: #ededed;
TEXT-ALIGN: left;
COLOR: #666666;
PADDING: 3px 0px 0px 7px; /*TRBL*/
MARGIN: 0px 0px 0px 7px; /*TRBL*/
WIDTH: 181px;
}
#shop_sidenav p {COLOR: #666666; BACKGROUND: inherit; FONT-SIZE: 70%;}
#shop_sidenav h3 {COLOR: #666666; BACKGROUND: inherit; FONT-SIZE: 70%;}
#shop_sidenav a {COLOR: #666666; BACKGROUND: inherit; TEXT-DECORATION: underline;}

#shop_sidenav ul {
PADDING: 0px;
MARGIN: 0px;
COLOR: #666666;
BACKGROUND: inherit;
FONT-SIZE: 70%;
LIST-STYLE-TYPE: none;
LIST-STYLE-POSITION: inside;
}
#shop_sidenav ul li ul {DISPLAY: inline; LIST-STYLE-TYPE: none;}
#shop_sidenav ul li ul img {DISPLAY: none; FLOAT: right;}
#shop_sidenav ul li:hover ul img {DISPLAY: block; FLOAT: right;}


Currently the image follows the cursor down the list. Each image starts below the link because the ul's are nested.

I'd like to fix the image at the top-right of the LH (easily). I would like to use this code over and over again in the website with shorter or longer UL lists that don't always start at the same pixel position.

Does this make sense? Is it do-able?


Thank you.
-greek
bluewalrus
01-10-2009, 05:55 PM
Like this...?


<!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>
<base href="http://www.electricquilt.com/test/" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#shop_sidenav {
FLOAT: right;
BACKGROUND: #ededed;
TEXT-ALIGN: left;
COLOR: #666666;
PADDING: 3px 0px 0px 7px; /*TRBL*/
MARGIN: 0px 0px 0px 7px; /*TRBL*/
WIDTH: 181px;
}
#shop_sidenav p {COLOR: #666666; BACKGROUND: inherit; FONT-SIZE: 70%;}
#shop_sidenav h3 {COLOR: #666666; BACKGROUND: inherit; FONT-SIZE: 70%;}
#shop_sidenav a {COLOR: #666666; BACKGROUND: inherit; TEXT-DECORATION: underline;}

#shop_sidenav ul li{
PADDING: 0px;
MARGIN: 0px;
COLOR: #666666;
BACKGROUND: inherit;
FONT-SIZE: 70%;
LIST-STYLE-TYPE: none;
LIST-STYLE-POSITION: inside;
}
#shop_sidenav ul li img { visibility:hidden; height:0px; width:0px;}
#shop_sidenav ul li:hover img {
height:50px;
width:65px;
visibility:visible;
position:absolute;
top:7px;
right:7px;}
h3 {
padding-bottom:8px;
}
</style>
</head>
<body>
<div id="shop_sidenav">
<h3>Related Products</h3>
<ul id="nav">
<lh><strong>Most Popular</strong></lh>
<li><a href="/Shop/BlockBase/BlockBase.asp">BlockBase</a><img src="/Shop/imgs/50/BB_50.png" alt="BlockBase" /></li>
<li><a href="/Shop/Quilting/Quilting.asp">Quilting Designs, Vols. 1-5</a><img src="/Shop/imgs/50/Qm5_50.png" alt="Quilting Designs" /></li>
<li><a href="/Shop/Kalei/Kalei.asp">Kaleidoscope Collection</a><img src="/Shop/imgs/50/Kaleidoscope_50.png" alt="Kaleidoscope Collection" /></li>
<li><a href="/Shop/EQ6Books/EQ6Simp.asp">EQ6 Simplified book</a><img src="/Shop/imgs/50/EQ6Simp_50.png" alt="Simplified" /></li>
<li><a href="/Shop/EQ6Books/EQ6PiecedDraw.asp">EQ6 Pieced Drawing book</a><img src="/Shop/imgs/50/EQ6DRAW_50.png" alt="Pieced Drawing" /></li>
<li><a href="/Shop/EQ6Books/EQ6AppDraw.asp">EQ6 Appliqu&eacute; Drawing book</a><img src="/Shop/imgs/50/EQ6APP_50.png" alt="Applique Drawing" /></li>
<li><a href="/Shop/DearJane/DJ.asp">Dear Jane</a><img src="/Shop/imgs/50/DJCD_50.png" alt="Dear Jane" /></li>
<li><a href="/Shop/Karen/KarenCD.asp">Karen K. Stone CD</a><img src="/Shop/imgs/50/KSCD_50.png" alt="Karen Stone CD" /></li>
</ul>
<br />
</div>
</body>
</html>

Newerer Code if you've checked in last 20 minutes
greek333
01-12-2009, 02:47 PM
You are awesome. It works great.

Thank you so much for your help.

: )

-greek