OK, cool. I’m gonna hang loose until you finish working on it for the time being. I do not want to be working on something while changes are taking place.
Unless you object, I will probably start with the version that I sent to you and add your changes to that version, if I can. In other words, start from a known good and modify forward rather than revert backwards from wherever you stop today.
Make sense?
In conventional HTML, a link was blue and an active/mousedown link was red. You have colored the text red on :hover, too, so there is no :active indicator. Is that intentional?
Trying to keep my ducks in a row.
Okay, I changed up the color schemes based on your recommendations. I’m done for tonight. Files are updated.
The menu items need appropriate margins and need to be adjusted to their correct positions. The general tab needs a 2nd column layout, thus conserving how vertically long the page stretches.
My previous comment about the color of :hover and :active links was not a recommendation. It was a question… an attempt to determine your design intent. Since the question was interpreted to be a recommendation, I changed the color scheme back to my default and added support for top level anchors which you can tweak to suit yourself. IF YOU WANT RED text on HOVER, GO WITH IT! All I was requesting was clarification… chatter… communication… of your preferences/requirements to avoid a possible coding error.
The “General” tab now has a side-by-side dropdown. It’s tight, but fits with a normal font size.
Menu margins and button positions are repaired.
I am going to guess that some of the bulldozing of the code has been attempts to reduce server calls by reducing the number of images called by using sprites. That is a very good technique that should be practiced but one needs to understand where it can and cannot be used. Too much bulldozing breaks otherwise functional code, which I hope you have learned by now.
The draft copy with the slimmenus required 9 image segments. The slimmenus in this copy requires 5 image segments. Be careful not to trash the wrong segments.
The widemenus have 2 new background images. You can trash the older 6. It is resizable over a small range, maybe 480-700px or thereabouts.
The original banner (logo image) and behavior have been reinstated until such time as we can come up with another workable design.
RECOMMENDATIONS:
(1) Save frequent backups as you code a web page and write-protect them immediately! This includes making backups of relevant CSS files at the same time. (I often use the 8 digit date and a letter as part of the file/folder name in which the backups are kept.)
(2) When something “breaks”, go back to the last good copy and work forward again. (I use a text editor with unlimited UnDos. I can usually step backwards until I find my error. Still important to save a tempy backup before stepping back, though, because any accidental change made interrupts stepping forward. )
(3) When you get stuck, ask for guidance with that particular problem before moving on. Don’t wait until the code is broken in several places before asking for help. Overwhelming is… well, overwhelming.
(4) Better still, if you have an ambitious goal, such as replacing the banner image, let’s talk about the hows and whys of choices made so you can approach a solution more intelligently.
(5) Did I mention, save frequent backups?.. just in case…!
The current files are in the folder: WorldReviewGroup5
Cheers
Yes, these are good suggestions. There were already a couple of folders with the drop down menu code saved, but now I have now write-protected this copy on my hard drive for the necessity of having a “save point” to revert to. I’ll try to use it more frequently. I am fortunate to be able to seek counsel here, and I will learn to take fewer, more targeted steps as half a dozen new lines of CSS can create rippling effects throughout the entire layout. For me, layouts are becoming a visual process of bringing the concepts into action.
Anyway, the test page is updated again. I really like the 2-column layout for the general tab. I’m going to alter the focus and hover states for red coloring. It looks really nice that way.
Now, I’d like to discover how we can bring about a better header image. At present, it gets way too small at slim viewport widths. The little “Welcome to the World Review Group” diddy is not legible at a certain point. In post 34, I have made a new version of the banner for small widths. The link may no longer be up, though, as I’ve been frequently recycling what’s on the web server. Things like star-bar.gif and stuff like that shouldn’t even deserve a spot in the HTML markup, in my opinion.
By all means, so we can see it on your test site
You didn’t address this concern and it’s important that I understand your “drivers”. My rant (if I expressed it) would say that there’s a compromise between functionality and cost. I would love the compare your site to the bloat of one WordPress site, but you get the idea… all of your server calls don’t hold a shadow to a WP site.
The reason this is important is that you reduced the number of divs used by the widemenu. I concluded that maybe “divitis” might be a concern of yours, too. Just guessing, of course. The menu could have been reduced to two images (the number that it uses now) AND retained full width expandability with the original layout, but I didn’t know why you destroyed it, your concerns. Personally, I would have rather left the HTML fully expandable even though it required another level of divs, but that’s me.
So how do your scales balance? Which weighs more: functionality or conservatism?
Mine tilt toward flexible functionality first, and then try to counterbalance by taking reasonably conservative measures. I’m not a minimalist, though. My “happy balance” weighs in on the side of “Suppose I want to tweak this a little or use it elsewhere?” flexibility.
I agree. There are several ways to do that. They all require additional graphics. Depends on how “fancy” you want to be. Since it’s your logo, it’s probably worth whatever it “costs” (within reason) .
With apologies to Leonardo Da Vinci (and you), I’ll try to hack out some ideas using your graphics (an artist I am not ). If you can send the pieces that you used to create the logo, maybe that would help.
Perhaps you could try something like this: the header box could retain its height and the image could be allowed to disappear at the sides of the box as the page narrows. Change images (narrower logo designs) so the logo remains visible in the same height box (sprites could do this). This is the same concept that you tried to use but employs different images. Fancier: Using segmented images, you could keep the frame around the images at the edge of the page.
Okay. I think there may be a way for the graphics to be pieced together into a nonet grid of 9, but my “div-itis” may be flaring as that will probably result in 9-10 more divs! For now, I have uploaded the Adobe Fireworks editable PNG at this location. Let me know if you are successfully able to edit it or not, but I’ll start drawing some ideas for what it could be.
edit: Functionality vs. Conservatism… I just want a functional website. 
I’m aware that I could have used WordPress or TypePad for my site, but this way of doing my site accentuates the conservatism, in my opinion, even if I like the idea of using a lot of image splices/sprites.
If you want to save the browser and internet some work, then reduce image calls (which you’ve started doing) and avoid gradients. I don’t know where transitions fit on the scale - how much cpu time they use - but I would think it would be considerable. (I think Chrome’s dev tools could answer that, though.) Divs are mostly a non-issue except to minimalists, AFAIK. Granted, they CAN be overdone (used needlessly), but even then the workload of rendering them is miniscule compared to server calls, especially for large images, and gradients. You can slap my hand if you wish, but “too many divs” is like the king telling Mozart that his composition had “too many notes” to my ear. If additional divs are needed to achieve an effect, I don’t hesitate to use them (well, maybe sometimes).
I’m working up some crude graphics as a way to place an order with you for the real things. I will use them as layers, if you will.
BTW, my short term crystal ball does not see 9 more divs in your header, so you can go easy on the cortisone.
OK, I’m ready to place my order .
Can you prepare one more Logo img about this width or a fraction narrower that looks better:
And here’s the catch… give it a transparent background. No background pattern, no whitish border, no red bars top and bottom. Just globe, cityscape, and text (or however you want to design it).
If it were made in two layers, text and logo stuff on top, background stuff on bottom, I would want the top layer with a transparent bg.
AND send the greenish gray background image as a separate image. It looks like it’s about 128px wide. Can’t tell the height. With those two items, I should be able to deliver my hack tonight or tomorrow for your perusal.
It adds 3 divs and 4 background images. And loses the 3 foreground images.
Hi, Ronpat, sorry it took me a full day to get back to you.
I believe I have designed some graphics along the lines of what you were asking for. My guess is that you will be segmenting the bottom layer (the red rectangles / greenish grass / white outline) into 9 different bits.
Logo BG
Top Layer Graphic (“World Review Group”)
Both are 500 x 135 pixels. Once we get these designed, maybe the gray bar can make its return somehow (and stay out of the HTML markup).
cheers. -ty
Talk about timing. I was within seconds of posting my hack as-is. Probably good that I didn’t because I still need to code the <h1> header.
If you can send the gray-green background image as a plain image, 614x120 or larger, without any decoration, no ghostly border, blue ends, etc, that would be perfect. I’m doing some layering here. If you don’t have time, I’ll just stretch the height to fit… no prob.
Are you talking about saving the curtain rod at the top? No sweat. It’s in… with no extra markup.
All of this artsy code and there is still only a net increase of 3 divs and 1 image, so the bloat should float. :groan:
I’ll get back to work on the <h1>
Cool. I’m really looking forward to construing the methodology behind this idea as it will conserve the number of divs needed. I figured the curtain rod would have been easily kept in the design on a transparent background.
You mentioned gradients in that they add a lot to the page load, and I see you’re right (i.e. All the extra code there just to cover all modern browsers (they won’t work in IE8 or earlier) and the hover, focus states). Suppose I made a very simple image file with the same gradients and used those instead. Could that be a possibility to substitute the current gradient code with something like that? I simply don’t want to rid of those effects, though. It looks nice.
Here is the rounded, gray-green rectangle background all by its lonesome on a transparent BG (614x120): http://www.worldreviewgroup.com/images/greenbg.gif
Thanks, acquiring a lot of knowledge here.
Interestingly, the .gif that you sent is considerably contrastier/brighter than the one on your web page. It’s “always” better to exchange .pngs if color quality matters. In this case, I think the .gif seems “off”. The color table in a .gif can become mixed up when it is copied and pasted into another image. Maybe that happened here.
Ok, here we go. I think this is good enough to give you an idea of a method of changing images to adapt to changing window widths. I’m sure you can clean up my hacks quite a bit.
Most of the images are .pngs. .gifs would not be suitable in most cases.
If you study the movement in the graphics, I think you’ll be impressed with the dimensional effect of the layers, at least for a few minutes. To me, that makes it worth the additional divs; although the .pngs are pixel heavy, you’re still miles away from the weight of a WordPress site.
When I mentioned that gradients slowed the loading of a page, it is not because of the code in the CSS. Although it does take a few milliseconds longer to read more code, the burden on the browser involves the interpretation of the math required to render the gradient, especially large gradients. Your gradients are modest.
Hope you enjoy this application of your graphics.
https://www.dropbox.com/sh/rcq9yw46mgtsxnu/AAD8MZuPOz71lqFndGs1CT3Ea?dl=0
folder: WorldReviewGroup6
Well, ronpat, this is a very nifty way you have only used 4 divs (the middle one has the nested logo), and that nested div contains the image splice allows for the image to change! I made newer versions of the graphics (including a 4th state), so check it out on the test site thus far. From studying the code so far, it looks as though the images were set up in a way that minimizes the CSS confusion. I also gave the .head .logo div a nice 5 px bottom margin.
I have plenty of backup copies to revert to.
That’s good my gradients are modest… They’re here to stay!
The next on my task list is to work on the mailing list box. I am going to implement an image file with the text “Join the Mailing List”. I guess it should have a text underlay should images/CSS be turned off. I’ll post back after I have a new image for it with a transparent BG. Maybe it will be fine to use the current 3 footer/mailing box divs, but they may just simply need just a little more height.
Wow, sounds like you like the logo treatment ! Yes, it uses 4 divs but you dropped the star-bar so the net gain is 3 divs. That seemed arguably reasonable to me considering the elaborate result! Adding that 4th image was a splendid touch… I love it. Looks really professional, if I say so myself !
I would have added the margin to the top of div.contentbox instead of the bottom of the inner div.logo
.contentbox {
margin: 5px auto 0;
max-width: 600px;
position: relative;
}
It’s best to target the outermost container in a case like this. A margin-bottom on .head would probably have worked, too, but to avoid unforseen complications, I’d add the margin-top to .contentbox.
Aside: I tend to margin-top and margin-left if practical.
Changing the subject…
I opened the subject of “too many divs” (aka. divitis) a couple or three posts ago because you so seem to be troubled by the div count to the point that you destroyed the fluid wide menus. As a survivor of the “table be gone” movement, please allow me a short rant about this latest fad.
<rant>
divitis -
The movement to reduce our use of <div> tags is misguided or misunderstood by the flock.
Tags provide structure to a web page. Ron’s first law of HTML is very simple, if you need a tag, use it; especially if, without the tag, the structure would be weakened or fail in some way.
HTML5 introduced several new tags: <header>, <article>, <section>, <footer>, <nav>, <caption>, <aside>, and others. The “movement” SHOULD be saying “use semantically appropriate tags”, instead of pushing the “too many divs” angle. That’s the wrong message. It’s not about the number of tags (<div> tags especially), it’s about their semantic meaning.
There is nothing wrong with using a generic <div> almost anywhere on a page where a block tag is needed, BUT there are more semantically appropriate tags that can be used to help describe the page to assistive devices. The new tags do not make or break a web page. They open it up to a wider audience of users.
“Too many divs” is stupid. You risk breaking a layout if you weaken the structure. “Some of these divs could be replaced by more semantically appropriate tags” would be a more intelligent “movement”.
I am not shortchanging minimalists nor disrespecting semanticists. I’m just not getting sidetracked my a misguided/misunderstood mantra.
So, my unsolicited advice is: Lighten up on yourself and on divs. They’re good guys.
</rant>
I agree, don’t be hesitant to use divs when their use is warranted.
The usual abuse I see is nesting divs instead of having multiple class attributes. eg
<div class="something">
<div class="something_else">
<div class="yet_something_else">
<div class="and_even_another">
but you know better than to do that
Yes, this logo is definitely an essential piece of the puzzle. Your advice on the bottom margin is noted and duly added in.
It has always seemed to me that div was short for divide. What, then, would constitute a more semantic, targeted use of them than to divide up your design in to the necessary number for your grid?
One of the last touches is to get this mailing list box looking good. I borrowed the old “join the mailing list” graphic, but I designed a second copy without transparency so it could potentially cover the underlying p element that contains the plain text. The images I uploaded are here and here. They are both 336x50 dimensionally. Another thing that will potentially need to be adjusted is the .signupbox div. When I examined those graphics, they had a total height of 230 px, but it doesn’t display their full height on the current test page. Is there something within the styles (.signupbox code begins at line 214, homepage.css) that can be adjusted to display any more height that is necessary?
Till next time… I was busy… wanted to respond right away. 
The signup box has no height assigned. It extends taller automatically (up to 230px) as content is added. No changes necessary. It may need to be extended taller for small viewports if more content wraps.
The new mailing list graphic can be integrated into your layout, but you need to consider the bigger picture…
(1) According to your specs, the page should accommodate viewports down to 240px wide. The graphic is 313px wide so it will need to be redesigned or allowed to scale down at the narrowest widths.
(2) The image may need to be a .png with a transparent background unless you redesign it in some way that looks good with an opaque background. Remember, because this is an image, you need to provide text for screen readers and anyone who has images disabled, so the text is still required although hidden. (It is easier to hide text behind an opaque image than a transparent one.)
(3) For the moment, you can do this to get an idea of what it looks like on the page (this is not at all how it should be applied permanently):
.footbox p {
background: url('mailinglist1.gif') no-repeat 50% 50%;
height: 50px;
margin: 0.125em auto;
}A <div> is a plain, generic box with no default styles (and no special semantic meaning). I never thought about where “div” might have come from. I came to know “div” as a generic block box, use it accordingly and style it as needed. I believe that you are overthinking “div”.
I definitely do not use a grid system. Perhaps you meant “layout”.
Good catch. I’ll be able to see now when I need a smaller width to accompany something that may be a little wide. I made a new version of the graphic. It is uploaded to the test site.
haven’t been able to match the bg color… still trying.
I added those couple of lines in to .footbox p along with another media query at line 215 (that doesn’t work 
) …
@media (max-width:280px) {
.footbox p {background:url(“mailinglist2.gif”) no-repeat 50% 51px; height:68px;}
}
-Ty