Join Chris Converse for an in-depth discussion in this video Creating the main container, part of Create an Interactive Map with jQuery.
- View Offline
Now before we start creating any HTML or CSS I want to refer back to a sketch.…I always recommend creating a sketch of your CSS-based layouts.…This gives us a chance to figure out what some of the measurements are and helps…inform the CSS attributes we're going to be assigning.…So in this project we're going to have an outermost container of 760 pixels…wide by 325 pixels tall.…Inside of this main container I want to use anchor tags that we're going to set…to 20 pixels by 20 pixels and then we're going to import the dots that we…created inside of Photoshop inside of these anchor tags.…
Over in the right-hand side we're going to have our city detail information.…I want the photographs to be 75x75 pixels and next to the city photograph I want…to have a column of text that's going to be 130 pixels wide.…So now that we know what some of our base measurements are going to be let's…go back to Aptana Studio and I want to start by coming into the index.html file, …getting our cursor inside of the body tag area here, and start by…
Take a look at the finished web site here.
- Preparing web graphics
- Creating the main 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