Use yoga.css: { box-sizing: border-box; } body { background-color: #3F2860; colo

Question

Use yoga.css:

{   
   box-sizing: border-box;
}

body {
background-color: #3F2860;
color: #3F2860;
font-family: "Verdana", sans-serif;
}

header {
background-image: url("lilyheader.jpg");
text-align: center;
}

h1 {
padding-top: 50px;
padding-left: 2em;
}

nav {
padding: 1em;
font-style: bold;
float: left;
width: 160px;
}

nav a {
text-decoration: none;
display:block;
text-align:center;
font-weight: bold;
border: 3px outset #ccc;
padding: 1em;
margin-bottom: 1em;   
}

nav a:link{
   color: #3F2860;
}

nav a:visited{
   color: #497777;
}

nav a:hover{
   color: #A26100;
   border:3px inset #333;
}

nav {
//font-style: bold; wrong
font-weight: bold
}

.studio {
font-style: italic;
}

footer {
padding: 1em;
background-color: #9BC1C2;
font-size: inherit; // small tag
font-style: italic; // for italic tag
text-align: center;
}

nav {
font-style: bold;
}

#wrapper {
background-color: #F5F5F5;
max-width: 1480px;
min-width: 1200px;
width: 80%; // width is not required if you're specifying min-width and max-width
margin-right: auto;
margin-left: auto;
}

main {
padding-right: 2em;
padding-left: 2em;
}

img {
padding-right: 1em;
padding-left: 1em;
}

#hero {
text-align: center;
}

1. Code a nav ul descendant selector to configure unordered lists in the navigation area to display without list markers. Also, configure unordered list to have no left padding.

2. Edit the styles for the main element selector. Add new style declarations to configure a 170 pixel left margin and 1em top padding.

3. Remove the img element selector and style declarations.

4. Configure a new class named floatleft that floats to the left with right margin set to 4em.

5. Remove the #hero selector and style declaration.

6. Configure styles for a new class named clear with a clear: both; style declaration.

7. Add the following CSS to be compatible with most older browsers:

header, nav, main, footer { display: block; }

Explanation / Answer

{   
box-sizing: border-box;
}
body {
background-color: #3F2860;
color: #3F2860;
font-family: "Verdana", sans-serif;
}
header {
background-image: url("lilyheader.jpg");
text-align: center;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
padding: 1em;
font-style: bold;
float: left;
width: 160px;
}
nav ul {
list-style-type: none;
padding-left: 0cm;
}
nav a {
text-decoration: none;
display:block;
text-align:center;
font-weight: bold;
border: 3px outset #ccc;
padding: 1em;
margin-bottom: 1em;   
}

nav a:link{
color: #3F2860;
}
nav a:visited{
color: #497777;
}
nav a:hover{
color: #A26100;
border:3px inset #333;
}

nav {
//font-style: bold; wrong
font-weight: bold
}
.studio {
font-style: italic;
}
footer {
padding: 1em;
background-color: #9BC1C2;
font-size: inherit; // small tag
font-style: italic; // for italic tag
text-align: center;
}
nav {
font-style: bold;
}
#wrapper {
background-color: #F5F5F5;
max-width: 1480px;
min-width: 1200px;
width: 80%; // width is not required if you're specifying min-width and max-width
margin-right: auto;
margin-left: auto;
}
main {
padding-right: 2em;
padding-left: 2em;
margin-left: 170px;
padding-top: 1em;
}
floatleft {
float: left;
margin-right: 4em;
}
clear {
   clear:both;
}
header, nav, main, footer { display: block; }

Related Questions

Navigate

• Browse (All)
• Browse U
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.