@charset "UTF-8"; /* CSS Document */ /* This sheet controls the appearance of the navigation tabs Navigation tabs begin in the html page as a simple unordered list with a structure like this: Note each link is an h3 header in the class tab-label. Note that the unordered list is a list of class "tabs", so it's a list meant to be displayed as a set of tabs. Note also that the tabs themselves belong to two classes. The default is the tab-label class, indicating that each list item is the label of one of the navigation tabs. In addition, one tab is in the "selected" class, which alters the appearance of the tab that is currently selected This system is based on an example in Michael Bowers, Pro CSS and HTML Design Patterns (2007) */ /* The first rule applies to the nav div as a whole The overflow property is necessary Because this div's contents will be floated, taking them out of the flow, this means any bottom border would appear to be above the enclosed tabs rather than below them. The effects are equally dire without a border, the whole tab system seems to sink distressingly. Technical explanation from Bowers: "A block can be stretched to the width and height of its parent or sized smaller or larger than its parent. When sized larger, it overfows its parent. The overflow property handles how the browser handles overflow." I'm honestly not 100% sure how it works, except that it makes any portion of the child element that overflows its parent's boundaries hidden instead of overflowing. In this case when the overflow is visible, the entire border of the parent element is squeezed up between the top of the parent element and the beginning of the floating child. Making the overflow hidden somehow allos the border to resume its normal flow around its encompassed child elements. Very strange, but absolutely necessary. */ div[id="nav"] { border: none; overflow: hidden; /* use the margin-bottom property to visually merge the nav div with the main content div beneath it. Note that the border and other properties for the main content div are in the site wide css file */ margin-bottom: -1px; /* I add a little letter-spacing for added legibility */ letter-spacing: 0.1em; } /* The second rule changes the appearance of links within the tabs It says: when there is an unordered list of the class "tabs", remove the underline from the links and color them maroon Note that there is a links style in the site style sheet, this overrides the site style */ ul.tabs a:link, ul.tabs a:visited, ul.tabs a:active { text-decoration: none; color: brown; } /* This rule changes the appearance of a tab link when the mouse hovers over it The goal is to increase visibility for the link, also decreases clutter in its unhovered state. In this case, the underline is removed on hover, and the color changes to black*/ ul.tabs a:hover { text-decoration: underline; color: black; } /* This rule says: whenever there is a link element within a tab in an unordered list, display it as if it were a block element rather than an inline element In and of itself this doesn't change the appearance Here is the purpose: "You can render links as blocks so they will stretch to the width of their tab. This allows the user to click anywhere inside a tab to activate the link." */ ul.tabs a {display: block;} /* This next rule applies to the unordered list that contains the navigation tabs, that is, it applies to the invisible element encompassing all tabs It applies a left float to the whole thing, which means it removes the nav tabs from the general flow and sticks them to the far left of the page, but then it makes it 100% width too, so nothing really flows around it, it is just a block element that is removed from the flow within its div, and occupies 100% of the width available Bowers says: "You can float the tab menu container so it encompasses its floated tabs. The selector is ul.tabs. You can make the layout more flexible by setting its width to 100% so it stretches to the width of its container. When using an unordered list, you need to remove its default margins and padding so they do not interfere with the position of the tabs. You can use margin-bottom to put distance between the tab menu and a subsequent content. You can also set the bottom border. In the example, I use a 1-pixel, solid, gold bottom border." I think this float-within-float is what has the bizarre effect that needs to be overridden with the overflow property. Right now, I set a default no margin all around, then adjust the top margin only to create some space between nav and header. It's important in this design to have no bottom margin so the nav merges visually with the main content div */ ul.tabs { float: left; width: 100%; padding: 0; margin: 0; margin-top: 10px; } /* The next rule operates on the list items, which are the container elements for the links. Applying this rule transforms the list from vertical to horizontal (side by side) The key is the percentages. These must be equal to the width of the encompassing element (100%) divided by the number of tabs. In this case, five tabs, 20% each. Since they float left, each snuggles up against the previous one side by side, together using up the whole space. The rule also removes irritating bullets and other styles from the list. */ ul.tabs li { float: left; width: 20%; list-style-type: none; } /* This rule applies to all elements in the class "tab-label" that are within an unordered list in the "tabs" class. In other words, it applies specifically to the h3 headers that contain the links. This styles the tabs themselves. Each tab receives a black border. The margin around each h3 is eliminated. They each receive bottom and top padding. The font-weight is normalized, as compared to the normal header bold. Text is centered. Font size is 10% larger than inherited default. Cursor: pointer changes the appearance of the cursor when it hovers over the h3 element, making it look like a hand with a pointing finger in most browsers. This is an added hint that it's an active link. Border-radius rounds the top corners. Note that in this design, there is no bottom border for the nav div; instead, the bottom borders on the unselected tabs serve as a border for the div. */ ul.tabs *.tab-label { border: 1px solid black; border-radius: 5px 5px 0px 0px; margin: 0; cursor: pointer; padding-bottom: 5px; padding-top: 8px; padding-left: 2px; font-weight: normal; text-align: center; font-size: 1.1em; } /* This rule applies the style that distinguishes the tab that is selected For now, this has to be changed manually in each page that is accessed from the menu. Fortunately, there are only six. No border bottom, to create the visual effect that this tab merges with the main content of the page. Cursor auto changes the arrow cursor to a pointer when the user hovers. Top padding is 2 px more than unselected tabs, this raises the selected tab above nonselected tabs. Bottom padding matches unselected tabs. Left and top borders are thickened to make this tab stand out further. Border-radius matches that of the unselected tabs. The negative margin-top is there to compensate for the extra padding and border along the top, in relation to the other tabs. The negative margin prevents the selected tab from moving out of alignment when the extra padding and border are applied. The text is bolded for even more emphasis. */ ul.tabs li.selected *.tab-label { /* position: relative; */ border-bottom: none; /* top: 1px; */ cursor:auto; padding-bottom: 5px; padding-top: 10px; border-top: 3px solid black; border-left: 2px solid black; border-radius: 5px 5px 0px 0px; margin-top: -3px; font-weight: bold; } /* This rule acts on the first tab when it is selected Since the first tab is always on the far left, if the left border is thickened, it clashes with the maincontent border. This rule uses the first-child pseudo-class. It says: Look for a ul element of the class "tabs." Then find the first li element in the class "selected" that is a child of that ul element. Then search for all elements within that li element that are in the class "tab-label." Apply the thinner border on the left of the box. This code should be able to handle any sort of renaming or reshuffling of the tabs without needing to be changed. */ ul.tabs li.selected:first-child *.tab-label { border-left-width: 1px; }