1. Read about [CSS Layout](http://learnlayout.com/)
1. Read about [CSS Layout](http://learnlayout.com/)
@ -24,7 +24,7 @@ Go to the following websites to:
Next, use the index.html and style.css in this folder to complete the assigment.
Next, use the index.html and style.css in this folder to complete the assigment.
###Part 2 - Navigation
### Navigation
1. Inside the nav element, delete the heading and replace it with 3 **li** tags in an unordered list.
1. Inside the nav element, delete the heading and replace it with 3 **li** tags in an unordered list.
- Within each list element, place an **a** and make the text inside of each **a** "Portfolio", "Bio", and "Contact", respectively. Set the **href** property on the **a** tag equal to "#". This will simply direct the link back to the same page.
- Within each list element, place an **a** and make the text inside of each **a** "Portfolio", "Bio", and "Contact", respectively. Set the **href** property on the **a** tag equal to "#". This will simply direct the link back to the same page.
- In your css file, underneath where you see the style for the **nav** (you want to keep all of your navigation styles in the same place), select only the **ul** tag that is inside of the **nav** and give it the following styles...
- In your css file, underneath where you see the style for the **nav** (you want to keep all of your navigation styles in the same place), select only the **ul** tag that is inside of the **nav** and give it the following styles...
@ -52,15 +52,24 @@ Next, use the index.html and style.css in this folder to complete the assigment.
text-decoration: none;
text-decoration: none;
text-transform: uppercase;
text-transform: uppercase;
```
```
**Commit 1** <br>
<hr>
Write an appropriate commit message to reflect what's you've done to your files.
<hr>
###Part 3 - Aligning Left and Right
### Aligning Left and Right
1. Try floating all of your **nav li** elements to the right, then move them back to the left.
1. Try floating all of your **nav li** elements to the right, then move them back to the left.
- Try giving only one of you **nav li** elements an ID of 'right' and then float just that one right. Remove the ID if you hate how this looks.
- Try giving only one of you **nav li** elements an ID of 'right' and then float just that one right. Remove the ID if you hate how this looks.
- Give your **nav** element a left margin so that it lines up with the blue boxes on the page, then set it back to 0.
- Give your **nav** element a left margin so that it lines up with the blue boxes on the page, then set it back to 0.
- Find the aside in the CSS, erase its 'right' property and set its 'left' property to 0.
- Find the aside in the CSS, erase its 'right' property and set its 'left' property to 0.
- How should you change the style on the large section so that it is flush with the right side?
- How should you change the style on the large section so that it is flush with the right side?
###Part 4 - Layout
**Commit 2** <br>
<hr>
Write an appropriate commit message to reflect what's you've done to your files.
<hr>
### Layout
1. Locate the **p** tags in each of the small boxed and briefly write your answers to the following five questions in each, respectively
1. Locate the **p** tags in each of the small boxed and briefly write your answers to the following five questions in each, respectively
- What is the default display style of a **div** tag?
- What is the default display style of a **div** tag?
- What is the best way to horizontally center an element?
- What is the best way to horizontally center an element?
@ -69,11 +78,19 @@ Next, use the index.html and style.css in this folder to complete the assigment.
- What is a 'clearfix'?
- What is a 'clearfix'?
- Give all of your **p** tags a margin of 0px and give your boxes a top/bottom padding of 10px and a right/left padding of 5px, using CSS shorthand
- Give all of your **p** tags a margin of 0px and give your boxes a top/bottom padding of 10px and a right/left padding of 5px, using CSS shorthand
**Commit 3** <br>
<hr>
Write an appropriate commit message to reflect what's you've done to your files.
<hr>
### Change the Colors
###Bonus
Without adding any new IDs or classes, give each of your **p** tags a different font color from this [page](http://www.crockford.com/wrrrld/color.html). You will need to look up what first-child, last-child, and nth-child pseudo-classes are.
Without adding any new IDs or classes, give each of your **p** tags a different font color from this [page](http://www.crockford.com/wrrrld/color.html). You will need to look up what first-child, last-child, and nth-child pseudo-classes are.
Set your header, aside, and footer position to 'fixed', add a margin-top of 150px to your aside and set your body height to 2000px. Scroll down and see what happens.
Set your header, aside, and footer position to 'fixed', add a margin-top of 150px to your aside and set your body height to 2000px. Scroll down and see what happens.
**Commit 4** <br>
<hr>
Write an appropriate commit message to reflect what's you've done to your files.
<hr>
###Experiment!
###Experiment!
Go to [http://www.cssdesk.com/](http://www.cssdesk.com/), copy and paste your CSS and HTML into the appropriate areas and try adding different colors, display properties, position properties, borders, etc to your elements. Try to make the layout completely unrecognizable.
Go to [http://www.cssdesk.com/](http://www.cssdesk.com/), copy and paste your CSS and HTML into the appropriate areas and try adding different colors, display properties, position properties, borders, etc to your elements. Try to make the layout completely unrecognizable.
Kristyn Bryan
10 years ago