HTML & CSS- part 11

Question 1

When you fixed the position of an element, you take it out of the normal flow of the HTML. Other elements will encroach on it. How do you prevent this?

Answer 1

Make a “spacer div” that stays in the normal flow using this:

visibility: hidden;

Question 2

How do you explicitly overrule the default stack order of the page?

Answer 2

z-index

This overrides the default stack order (layers of the page).

Question 3

What is the default z-index?

Answer 3

0

Question 4

Tips for making a space div

Answer 4

To make a spacer div for a header:

1. put the spacer div first
2. add a selector for each element in the header to the CSS formatting: div#header h2, div#spacer h2 {
3. copies of all elements in the header should go into the spacer div, too

Question 5

What’s an informal way to think of a vertical navigation bar?

Answer 5

A vertical nav bar is just an unordered list hanging out in a div.

Each list item is a link

Question 6

How do I remove the bullet points from an unordered list?

Answer 6

div#navbar ul {

list-style-type: none;
}

Question 7

What are the steps to build a navbar?

Answer 7

Steps to build a navbar:

1. Create an unordered list
2. Make the list items into links
3. Remove the bullet points
4. Style the anchors
5. Add a background color

Question 8

Instead of putting a navbar in a <div>, newer websites might use what?

Answer 8

<nav></nav>

Question 9

How do you style the div bar just wide enough to fit the list items, but no wider?

Answer 9

display: inline-block;

This is the “shrink to fit” code

Question 10

In a navbar, why would there still be padding on the left side?

Answer 10

Because it’s a list. You can remove this with padding-left: 0;

Question 11

Which kind of margins do block elements add?

Answer 11

Top and bottom margins

Question 12

Code the background of a div blue

Answer 12

background-color: blue;

Question 13

What’s the difference between these?

list-style-type

text-decoration

Answer 13

list-style-type
removes/changes bullet points

text-decoration: none;
removes underling from anchors

Question 14

What happens when you do this?

display: block;

Answer 14

Displays an element as a block element (like <p>).

It starts on a new line, and takes up the whole width

It also adds top and bottom margins

Question 15

Is padding inside an element or outside of it?

Answer 15

Inside

Question 16

How are horizontal navbars styled differently than vertical navbars?

Answer 16

<ul> styling: no differences

<li> styling:
for horizontal navbars, use display: inline;

This puts the list items side-by-side rather than vertically

width: makes sure that each list item is the same width

float: left;

margin-right: .5em (or so) This creates a little space between the list items.

<a> styling: smaller font size

Question 17

In a navbar, how do change what links look like when you hover over them or click on them?

Answer 17

make changes to the LI element.

Question 18

How do you code a background image for the whole page?

Answer 18

div#main {
background-image: url(“images/field-of-poppies.jpg”);
}

Question 19

How can you make a page with a background image load faster?

Answer 19

You can make the page load faster if you use an image slice that’s 1 pixel wide (or tall) and tile it.

Question 20

How do you code a background page with a repeating image? (both horizontally and vertically)

Answer 20

For horizontal repeat: background-repeat: repeat-x;

For vertical repeat: background-repeat: repeat-y;