If you want to preserve state, then you are going to have to use Javascript.
You should probably use a library like jquery to make this easier. Also, the reason your link is broken is because you need to add position: absolute; and top: 20px; to "#collectionOfBlocks a div.description_first". I suggest you look over my code and make sure you know what the point of everything in there is. Goodluck! On Wed, Jan 14, 2009 at 12:14 AM, pkr <[email protected]> wrote: > > 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 > > > -- -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] -~----------~----~----~----~------~----~------~--~---
