SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link to popup photo when clicked is not the right color

    I'm trying the Dynamic Drive Popup Image Viewer http://www.dynamicdrive.com/style/cs...e-viewer/P230/ to show photos of menu items for a restaurant: http://truethairestaurant.com/menuTabs.htm. I also happen to be trying the Spry Tabbed Panels in Dreamweaver CS3.

    The photos seem to be working reasonably well (except in Opera). The viewer is supposed to hover over the link which is just a text link to see the photo. This works ok. If by chance the viewer were to click on the link, the text link changes to a dark font color. It's supposed to be yellow. I've tried all kinds of things to try to keep the text yellow if someone clicks on it by mistake. I tried adding .thumbnail a: visited with a yellow font to see if that would work. No luck. I can't figure out where to create a style for a situation in which someone is doing something they're really not supposed to ie. click instead of hover.

    If you go to the web page, you need to scroll down a little because I only have photos for a few of the items. If you click on one of the "photo" links you'll see what I mean.

    Code:
    .thumbnail {
    	color:#FFBC01;
    	width: 2.5em;
    	background:#626E2C;
    	font-weight:normal;
    	font-size:0.8em;
    	text-decoration:none;
    	border: 2px solid #630000;
    	padding: 0 2px 0 2px;
    	white-space:nowrap;
    	/*display:block;*/
    }
    
    
    .thumbnail:hover{
    	position:relative;
    	background:#FFBC01; 
    	color:#630000;
    	/*background-color: transparent;*/
    	z-index: 50;
     
    }
    
    .thumbnail a:visited {
    	color:#ffbc01;
    }
    
    
    .thumbnail span{ /*CSS for enlarged image*/
    	position: absolute;
    	color:#FFBC01;
    	background: #626E2C;
    	font-size:1.2em;
    	font-weight:bold;
    	padding:5px;
    	left: -1000px;
    	border:solid 3px #630000;
    	display:none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    	padding:2px;
    	border: 0;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    	display:block;
    	top:-100px;
    	z-index: 50;
    	left: 50px;
    	
    }
    HTML for 2 items with photo links:

    HTML Code:
    <h2>Fried Corn Cakes <a class="thumbnail" href="#thumb"> photo <span><img src="images/menu/CornCakes.jpg" alt="Fried Corn Cakes" /><br />Fried Corn Cakes</span></a></h2>
            <div class="description_1">Excellent by themselves, even better with our piquant dipping sauce.</div>
            <div class="clear"></div>
            <div class="description"> Six to an order</div>
            <div class="price">$5.50</div>
            <div class="dots">&nbsp;</div>
    
    
            <h2>Thai Omelette <a class="thumbnail hoverlink" href="#thumb"> photo <span><img src="images/menu/ThaiOmelette.jpg" alt="Thai Omelette" /><br /> Thai Omelette</span></a></h2>
            <div class="description_1">You simply won't believe how tasty eggs can be until you try this traditional Thai egg dish. Comfort food served with rice.</div>
            <div class="clear"></div>
            <div class="description">Vegetarian </div>
            <div class="price">$8.95</div>
            <div class="dots">&nbsp;</div>
            <div class="description">Chicken, Beef or Pork </div>
            <div class="price">$9.95</div>
            <div class="dots">&nbsp;</div>
            <div class="description">Shrimp</div>
            <div class="price"> $10.95</div>
            <div class="dots">&nbsp;</div>
    As for Opera, the photo breaks up or just doesn't show up. There is a fix to use display:block for the text link, but I don't want the link to drop to the next line. I tried display:inline-block but Opera doesn't seem to get what I want to do. I then tried a hack to make something visible only to Opera,

    @media screen and (min-width: 0px){
    .thumbnail {display:block;}


    but it appears the Safari 3 sees this and then it displays in a way I don't want it to.

    Any ideas on this?

    Thanks much for the help.

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amy55407 View Post

    Code:
    .thumbnail a:hover{
    	position:relative;
    	background:#FFBC01; 
    	color:#630000;
    	/*background-color: transparent;*/
    	z-index: 50;
     }
    
    .thumbnail a:hover span{ /*CSS for enlarged image on hover*/
    	display:block;
    	top:-100px;
    	z-index: 50;
    	left: 50px;
    	
    }
    At first glance, It looks like your forgot the 'a' in ':hover'. I added it above, see if that works? As for the other stuff, I'm not sure

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The original code was that way. I did try adding the "a" but then it didn't work at all. I tried this and it works in all but IE.

    Code:
    .thumbnail:visited {
    	color:#ffbc01;
    }
    
    .thumbnail:active {
    	color:#630000;
    }
    
    
    .thumbnail:hover{
    	position:relative;
    	background-color:#FFBC01; 
    	color:#630000;
    	/*background-color: transparent;*/
    	z-index: 50;
     
    }
    I believe that the correct order for pseudo links is visited, hover, active. But when I did it that way it didn't work. Reversing active and hover got me back my yellow text.

    As for Opera, I decided to use the block element that only Opera and Safari 3.0 detect. I don't know that anyone's using Safari 3 yet and this makes it work better across browsers.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •