Join Chris Converse for an in-depth discussion in this video Adding the detail containers, part of Create an Interactive Map with jQuery and Dreamweaver.
- View Offline
Now we need to create the CSS and the divs that's going to hold the…city_detail confirmation.…So let's switch back over to index.html, and inside of our CSS panel, let's come…over here and create a new rule.…I am going to create a new class, and the first class is going to be…called .detail_container. Let's choose OK.…Let's come down to Positioning. The first thing we are going to set here is the Position is absolute.…We are going to set a Top value of 35 and a Left of 480.…
We are also going to set a Width of 240 pixels and a Height of 260. Let's choose OK.…Let's click inside of the map container to make sure that our insertion point is…inside of div map container.…Let's come up to our Insert panel.…Let's come over to Layout > insert a div.…Let's come down and choose detail_container and click OK.…
Now we'll see that div pop over into place.…Now we can see our white photography there as well, which is the color we wanted.…Now let's come over to our CSS.…Let's create a new rule, new Class, .city_detail. Let's click OK.…
Take a look at the finished web site here.
- Preparing web graphics
- Preparing the base container
- Manipulating links with CSS
- Adding a drop-down menu
- Downloading jQuery and adding interactivity to a project
- Creating city details
- Overriding click events of anchor tags with jQuery
- Enhancing the design with CSS3