Richard,
Thank you so much for helping me on this. I really appreciate it.
I tried to make it so that the first thumbnail would be active upon
going to the page... so I changed the first link's container to:
#collectionOfBlocks a div.description_first {
left: 0px;
}
and the result is: http://tinyurl.com/9mjvqt
But it seems to have pushed the other links below it... I added:
display: inline; to the #collectionOfBlocks id, which kept everything
in a row, but made the hovers overlap on the links... Any input here?
Again, thanks so much!
On Jan 13, 6:49 pm, "Richard Aday" <[email protected]> wrote:
> As a sidenote, the code above does not validate to the W3C because we have a
> block level element (div.description) inside of an "a" tag.
>
> If you want to fix it, then move div.description outside of the "a" tag and
> wrap both elements inside a div. Then instead of detecting for a:hover, you
> need to detect for div.elementWrapper:hover.
>
> IE6 only supports :hover on a tags, so if you decide to go this way, then
> you will need to write some javascript for IE6 to force a .hover class name
> on divs when you hover over them. Then change your CSS to support div.hover
> as well as div:hover.
>
> Good luck!
>
> On Tue, Jan 13, 2009 at 6:45 PM, Richard Aday <[email protected]>wrote:
>
>
>
> > You guys are funny.
>
> > Because this seemed like an interesting problem, I decided to write the
> > code for it.
>
> > There were 2 ways of doing this:
> > 1) Absolutely position the "description" in the correct place and set
> > display to none. Then when you mouseover it, it would change the display to
> > block.
>
> > 2) In it's default state, the "description" is placed off the screen (far
> > to the left). Then when you hover over the a tag, it changes the position
> > to something valid.
>
> > The second way, in my opinion, is better because it does not need to use
> > display:none; (which causes some screen readers to not read aloud).
>
> > Therefore the code below implements the 2nd way.
>
> > index.html:
>
> >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
> >>http://www.w3.org/TR/html4/strict.dtd";>
>
> >> <html>
>
> >> <head>
> >> <title>CSS Technique: Change content depending on :hover</title>
> >> <link rel="StyleSheet" href="layout.css" type="text/css" media="screen">
> >> </head>
>
> >> <body>
>
> >> <div id="collectionOfBlocks">
> >> <a href="http://www.google.com";>Block 1<div class="description">Number
> >> One</div></a>
> >> <a href="http://www.google.com";>Block 2<div class="description">Number
> >> Two</div></a>
> >> <a href="http://www.google.com";>Block 3<div class="description">Number
> >> Three</div></a>
> >> <a href="http://www.google.com";>Block 4<div class="description">Number
> >> Four</div></a>
> >> </div>
>
> >> </body>
>
> >> </html>
>
> > layout.css:
>
> >> #collectionOfBlocks {
> >> position: relative;
> >> display: block;
> >> height: 200px; //Make sure to set this height
> >> }
>
> >> #collectionOfBlocks a {
> >> }
>
> >> #collectionOfBlocks a div.description {
> >> position: absolute;
> >> top: 20px;
> >> left: -9999px;
> >> }
>
> >> #collectionOfBlocks a:hover div.description {
> >> left: 0px;
> >> }
>
> > On Tue, Jan 13, 2009 at 2:58 PM, Jamie C. <[email protected]>wrote:
>
> >> You douche bag, who would employ a guy that peruses porn sites trying to
> >> get design ideas and cant fix a template in 4 months? The only piece of
> >> functionality or content that you have on the site is a form to capture
> >> some
> >> poor sucker's email address so you can sell it.
>
> >> Holy smokes a whole $15 dollars (The amount you offered to pay) to fix
> >> your code! I might be able to get that DVD I have been saving up for! How
> >> insulting!
>
> >> Stick to your day job hustling tourists at 3-card monte or whatever other
> >> hustle you have.
>
> >> On Tue, Jan 13, 2009 at 5:41 PM, pkr <[email protected]> wrote:
>
> >>> Jamie,
>
> >>> Yeah I come to Google and post in a group thread that has 1200
> >>> members. Boy I sure do know how to generate that traffic huh?
> >>> Elementary detective skills, Sherlock.
>
> >>> Obviously you can tell that I've been trying to emulate that code...
> >>> but because I work (a job.. look it up), I don't have time to come on
> >>> here every day and harass people who are generally interested in
> >>> fixing an issue with their code. The people who responded to my
> >>> previous thread (you included) didn't help, and I even offered to pay
> >>> to have it fixed.
>
> >>> Get out of here with your erroneous statements.
>
> >>> On Jan 13, 8:39 am, "Jamie C." <[email protected]> wrote:
> >>> > 4 months to fix a template problem that hasn't made any progress since
> >>> the
> >>> > last thread and you have a link to some porn site, which is what you
> >>> are
> >>> > obviously promoting. Whatever dude. This group provided you with the
> >>> > knowledge to fix the problem and you made no effort.
>
> >>> > It's called a red herring... look it up.
>
> >>> > On Tue, Jan 13, 2009 at 11:28 AM, pkr <[email protected]> wrote:
>
> >>> > > Jamie,
>
> >>> > > I don't know what seems "suspect" about not finding a solution to a
> >>> > > problem. I am definitely "serious" about fixing this issue. It's been
> >>> > > 4 months and I still haven't figured it out. Don't know how much more
> >>> > > convincing you need from me to persuade you that I want to fix it.
>
> >>> > > On Jan 13, 6:44 am, "Jamie C." <[email protected]> wrote:
> >>> > > > You posted this same thread back in September here:
>
> >>>http://groups.google.com/group/css-design/browse_thread/thread/48a308...
>
> >>> > > > You might want to continue it there if you are "serious" about
> >>> fixing the
> >>> > > > problem.
>
> >>> > > > Seems suspect to me.
>
> >>> > > > Jamie
>
> >>> > > > On Tue, Jan 13, 2009 at 1:56 AM, pkr <[email protected]> wrote:
>
> >>> > > > > Hi all,
>
> >>> > > > > I've been trying to emulate an effect that I saw onwww.abum.com
> >>> > > > > (*warning* content is NSFW)... where in the "Featured Media"
> >>> section,
> >>> > > > > there are four thumbnails. Upon hovering over each, you will be
> >>> able
> >>> > > > > to see that the description changes... I'm trying to achieve this
> >>> > > > > effect with CSS, although some people said javascript would be
> >>> easier.
> >>> > > > > I'd like to use CSS to avoid unnecessary load time, but if
> >>> javascript
> >>> > > > > is the way to go, please show me the light!
>
> >>> > > > > It seems I am on the right path, although it isn't displaying how
> >>> I'd
> >>> > > > > like... you can see the page in question at:
> >>>http://tinyurl.com/8f9dkf
>
> >>> > > > > This is the code that I am using to achieve what I have so far,
> >>> but as
> >>> > > > > you can see, it is a little off from where I'd like it to be.
>
> >>> > > > > CODE:
> >>> > > > > #recommended a:link span, a:visited span {
> >>> > > > > display: none;
> >>> > > > > border: 0;
> >>> > > > > }
> >>> > > > > #recommended a:hover span, a:active span {
> >>> > > > > display: inline;
> >>> > > > > border: 0;
> >>> > > > > }
>
> >>> > > > > Anyone have any idea why this is happening?
>
> > --
> > -Richard Aday
>
> --
> -Richard Aday
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
