Join Chris Converse for an in-depth discussion in this video Adding structure for the city details, part of Create an Interactive Map with jQuery and Dreamweaver.
- View Offline
Now we are going to create the CSS rules for the information that goes inside…of this .city_detail.…So let's come over to our CSS panel.…Let's create a new rule. New class.…This one is going to be called city photo, .city_photo. Let's click OK.…Next, let's go down to the Box settings. Under Float, let's set a float-left.…Under Margin, uncheck Same for all.…We are going to set 0 on the Top, 15 on the Right, 0 on the Bottom, 0 on the Left.…
Let's come over to our Border settings.…For Same for all, we are going to click solid, 1 pixel, choose white, click OK.…Let's create one more CSS rule, Class, .city_info. Underscore info.…Let's click OK.…Box property is here.…We are going to set a Width of 130 pixels, and we are going to set a float-left on this as well.…
Then we are going to say OK.…I am going to get my cursor inside of this .city_detail div.…Let's delete some of this default text first.…I'll leave one letter there, just to make sure my cursor can still be inside of this area.…From the Insert menu, let's switch over to the Common group.…
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