1. Save this unstyled XHTML file (http://www.cs.sfu.ca/CC/165/ggbaker/1107-c1/la

Question

1. Save this unstyled XHTML file (http://www.cs.sfu.ca/CC/165/ggbaker/1107-c1/labs/files/lab5-list.html)

Create a stylesheet for this page. You will be styling only the menu list—the other list should remain unchanged.

i). Make the menu list float to the left. Give it a width of 6em. Give the <div id="main"> a left margin of 7em, so it stays to the right of the menu.

ii). Remove the bullets from the menu items by using the list-style-type property. You will need to use a contextual selector to get at those list items: ul#menu li .

iii). Set the colours and spacing of the elements so it looks something like the screenshot in the attached (see first image)

iv). Hint 1: The list items are coloured by assigning a background colour and thick left and right borders, and removing top and bottom borders (by setting their width to zero). The colours used in the screenshot are #44a, #aac, and #ccf.

v). Hint 2: Whenever you're working on the spacing of elements, start by setting both the margin and padding to zero (for both the <ul> and its <li>s in this case). This will give you a predictable starting point by removing any browser defaults. Add margins and padding from there as needed.

margin: 0;
padding: 0;

You shouldn't be concerned about making your page look exactly like the screenshot, but it should be close.

2. Make another copy of the unstyled XHTML file (with a different file name, obviously). Create another stylesheet for this page. (You should upload both XHTML pages and both CSS files when you're done.)

i). Position the list items in the menu list on one line by setting the display property on the <li>s to inline. Remove the bullets from this list as well.

ii). Set the borders around the <li>, and the bottom border for the <ul>, as you see in the screenshot. Set the background colour and margins/padding as well. The colours used in the screenshot are #ccc and #eef.

iii). Give the “current” menu item a different background colour, as in the screenshot.

Explanation / Answer

question 1:
#menu {
width: 6em;
float: left;
}

ul#menu li {
list-style-type: none;
background-color: #aac;
border-left: .3em solid #ccf;
border-right: .3em solid #44a;
margin: .2em;
padding: .2em;
}

#main {
margin-left: 7em;

}

abbr {
border-bottom: dotted #000;
}


question 2:

ul#menu li {
font: Verdana, Geneva, sans-serif 1em;
display: inline;
list-style-type: none;
border: .1em solid #CCC;
margin: .2em;
padding: .2em;
border-bottom: 0;
}
ul#menu {
border-bottom: .1em solid #ccc;
}

#current{
background-color:#666;
}

ul#menu li a {
text-decoration: none;
font-color: #000;
}
#main {
margin-left: 7em;
font: Verdana, Geneva, sans-serif;
}

abbr {
border-bottom: dotted #000;
}

Related Questions

Navigate

• Browse (All)
• Browse 1
• Subjects

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