cma6,
This is the full page. I changed a couple of classnames. Because of that and the new stuff, this code is not compatible with previous demos.
HIGHLIGHTS:
You asked about padding-right:20px applied to .image. (Class .image has been changed to .imagebox so it’s purpose is clearer.) The padding creates the space between the image and the text at all widths greater than 520px. I added a line of CSS that colors .imagebox pink so the padding is apparent.
.item .imagebox {
[color=blue]background-color:pink; /* TEST background-color. TO BE DELETED. */[/color]
padding-right:20px; /* This creates the appearance of a left margin between text and image. */
}
The seemingly redundant <b> tags are appropriate. If you are a semanticist, you should replace them with <strong> tags and change the CSS accordingly. I’m happy using <b> tags for the time being. Technically, they are inline tags like <span>, <strong>, <em>, <a>, and others. By default, <b> and <strong> apply a bold weight to the enclosed font, <em> applies italics. I am using the <b> tags as text containers and changed their box property from inline to inline-block. You could use <p> tags but would need to negate undesired paragraph styles. The <b> tags are a desirably bold and otherwise blank slate.
The font size is reduced to .9375em at a window width of 700px and narrower.
.items become separated by {margin-top:6px} in the 2 column mode (900px and narrower).
I had already added 6px of white space between the .items by the time I read your post. I am leaving it in place for you to evaluate. If you prefer to increase the bottom margin on the paragraph as indicated in your post, then delete the line from CSS that adds the white space… it’s marked “/* space between .items */” and increase the bottom margin as you wrote.
@media screen and (max-width:900px) {
.item:nth-child(even) {margin-left:0px;}
.item:nth-child(odd) .descript {padding-left:0;}
[color=blue].item + .item {margin-top:6px;} /* space between .items */[/color]
}
The title bar has no fixed height. It’s text is free to wrap.
The text in the title bar is left aligned when the window is wider than 700px; it is center aligned when 700px or narrower.
The “Vintage Textile” logo image is a clickable link to the index page.
The logo image will resize at the narrowest window widths. (You could substitute the larger logo image, if you wish.)
I remember that you talked about arranging the nav menu items in columns. However, your original design is by far the easiest design to code for a fluid environment so this is a useful place to start. If you want columns, please show how you want them to look at different window widths. For the above reason, the nav menu CSS is in a separate file. Easily replaced.
The general “look” of the the nav menu is unchanged, but the HTML and behavior are quite different.
- Menu items with more that one word wrap as a group.
2a. The menu at the top uses exactly the same code as the menu at the bottom.
2b. Adding the class “head” or “foot” to the <ul> assigns the bronze border appropriately.
- The behavior of the “current page” button is activated by the unique ID in the body tag of the current page. The ID in the <body> tag of each page must match an ID in the CSS menu file.
4a The “button” for the “current page” is not clickable. (Very Significant!)
4b. Each list item in the HTML for the nav menu contains a set of <span> tags with the same text as the anchor tags. The <span> tags are used to make the “current page” button non-clickable.
5a. Coloring: The text in the “current page” button is colored black and given your background-color.
5b. The text in unvisited and visited “buttons” is brownish.
5c. Hovered “buttons” are given your background-color and an underline.
5d. Active “buttons” are given your background-color, an underline, and the text turns red.
You can make copies of this latest HTML page, give the copies new names that match links in the HTML menu, then assign an ID to the <body> tag of each copy that matches one of those in CSS, then see how the “current page” button in the nav menu behaves.
The technique I have used to code the menu uses an extra set of tags, <span> tags, that contain exactly the same text as the <a> tags. This is not a semantically cool technique, but it is the easiest and most bullet-proof that I know of. Don’t feel obligated to like it. We can use a more modern technique (without the <span> tags) if you prefer.
NOTE: If you use PHP, then one menu file can be applied to all related pages, top and bottom. In other words, there would be just one actual menu file shared by all pages. The treatment of the “current page” button would be automatic (as coded in menu.css).
Please be aware that this page behavior can be achieved using other combinations of tags and properties. This same page written by another coder, or written by me from scratch next month, would probably be coded somewhat differently. In other words, there’s usually more than one way to skin a cat.