Feature possible with CSS?

Forum Moderators: not2easy

Message Too Old, No Replies

Feature possible with CSS?

I want to do something with two table cells but is it possible?

thatonedude

7:21 pm on Jan 26, 2004 (gmt 0)

What I need to have on my page is two cells. The left cell will contain five links. The right cell will contain descriptions about each of those links. For instance, if you hover over one of the links "About Us," the right cell will display a brief paragraph describing our company. If a link is not being "hovered on" then the right cell will remain blank.

I've been searching forums and Google for a little over an hour to no avail.

Is this even possible with CSS or will I have to go make a post in a javascript forum? :-)

Thanks in advance.
JH

thatonedude

7:49 pm on Jan 26, 2004 (gmt 0)

When I first posted, I wasn't exactly sure how to describe the feature I want but I'm thinking that it would be similar to an image rollover. One of those rollovers where you hover over an image and another image on the page changes.

I'm not even sure how to do that although I think it's javascript. Thanks for your patience. :-)

DrDoc

8:37 pm on Jan 26, 2004 (gmt 0)

Welcome to Webmaster World!
It sure is possible to do what you want to do. Take a look at Eric Meyer's way of handling the problem: [meyerweb.com...]

thatonedude

9:26 pm on Jan 26, 2004 (gmt 0)

Fantastic! That's exactly the kind of thing I'm looking for. However, I noticed that he's working (in this example) with DIVs. I'm completely new to CSS and for the page I'm working on, I've got it all set up in tables and cells. I notice that he's got a style so that links appear in one div and the content appears in another:

--------------------------------

div#links
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background: #444;
border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
border-right: 5px double white;}

div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 180px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
color: #BAA; background: #22232F;
font: 13px Verdana, sans-serif; padding: 10px;
border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; background: #333; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>

<body>
<div id="links">
<a href="http://www.meyerweb.com/">Home<span> The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house</span></a>
</div>

--------------------------------

What I'm wondering is how I can convert the <div>s to something like cells. In other words, I need to dumb this style down a bit. :-)

Does this make any sense?
I apologize if it doesn't.

Thanks again.

TGecho

1:36 pm on Jan 27, 2004 (gmt 0)

<edit>Never mind, bad idea</edit>