Explore the solution and an explanation.
- [Instructor] Here's my solution to your challenge.…To save some time, I've already added the basic…image elements with their source and alt attributes.…The images I added were the German flag on line 17 and 18,…the Munich flag on lines 23 and 24,…the museum clock on lines 28 and 29,…and the city view image on lines 35 and 36.…Let's go to the browser to verify that the images display.…Now that we know that,…I can make them look more like I want them to.…
My first task is to center the heading…in the internal stylesheet by adding text-align,…center.…I'll save that and reload it in the browser.…The flags are way too large…and the vertical alignment also needs centering.…The flag dimension is 320 by 192,…so I'll divide each of them by three.…That'll make the width…107…and the height 64.…
I want to do this on only one flag first.…That way, if it doesn't look right,…I have only one change to make instead of two.…So a save and a reload…tells me that the size is right.…Now, I add a style…to get the vertical-align in the middle.…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.