Join Chris Converse for an in-depth discussion in this video Styling the city detail content, part of Create an Interactive Map with jQuery and Dreamweaver.
- View Offline
Inside the city_info div, let's come in here and delete that default text,…and let's start by typing City.…We'll hit a Return, type Country, hit Return. Description goes here.…Now let's select City.…In the Properties panel let's come down under Format and let's choose Heading 2.…For Country let's select Country and come down to Format and choose …Heading 3. And then for Description goes here...let's just make sure that's…set to a Paragraph setting.…
With that in place, let's come over to the CSS Styles panel.…Let's create a new rule.…I'll move this over a little bit.…We are going to create a compound rule.…We are going to type .city_info h2.…We want to target h2 tags only if they are inside of the city_info div. Let's click OK.…Move this over.…For Font-size, we want to choose 18 pixels.…Let's come over to Box properties.…
For Margin we are going to put 0 for all. Let's click Apply.…Now we'll see city actually goes away up to the top of that container, since…there's no margin across the top. 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