Jump to content

Menu Items to Span Entire Width


Isaiah 40:31

Recommended Posts

This must be fairly simple, but I can't figure it out. And I have tried to search here but could not find anything relevant. Yes, I am still very new to this stuff.I have a header that is 1022px wide. Inside that header I have seperate div's for each of my menu bar items. They all are to behave the same way, but thought I needed div's so I could give them the appearance of having boxes around them. I want to make all the boxes equal widths spanning the entire width of the header.Do I have to hard code the width of the boxes' div's to be divided evenly across the 1022px, or is there a way of setting it to automatically span the width regardless of how many menu bar items I have?Here is an example of what I'm trying to accomplish: http://www.wdc.com/en/buy/Note it is the line where you have "Products", "Where to Buy", "Support", "About WD", "Partners".On a related topic what is so bad about tables? I see many employers stating "no tables" in there job requirements. Are CSS tables different from HTML tables? Ie.: would using CSS tables be acceptable to said employer?One more question (I told you I'm new): What is the purpose of the octothorpe (#) in CSS coding. I don't see it employed in the tutorials.Thanks for any input!

Link to comment
Share on other sites

If you use divs or list items, you'll need to define the width. Remember to account for the width of any borders you add, or you may overfill your container.Before CSS, tables (and nested tables) became THE way to layout pages with some amount of precision. But that was never the intent of the table element, and the resulting markup becomes hard to maintain. Since the advent of CSS, it has been recognized (in most circumstances) as the superior way to layout pages.So, yeah, if you're looking for a job designing pages, you'd better know CSS pretty cold.Here's an irony. The table remains the only element that can be divided into "cells" that will expand and contract automatically to fill a given space. This means that the autosizing menu thing you described can be done, but only with tables! (And, frankly, a simple table of one row is a pardonable sin, IMO. I use them in exactly this circumstance and don't lose a wink of sleep.)Dropdown and flyout menus are a whole other story, however. There are a variety of <ul> techniques for that.Use the # symbol in CSS as an id selector, usually when you want to tweak 1-2 attributes of a class that has already been defined. Example:

div.content {	background-color: #ffaaaa;	font-family: Arial, Verdana, san-serif;	font-size: .8em;	color: #000000; } div#special {	color: #55ff55;  }

I might apply those definitions like this:

<div class="content" id="special">

What I'm saying here is that my document probably contains a bunch of divs of class "content," but one div of that class needs green type instead of black. Since this div already has an id, using the id as a selector is (slightly) more efficient than adding a second class selector. There are other ways to accomplish the same thing, BTW.

Link to comment
Share on other sites

"Prohibited" isn't a good word for it. Let's just say that people are using them the wrong way, that's all.Tables can be used, and should be used at times, but only to display tabular information. For example, race results or the information obtained through a scientific experiment.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...