Join David Powers for an in-depth discussion in this video Positioning the page heading over the image, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- I want to add a heading to this page…and position it over the image of the lake.…The heading needs to be responsive to the…width of the view port.…So I'll use media queries to control its size and position.…I'm using a rather small screen…so I need to collapse the panels on the right…and then expand my page to the full width…by double clicking in the grey area on the right.…Then select the image of the lake,…go to the insert menu,…heading H1,…and the position assist dialog asks…where I want that heading to go.…
I want it to be before the image…so select before,…and insert some placeholder text,…double click that to enter edit mode…and change it to Yosemite.…Click away to exit edit mode.…In order to position that heading over the image,…we need to make the parent element…relatively positioned.…So select the parent element,…because the H1 is already selected,…just press the up arrow once…and that selects the row.…Before we can make it relatively positioned…we need to add an ID to it,…so click the plus button…and the element display…
- Defining a custom Bootstrap layout grid
- Inserting and modifying a navigation bar
- Adding a container for a hero image
- Working with columns inside a Bootstrap container
- Creating placeholder content with Emmet
- Speeding up layout by duplicating columns
- Moving page elements in the DOM
- Previewing the mobile webpage with Device Preview
Skill Level Intermediate
1. Getting Started
2. Creating the Site Navigation
3. Adding a Hero Image
Inserting the hero image6m 37s
4. Working with Columns
5. Using Device Preview
What next?2m 5s
- 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.