ZuoTi.Pro
Question

Need you to explore two of the primary means of positioning elements using CSS.

Recreate the screenshots below using floats.Red Green Absolute Positioning 1 Footer Blue Purple

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Please find my answer:

Dear Champ ,

As per the requirement submitted above , kindly find the solution below.

Here a simple html page is created with the name "CSSPositioning.html". This page is using css style properties like Left , Top , right and bottom also float and position property.

Position Property : The position property in css specifies the type of positioning method used for an element.This position property having values such as static, relative, absolute, fixed, or sticky.

Float Property : The float property in css specifies how an element should float.This property having values such as left ,right , none and initial.

Following section gives details for css file and html file.

style.css :

/* style for body */

body{

background-color :whitesmoke;

}

/* style for div having color red */

.red

{

height:150px;

width:100px;

background-color: red;

color:white;

text-align: center;

float:left; /* for aligning div to the left side*/

top:0px; /* for top of the screen*/

left:0px; /*for left of the screen*/

position: absolute; /* The element is positioned relative to its first positioned (not static) ancestor element*/

}

/* style for div having color green */

.green

{

height:150px;

width:100px;

background-color: green;

color:white;

text-align: center;

float:right; /* for aligning div to the right side */

top:0px;/* for top of the screen*/

right:0px; /* for left of the screen */

position: absolute;

}

/* style for div having color blue */

.blue

{

height:150px;

width:100px;

background-color: Blue;

color:white;

text-align: center;

float:left; /* for aligning div to the left side*/

bottom:0px;

left:0px;

position: absolute;

}

/* style for div having color purple */

.purple

{

height:150px;

width:100px;

background-color: purple;

color:white;

text-align: center;

float:left; /* for aligning div to the right side*/

bottom:0px;

right:0px;

position: absolute;

}

/* style for div having color white */

.white

{

height:200px;

width:500px;

background-color: white;

color:white;

text-align: center;

position: absolute;

left:400px;

}

/* style for div having color footer */

.footer

{

height:150px;

width:100px;

background-color: gray;

color:white;

position: absolute;

left: 200px;

top: 20px;

}

/* style for h1 */

h1{

text-align: center;

}

CSSPositioning.html

<html>

<head>

<title>positioning elements using CSS </title>

<!-- <link> is used to refer external stylesheet -->

<link rel="stylesheet" href="style.css" />

</head>

<body>

<!-- this div is used for red color -->

<div class="red">Red</div>

<h1>Absolute positioning 1 </h1>

<!-- this div is used for white color -->

<div class="white">

<!-- this div is used for red gray -->

<div class="footer">

Footer

</div>

</div>

<!-- this div is used for green color -->

<div class="green">Green</div>

<!-- this div is used for blue color -->

<div class="blue">Blue</div>

<!-- this div is used for Purple color -->

<div class="purple">Purple</div>

</body>

</html>

=====================================================================

Below is the output screen for this web page "CSSPositioning.html"

G positioning elements usi x Positioning.html Red Green Absolute positioning 1 Footer Blue Purple

Please rate my answer if it helped you!!

0 0
Add a comment
Know the answer?
Add Answer to:
Need you to explore two of the primary means of positioning elements using CSS. Recreate the...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Need you to explore two of the primary means of positioning elements using CSS. Recreate the...

    Need you to explore two of the primary means of positioning elements using CSS. Recreate the screenshots below using floats. Absolute Positioning 2 Red Green Footer Blue Purple

  • Python problem: 1. The colors red, blue, and yellow are known as the primary colors because...

    Python problem: 1. The colors red, blue, and yellow are known as the primary colors because they cannot be made by mixing other colors. When you mix two primary colors, you get a secondary color, as shown here: When you mix red and blue, you get purple. When you mix red and yellow, you get orange. When you mix blue and yellow, you get green. Create a text file with the names of two colors in it. Write a program...

  • NEED HELP WITH ALL PLEASE. MICROBIOLOGY You have stained a bacteria using the Gram staining technique...

    NEED HELP WITH ALL PLEASE. MICROBIOLOGY You have stained a bacteria using the Gram staining technique what color would any endospores be if present? A. Colorless B. Green C. Pink D. Blue E. Purple 2. If you omitted the Safranin step in a gram staining procedure, what would be the color of a Gram-negative bacteria? A. Colorless B. Pink C. Green D. Purple E. Blue 3. Bacillus licheniformis would be what color and shape after a Gram staining? A. Purple...

  • need help on 1 and 2 Post Lab Questions Answer the questions below: 1. Which elements...

    need help on 1 and 2 Post Lab Questions Answer the questions below: 1. Which elements are a. Orange b. Yellow c. Liquids 2. When were the elements discovered? Using a periodic table color elements discovered between BC and 1600 AD green, elements discovered between 1601 and 1900 blue, and elements dis- covered between 1901 and the present red. FIGURE 12.2 IMTA VA VIA Lanthanide series Actinide series 3. Which element derives its name from the German word Kobald meaning...

  • You are required to design a colour mixer. It is allowed to use a maximum of only two colours at a time from the available three that are Yellow, Red and Green. The combination of the colours and...

    You are required to design a colour mixer. It is allowed to use a maximum of only two colours at a time from the available three that are Yellow, Red and Green. The combination of the colours and their results are shown in the diagram below, and only Orange and Green colour outcomes are acceptable. Blue Red Yelow Purple Green Orange A. Prepare the truth table for this scenario B. Deduce the canonical sum of products that give you the...

  • Consider: two unopened bags of candy (one Skittles, the other M&M's). The manufacturers state the distribution...

    Consider: two unopened bags of candy (one Skittles, the other M&M's). The manufacturers state the distribution of coloured candies is: M&M's: 23% blue, 21% orange, 17% green, 13% yellow, 12% red, 14% brown Skittles: colours are reportedly distributed evenly, meaning each colour (red, orange, green, blue, yellow, and purple) has a probability of 1/6. Assume that both of these unopened bags have the same number of candies. If they are opened and mixed, and one candy is randomly selected, what...

  • For each of the solutions described below, determine the pH range for the solution using the...

    For each of the solutions described below, determine the pH range for the solution using the information given and the indicator chart Solution A Indicator Used alizarin yellow Indicator color Yellow bromthymol blue yellow methyl violet violet Range bear the 21 less than 7.6 leathen lib really them 5.1 Gooher the 3.2 bromcresol green green methyl red red The pH range for solution A is 3.2 7.6 Solution B Indicator Used methyl red Indicator color yellow Range leroth 67 alizarin...

  • Overview The purpose of this assignment is to explore the manner in which CSS styles can...

    Overview The purpose of this assignment is to explore the manner in which CSS styles can be transported into an external file. Assignment You may find the W3 Schools examples on this process useful (http://www.w3schools.com/css/css_howto.asp). Once you have a working understanding of how to move your stylesheet outside of the HTML file and into a CSS file, remove and style information from your Weekly Assignment #02's HTML file and move it to an externally attached CSS file. When you are...

  • In the future, what do you think will be the primary source of energy for transportation...

    In the future, what do you think will be the primary source of energy for transportation and electricity? I have this chemistry HW and I need help with these 3 questions (question 13, 15 and 16) 13) In the future, (eg, 2037), what do you think ill be the primary sources of energy for a. Transportation? b. Electricity? Explain and justify. Provide any references you've used to arrive at your answer. A good starting reference is McQuarrie, interchapter L. 15)...

  • . Part 1; using CSS: Geologic time is divided into eras, periods, and epochs. The eras...

    . Part 1; using CSS: Geologic time is divided into eras, periods, and epochs. The eras and their periods are: Proterozoic: (none) Paleozoic: Cambrian, Ordovician, Silurian, Devonian, Mississippian, Pennsylvanian, and Permian Mesozoic: Triassic, Jurassic, and Cretaceous. Cenozoic: Paleogene and Neogene. Only the Paleogene and Neogene periods are divided into epochs. They are: Paleogene: Paleocene, Eocene, and Oligocene Neogene: Miocene, Pliocene. Pleistocene, and Holocene Using a document-level style sheet and nested ordered lists, show this information in outline form. The eras...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT