Skip to main content
N
necie
Inspiring
November 5, 2008
Question

Hi-Lite Data Extension Needed

  • November 5, 2008
  • 1 reply
  • 380 views
I am creating a web site that has a page which list an event, the person speaking at the event, the date of the event and a link to a PDF of the presentation given at the event. I have 60 or 70 of these on one page and am looking for a way to hilight each block of event info. Are there any extensions that might help me? With a rollover effect or something similar? the list is contantly being added to. I'm new to CSS and and haven't worked wtih tables very often or else I would try to learn how to do this from scratch, but I need to have this up and running relatively soon. Any suggestions of an extension or a tutorial would be greatly appreciated.

Mike
This topic has been closed for replies.

1 reply

N
Newsgroup_User
Inspiring
November 6, 2008
necie wrote:
> I am creating a web site that has a page which list an event, the person
> speaking at the event, the date of the event and a link to a PDF of the
> presentation given at the event. I have 60 or 70 of these on one page and am
> looking for a way to hilight each block of event info. Are there any extensions
> that might help me? With a rollover effect or something similar? the list is
> contantly being added to. I'm new to CSS and and haven't worked wtih tables
> very often or else I would try to learn how to do this from scratch, but I need
> to have this up and running relatively soon. Any suggestions of an extension or
> a tutorial would be greatly appreciated.

You might be able to get away with simply using a :hover style applied to a class on the containing element. For example, here is a very basic page that when previewed the event info area should change background colors when you move the mouse over it.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.eventContainer{
border:solid 1px #009;
padding:25px;
}
.eventContainer:hover {
background-color:#0FF;
}
</style>
</head>

<body>
Previous content area
<div class="eventContainer">
event info heredemo<br />
date: <br />
time: <br />
location:<br />
</div>
Next section of content
</body>
</html>


This code uses a class called eventContainer and then applies a border (to show where it is), and then used the :hover pseudo class on applied to that class (using .eventContainer:hover ) which changes the background color when that element has the mouse pointer over it.

For more info on using CSS for something like this, you should ask in the Dreamweaver general forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=12&catid=189&entercat=y



--
Danilo Celic
| http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices