Bert Coules

Del, Dsonesuk, thanks for your replies. The site is essentially static, so the very occasional update shouldn't cause much in the way of a hassle. Both sites (or both versions of the same site) will be part of the same domain, with the mobile files nesting in a subdirectory and the images shared, but there will inevitably be some degree of duplication. Perhaps it could be minimised slightly and made more acceptable to Google's automated trawlers by only having the meta description material in the main site files? On the other hand, I believe I could live with the mild disapproval of a multinational multi-million pound corporation. Having said that, I have a second site which I'd like to make mobile-friendly too, so with that I might well try the other approach. The challenge of redesigning it to be adaptable while still looking good at various screen widths will be an interesting one.

Thanks for the replies. I considered that approach, but having just redesigned the whole of my site and being reasonably pleased with the result, I decided against it. Dsonesuk, why is it seen as better to have just one site which adjusts to different screen widths? Beyond not having to update two sites rather than one, where exactly is the advantage?

I've written a separate version of my website http://www.bertcoules.co.uk for mobile users, but I'm puzzled as to the best way to automatically direct people there. I've found several methods online but, as ever, it's not easy to know which is preferred by modern practice. I have tested this: <script type="text/javascript"><!--if (screen.width <= 699) {document.location = "mobile.html";}//--></script> which works on my Android phone and tablet and is nicely simple. If it's acceptable and universal, I'll stick with that. But is it? The mobile site files will be housed on my co.uk domain and are in fact currently available at http://www.bertcoules.co.uk/test/ . Many thanks.

Sorry - I posted this too hastily and I've now found the answer to my question Please remove. Many thanks..

Thanks. A neater alternative than changing all the page files (though I've already done that, and it does work) so I'll try it.

Thanks, I'll try that. Edited to add: It didn't work, for some reason. But in trying to work out why, I suddenly saw how to solve the problem by moving the footer to inside the text box rather than following it. Thanks for your help.

I've searched around for the answer to this, but with no luck so far. I've been putting together a separate mobile-friendly version of my site and the results are experimentally online at http://www.bertcoules.co.uk/test/ . Index.php is just a plain menu but a problem arises with all the other pages. When viewed on a mobile or with the desktop window narrowed they look OK: But when the screen is widened, this happens: I suppose it's unlikely that this version of the site will be viewed on screens wide enough to break the layout, but I'd like to keep it looking right nonetheless. I don't mind the header and the menu buttons remaining fixed-size at the left, but I don't like the gap between the text box and the footer. I need a way to keep the text box at least as high as the image, or alternatively to prevent the image zooming to a greater height than the text box. The images for all pages are saved at 175 x 400px, and the formatting for the text box is: #text_box { height: auto; margin: 0; padding: 0.8em 0.8em 0 1em; border: 0; font-size: 1em; line-height: 1.4; background: #E5E5E5; /* near-white */} There is a different amount of text on each page, hence the height:auto. I'm sure the solution to this is straightforward but I can't see it, and any advice would be appreciated. Many thanks.

Count_Zero, your simple CSS version works perfectly: I had to make a couple of tiny changes, mostly to do with names, but that made no difference. I now have one menu file instead of seven and a better understanding of the coding involved. Thank you so much. Dsonesuk, when Count_Zero's solution not only worked but worked in a way I could follow, I decided to leave well alone. But thanks again for your thoughts and efforts. Incidentally, you mentioned the biog / blog mixup: the menu item was originally "biog" too, but several people pointed out the potential for confusion. I'm not too fond of "about me" but I've yet to come up with anything better. I want to turn my attention next to building a separate mobile-friendly version of the site. There will probably be more questions, I'm afraid.

Count_Zero, Thanks again. It's 3.11am here now, so I'm off to bed. I'll give it a go in the morning.

Count_Zero, I don't know, it seems to me that is a simple solution. I grant you, it takes up a little more space, but in terms of coding it's about as simple as you can get. The main drawback to it as far as I can see is that if I ever need to change the menu I'll have to do it seven times. But even that's not too bad, is it? I change it once, copy-and-paste the new version into the other files and then make any minor changes necessary to make each one individual again. I think another relevant point is this: I designed the original version of this site almost three years ago, and apart from some very minor revisions to the textual content, I hadn't done anything to it since, or - crucially - done any other HTML coding elsewhere. When I decided to redo the whole thing and looked in detail at the files, I discovered that I'd forgotten almost everything I'd taught myself first time round: I had to relearn it all, basic as it was. Once I get things to my satisfaction this time, there's a good chance that it will once again be years before I have to think about changing stuff. So doesn't it make sense for me not to learn things that are totally new but rather to rely on what I've already managed to get my head around? Great to hear that you're learning by helping me.

This discussion is definitely getting out of my depth now. I'm doing my best to keep up and I think I'm taking most of it in, but my head's reeling a bit. I'm going to take some time to work through the posts slowly, try a few alternatives and make sure I know what's going on - what I definitely do not want to do is put in some coding which works but which I don't completely understand. In the meantime, I do at least have my (to me) ultra-simple solution, with seven separate menu files each of which differs in a slightly different way. It not only works, I know how and why it works! And - as far as I can see - it's not doing any harm or causing any ill-effects. Many, many thanks to everyone for the replies, the patience and the work you've done.

Yes, I am.

Dsonesuk, Thanks. I can see how that would work for the one item which had the class="active" tag, but wouldn't I still need individual menu files, each with its own particular highlighted entry? And if that is the case, then wouldn't my original solution, which also uses multiple menus, be just as good?

I've been arranging my menu as a list, so I could try Jonathanks suggestion. Here is the stylesheet entry: ul#menu li { display: inline; font-size: 0.8em; color: #CCCCCC; /* very light grey */ word-spacing: 2em;} And this is the HTML: <ul id="menu"> <li> <a href="index.php" title="Bert Coules">home</a> </li> <li> <a href="biog.php" title="Bert Coules"><span class="normal_spacing">about me</span></a> </li> <li> <a href="appearances.php" title="Appearances">appearances</a> </li> <li> <a href="credits.php" title="Credits">credits</a> </li> <li> <a href="holmes.php" title="BBC audio complete Sherlock Holmes"> <span class="normal_spacing">Sherlock Holmes</span></a> </li> <li> <a href="publications.php" title="Publications">publications</a> </li> <li> <a href="contact.php" title="Contact me">contact</a> </li> </ul> This gives me a horizontal list, spaced as I want, (though my efforts to centre it haven't so far been successful). But when I add Jonathanks' code as a separate stylesheet item: ul.menu a:active { color:white;} it doesn't have the desired effect: the selected menu item does not become white. Dsonesuk, I saw your amendment, place active class on list item, not anchor, but I'm not clear on precisely how to do what you suggest. I tried changing the above to ul.menu li:active { color:white;} but that also has no effect and neither does using ul#menu . I must be missing something fundamental.

Count_Zero, thanks again. I'll give your latest suggestion a try tomorrow.

Jonathanks, thanks for your suggestion. My menu is not formatted as a list so presumably that bit of code won't work, but it's so splendidly simple that it might well be worth redoing my menu in list form so I can include it.

OK, thanks.

Thanks so much for that. I'll have a play around with it and see how I get on.

Count_Zero, many thanks for that. Yes, that's exactly what I want to do (and what I have in fact achieved, but with a slightly clumsy solution). I am actually already using php, with seven different versions of the menu file, each with a different item highlighted and each inserted into the appropriate page. You can see the effect in action at http://www.bertcoules.co.uk . I'd certainly appreciate a demo of a better approach if you have the time to put one together, so thanks for the offer. Techprogram, have you by any chance responded to the wrong thread? Ah - I see you've now edited your reply. I appreciate the good wishes.

Dsonesuk, thanks very much for that. I'll look into it, but at the moment I have no idea how to do what you're suggesting. I'm not averse to learning, but as I said above, my method seems to work perfectly and has the considerable merit that I can understand it. I do understand though the advantage of only having one basic menu rather than seven separate php files.

Thanks, but unless I'm missing something (which is quite possible) that example wouldn't remain in its hover/active styling after it has been clicked, which is what I need. I do realise that links mostly take you away from the page that they themselves are on, but I need mine to be visible throughout the site.

Not a problem, just a thought that I might not be doing it the best way. Basically, I have a separate menu file for each page of the site, all saved in php_include_files. This is the one for the home page: <div id="menu_bar"> <p class="menu"> <a href="index.php" title="Bert Coules"><span class="white_text">home</span></a> <a href="biog.php" title="Bert Coules">about me</a> <a href="appearances.php" title="Appearances">appearances</a> <a href="credits.php" title="Credits">credits</a> <a href="holmes.php" title="BBC audio complete Sherlock Holmes"> <span class="normal_spacing">Sherlock Holmes</span></a> <a href="publications.php" title="Publications">publications</a> <a href="contact.php" title="Contact me">contact</a> </p> </div> <!-- menu_bar --> The class="white text" (with its corresponding entry in the stylesheet) over-rules (on this one particular page) the general colour setting for the menu items, and each page has a similar menu file with its relevant item set to white. This certainly works and is fairly simple, but I just wonder if there's a more elegant way.

Thanks. I'll take a look. Edited to add: I found a couple of examples showing what I'm after, but so far at least, my original idea seems to be the most straightforward, if hardly the simplest. But I'll keep looking.

The menu on my site (http://www.bertcoules.co.uk) is a simple line of words stretched across the screen: each individual item is a link, with no decoration other than a change of colour when hovered over or clicked on. Is there a way of making an item permanently change colour when clicked, only to revert back to the original when a different link is selected? In other words, when the selected page is loaded, the menu entry for it would be a different colour from the rest, even when the mouse was not hovering over it. I can think of a very basic way of achieving it, by having several differently-styled versions of the menu paragraph each with a different word permanently in the highlight colour - but is there a more elegant way? Many thanks.

Thanks. I didn't realise that you could only have one instance of a particular div per page. I'll redo it using a class name. Edited to add: Now done, and works perfectly. Thanks again.