Question 7 Calculate the total width: The picture above is 350px wide. The total width of this element is also 350px. The DIV element below the image has a width of 320px. After applying CSS styling, the DIV element becomes 350px wide (the same as the flower image above it) Using border, margin and padding, add to the DIV CSS styling that will make the DIV element 350px wide (You must use all three). div { width: 320px }

Question 7 Calculate the total width: The picture above is 350px wide. The total width of this element is also 350px. The DIV element below the image has a width of 320px. After applying CSS styling, the DIV element becomes 350px wide (the same as the flower image above it) Using border, margin and padding, add to the DIV CSS styling that will make the DIV element 350px wide (You must use all three). div { width: 320px }

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter5: Designing For The Mobile Web: Creating A Mobile Website For A Daycare Center

Section: Chapter Questions

Problem 14CP3

See similar textbooks

Similar questions

The DIV element below the image has a width of 320px. After applying CSS styling, the DIV element becomes 350px wide (the same as the flower image above it) Using border, margin and padding, add to the DIV CSS styling that will make the DIV element 350px wide (You must use all three). div { width: 320px ..... }
I need to do an image rollover with the article image. Ill send the picture of the original html code and ill post the css in here. I also attached the directions /* the styles for the elements */ * { margin: 0; padding: 0; } html { background-color: white; } body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 850px; margin: 0 auto; border: 3px solid #931420; background-color: #fffded; } a:focus, a:hover { font-style: italic; } /* the styles for the header */ header { padding: 1.5em 0 2em 0; border-bottom: 3px solid #931420; background-image: linear-gradient( 30deg, #f6bb73 0%, #fffded 30%, white 50%, #fffded 80%, #f6bb73 100%); } header h2 { font-size: 175%; color: #800000; } header h3 { font-size: 130%; font-style: italic; } header img { float: left; padding: 0 30px; } .shadow { text-shadow: 2px 2px 2px #800000; } /* the styles for the main content */ main { clear:…
I need the help with the proper code to produce 3 columns using the directions below: Add a DIV element with a class value of "columns". Using style.css, set the width to 90%. Add three DIV elements within "columns" each with a class value of "column". Each DIV should contain identifying text like "DIV #1". Using style.css, set the width to 28.33%, set the margin and padding to 1%, set the height to 140 pixels, set the border to 1 pixel, solid, white. Add a float value of left. Using style.css, add the CSS property "clear", with a value of "both" to footer elements. Add a media selector to style.css for max-width of 479px that changes the float values of the column class to none, and width to 96%
Open the code6-1_table.css file and create the following style rules for the indicated elements: 1. For the table element: Add a 20 pixel grooved gray border and collapse the table borders. 2. For the th and td elements: Add a 1 pixel solid gray border, set the padding space to 5 pixels, and align the cell content with the top-left corner of the cell. 3. For the caption element, set the display the caption at the top-left of the table and set the font size of the caption text to 1.5em. 4. For col element with the id first Col, change the background color to yellow and set the column width to 150 pixels. 5. For col element with the id hourCols, set the column width to 75 pixels. 6. Change the background color of the thead element to aqua.
Draw a wireframe for the home page of your school's website. Write the CSS to configure a grid layout for the wireframe. Write the @media rule to target a typical smartphone device and configure the nav element selector with width set to auto.
Using CSS. Create a style rule for the body element that displays the element as a grid with two columns in the proportion of 2:1 (using fr units) with a column grid gap of 20 pixels
Help me solve this task. Create a new style rule for the square class selector with the hover pseudo-class that specifies a transform property with translate(80px) as the value. MY CSS /* CSS reset */ body, header, main, section, footer, h1, h2 { margin: 0; padding: 0; border: 0; } /* Style rule for body */ body { background-color: #f0d8d1; } /* Style rules for header */ header { padding: 3%; text-align: center; font-size: 1.5em; font-weight: bold; } /* Style rules for main content area */ main { font-family: Verdana, Arial, sans-serif; font-size: 1em; margin: 0 2%; padding: 1em; background-color: #fff; border: 5px double #33091b; padding: 2%; } h2 { padding-bottom: 1%; } section { margin-bottom: 3%; } button { height: 3em; font-size: 1em; } .square { width: 200px; height: 200px; background-color: #33091b; margin-left: 6%; -webkit-animation-name: text-animation,color; animation-name:…