Modify the CSS below to float to the right the first image with floatright class, to float to the left the second image with floatleft class, and to clear floating elements on both sides of the p element with nofloats class. body { font: 10pt monospace;} img { width: 160px; padding: 2px; border: 1px solid gray; margin: 5px 10px;} img.floatright { /* TODO: Add CSS here */} img.floatleft { /* TODO: Add CSS here */} .nofloats { /* TODO: Add CSS here */}

Modify the CSS below to float to the right the first image with floatright class, to float to the left the second image with floatleft class, and to clear floating elements on both sides of the p element with nofloats class. body { font: 10pt monospace;} img { width: 160px; padding: 2px; border: 1px solid gray; margin: 5px 10px;} img.floatright { /* TODO: Add CSS here /} img.floatleft { / TODO: Add CSS here /} .nofloats { / TODO: Add CSS here */}

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter4: Graphic Design With Css: Creating A Graphic Design For A Genealogy website

Section: Chapter Questions

Problem 4CP4

See similar textbooks

Similar questions

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:…
Design a web page by using div, h1, h2 and image elements as given below. Implement also the box model to set the image in proper way. All the design of elements should be implemented in internal style sheet. h1 Div h2 Animal Pictúres Кoala Penguins Div Koalajpg Penguins.jpg Image
the background-position in the following CSS is: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 100%; Select one: a. bottom center b. center bottom C. right center d. center right
HTML In strictly default block vertical coordinates, the reference positions for the next element placement on the page is the location of the element immediately on top and the left-hand screen position. (TRUE OR FALSE)? If an outer div container contains two inner div elements, and an outer height is given by css to the outer container, and the background color of the outer container is blue then there will always be blue colored space left below the two inner divs (TRUE OR FALSE)? Image elements can have borders surrounding them , and maintained inside a containing element. (TRUE OR FALSE)? In table elements, the most specific HTML level is the tr element ( row element)(TRUE OR FALSE)? Text can be centered inside a div element by using the selector command text-align: center or otherwise placing the text inside another div element with the same background color and applying margin-left command( TRUE OR FALSE)? A paragraph, div element, and h element will assume the…
CSS
How to make this more responsive so that when the screen is small picture and texts will be written in the seperate lines (picture - upper side; texts lower side instead of left - picture and right - text as shown in the pictures) css file: .image-text-container { display: flex; /* Arrange elements horizontally */ align-items: center; /* Align content vertically */ margin: 20px; /* Add some margin around the container */ } html file: <div class="image-text-container"> <figure> <imgsrc="washFace.png"alt="Picture of a woman washing his face"class="full-width-image"> </figure> <article> <h2>Wash your face with water</h2> <p>First off, start by splashing your face with water. It's crucial to clear away the dirt and oil that gathers while you sleep. However, cleanser isn’t needed in the morning; lukewarm water works best. <p> </article> </div>
Hi, this is CSS related question I need help regarding of moving the "Content" near the "Sample" I really need help of adjusting the spacing between them. What code should I use in CSS to edit it? Thank you so much!
Write a program in html Create a CSS style for an H3 element, where: - colour is blue (in RGB format) - text aligned to left - text decoration red wavy underline - text transformed to uppercase
Create a products.html page and add five product images to the page. Create a Product class for each product with the following attributes: Price, Name, Description and Id for each of the product images. Under each product image add an "add to cart" button. Make the id property of the button the id for the product. Add a remove from cart button on each item as well. Create a ShoppingCart.js file (javascript) and include it in the products.html page (<script src ="shoppingcart.js">). In the script, create an empty array to store the items added to the cart. Create a products array and create a product object for each of your products and store it in the products array when the script loads. The shopping cart script should have the following functions: add - Takes an id, finds the product object in the products array and adds it to the items purchased array, remove - Takes an id and removes the corresponding object from the items purchased array and Returns html for displaying the…
Write a sample code for Embedded CSS - The <style> Element
2. Write the CSS for an id named not:ice that is configured to 80% width and centered. 3. Write the CSS to configure a class that will produce a headline with a dotted line underneath it. Choose a color that you like for the text and dotted line. 4. Write the CSS to configure an h1 element selector with drop- shadow text, a 50% transparent background color, and sans-serif font that is 4em in size. 5. Write the CSS to configure an id named feature with small, red, Arial font; a white background; a width of 80%; and a drop shadow.
Add JQuery events that will cause the computer model descriptions to be displayed when the user hovers over the computer model names. Code for index.html: <!DOCTYPE html><html><head><title>Discussion 12</title><link href="style.css" rel="stylesheet" type="text/css"></head><body><header><h1>Custom Computers</h1></header><section><h2>Our custom models</h2><p>Our computer models are built using high-performance hardware</p><div class="computer"><div>The standard model</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet,sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulummetus velit a tortor. Phasellus vel quam eu nunc molestie porta. Maurismassa justo, dignissim eget eleifend sit amet, condimentum.</p></div><div class="computer"><div>The casual gaming model</div><p>Lorem ipsum dolor sit…