Configure the text, Image Gallery, within an h1 element, and within the title element. 2. Code a div assigned to the id named gallery. This div will contain the thumbnail images, which will be configured within an unordered list. 3. Configure an unordered list within the div. Code four li elements, one for each thumbnail image. The thumbnail images will function as image links with a :hover pseudo-class that causes the larger image to display on the page. We’ll make this all happen by configuring an anchor element containing both the thumbnail image and a span element that comprises the larger image along with descriptive text. An example of the first li element is Golden Gate Bridge 3.Photo2 is California Beach Photo3 is Rocky Shoreline Photo4 is Pacific Sunset 4. Display your page in a browser. You’ll see an unordered list with the thumbnail images, the larger images, and the descriptive text. Set the gallery id to use relative positioning #gallery ( position: relative; ) The unordered list in the gallery should have a width of 250 pixels and no list marker. #gallery ul ( width: 250px; list-style-type: none: ) Configure the list item elements in the gallery with inline display. and 10 pixels of padding. #gallery display: inline; float: left; padding: 10px The images in the gallery should not display a border. #gallery img ( border-style: none: ) Configure anchor elements in the gallery to have no underline, #333 text colör, and italic text. #gallery a { text-decortion: none; color: #333; font-style:italic; } Configure span elements in the gallery not to display initially. #gallery span {display: none:} Configure the span elements in the gallery to display only when the web visitor hovers the mouse over the thumbnail Image link. Set the location of the span to use absolute positioning. Locate the span 10 pixels down from the top and 300 pixels in from the left. Center the text within the span: #gallery a :hover span { display : block; postion: absolut top: 10px; left: 300px; text-align: center;} Now, view the result. If everything goes well, move the embedded css to an external css. Provide the necessary link in the html to make it work.

Configure the text, Image Gallery, within an h1 element, and within the title element. 2. Code a div assigned to the id named gallery. This div will contain the thumbnail images, which will be configured within an unordered list. 3. Configure an unordered list within the div. Code four li elements, one for each thumbnail image. The thumbnail images will function as image links with a :hover pseudo-class that causes the larger image to display on the page. We’ll make this all happen by configuring an anchor element containing both the thumbnail image and a span element that comprises the larger image along with descriptive text. An example of the first li element is Golden Gate Bridge 3.Photo2 is California Beach Photo3 is Rocky Shoreline Photo4 is Pacific Sunset 4. Display your page in a browser. You’ll see an unordered list with the thumbnail images, the larger images, and the descriptive text. Set the gallery id to use relative positioning #gallery ( position: relative; ) The unordered list in the gallery should have a width of 250 pixels and no list marker. #gallery ul ( width: 250px; list-style-type: none: ) Configure the list item elements in the gallery with inline display. and 10 pixels of padding. #gallery display: inline; float: left; padding: 10px The images in the gallery should not display a border. #gallery img ( border-style: none: ) Configure anchor elements in the gallery to have no underline, #333 text colör, and italic text. #gallery a { text-decortion: none; color: #333; font-style:italic; } Configure span elements in the gallery not to display initially. #gallery span {display: none:} Configure the span elements in the gallery to display only when the web visitor hovers the mouse over the thumbnail Image link. Set the location of the span to use absolute positioning. Locate the span 10 pixels down from the top and 300 pixels in from the left. Center the text within the span: #gallery a :hover span { display : block; postion: absolut top: 10px; left: 300px; text-align: center;} Now, view the result. If everything goes well, move the embedded css to an external css. Provide the necessary link in the html to make it work.

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter1: Getting Started With Html5: Creating A Website For A Food Vendor

Section: Chapter Questions

Problem 8CP2

See similar textbooks

Related questions

Question

Configure the text, Image Gallery, within an h1 element, and within the title element.

2. Code a div assigned to the id named gallery. This div will contain the thumbnail images, which will be configured within an unordered list.

3. Configure an unordered list within the div. Code four li elements, one for each thumbnail image. The thumbnail images will function as image links with a :hover pseudo-class that causes the larger image to display on the page. We’ll make this all happen by configuring an anchor element containing both the thumbnail image and a span element that comprises the larger image along with descriptive text. An example of the first li element is

<li><a href="photo1.png"><img src="photo1thumb.png" width="100"

- height="75" alt="Golden Gate Bridge">
- <span><img src="photo1.png" width="250" height="150"
- alt="Golden Gate Bridge"><br>Golden Gate Bridge</span></a> </li>
- 3.Photo2 is California Beach
  
  Photo3 is Rocky Shoreline
  
  Photo4 is Pacific Sunset
  
  4. Display your page in a browser. You’ll see an unordered list with the thumbnail images, the larger images, and the descriptive text.
  
  Set the gallery id to use relative positioning #gallery ( position: relative; )
  
  The unordered list in the gallery should have a width of 250 pixels and no list marker.
  #gallery ul ( width: 250px; list-style-type: none: )
  
  Configure the list item elements in the gallery with inline display.
  and 10 pixels of padding.
  #gallery display: inline; float: left; padding: 10px
  
  The images in the gallery should not display a border. #gallery img ( border-style: none: )
  
  Configure anchor elements in the gallery to have no underline, #333 text colör, and italic text. #gallery a { text-decortion: none; color: #333; font-style:italic; }
  
  Configure span elements in the gallery not to display initially. #gallery span {display: none:}
  
  Configure the span elements in the gallery to display only when the web visitor hovers the mouse over the thumbnail Image link. Set the location of the span to use absolute positioning. Locate the span 10 pixels down from the top and 300 pixels in from the left. Center the text within the span:
  #gallery a :hover span { display : block; postion: absolut top: 10px; left: 300px; text-align: center;}
  
  Now, view the result.
  
  If everything goes well, move the embedded css to an external css. Provide the necessary link in the html to make it work.

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 5 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions