Jump to content

Bert Coules

Members
 View Profile  See their activity

  • Posts

    65

  • Joined

  • Last visited

Bert Coules's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Bert Coules
    Well, after some experimentation it seems easier to darken a background picture by overlaying a solid colour with less than 100% opacity. More elegant than using two separate images, certainly.
  2. Bert Coules
    I'm working on a site with an overall background image. On the home page the image is at full brightness but on all subsequent pages it's darkened right down so as to be much less distracting: I'm using two separate jpg files to achieve this. When the user moves from the home page I'd ideally like the background to darken gradually. Thanks to an answer in another thread I know there's a simple jQuery command to fade in either an entire page or a selected part of it, and I thought I'd try fading in the whole of the pages with darker backgrounds: I hoped that might give the illusion of what I wanted. But the jQuery coding that I tried: css:<script type="text/javascript"> $(document).ready(function() { $(".whole_page").css("display", "none"); $('.whole_page').fadeIn(1000); });</script> html:<body class="whole_page"> ...doesn't affect the background images, which are defined in the stylesheet rather than the html. Is there a way of doing what I'm thinking of? Perhaps a method which doesn't involve two separate versions of the image? Many thanks.
  3. Bert Coules
    I've just been trying different combinations of that line and you're quite right: it was the space. I should have seen that ages ago. I really shouldn't be doing this stuff at ten to three in the morning. Funny thing, though: in the coding I cut and pasted from Notepad++ in my first post (and again later) there is no gap. But I'm too tired now to look into why. Thanks again.
  4. Bert Coules
    I'll correct both of those... That did it! I don't know if it was the space before the bracket or the inverted commas, but now it's working perfectly. I'm very grateful.
  5. Bert Coules
    The files are in a test directory here: Temp upload now removed. Thanks again.
  6. Bert Coules
    The filename is all lowercase, including the extension (which is jpg!). If I upload the files to a directory on my existing site, would you take a look online? I'll do that now.
  7. Bert Coules
    I had tried that earlier, but just tried it again. I can see that it's right and that what I posted above was wrong, but it still doesn't bring up the image. I also just tried copying the image into the same directory as index.php and making the style sheet read background: url("background.jpg"); but still no joy.
  8. Bert Coules
    Thanks for the speedy reply. In the pared-down file the paragraphs aren't floated or positioned at all. They're only there to give the div some height, and it works nicely: I see the vertical list of words, bordered by the blue 1px border. I just don't see the background! When that vertical list is eventually replaced by the proper menu I won't be using <p> at all.
  9. Bert Coules
    I ran across a problem with a background image not appearing in a div. I couldn't see anything wrong with the coding at that point (which doesn't mean that there wasn't something wrong, of course) so as an experiment I started stripping away other areas, checking at every stage, to see if there was something elsewhere interfering. It's a technique that I've found useful in the past. Eventually I'd removed almost everything and got down to something extremely basic: style.css: .columns { background: url("images/background.jpg"); border: 1px solid blue; } index.php: <!DOCTYPE html><html lang="en"> <head> <link href="css/style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="columns"> <p>THIS</p> <p>WILL</p> <p>BE</p> <p>THE</p> <p>MENU</p> <p>EVENTUALLY</p> </div><!--.columns--> </body><html> And it still doesn't work. The div is displayed with its border and its contents, but not the background image. The directory structure is a main dir with sub-directories css and images. All three files are in the right places. The jpg opens correctly in a picture editor. So why isn't the background being recognised? Clearly I've made some glaringly obvious and very basic error but I've been staring at this for ages now and I'm damned if I can see it. I'd be very grateful for some help. Many thanks.
  10. Bert Coules
    Thanks for the suggestion. The link goes straight to an example: to put it in context I had to back up to the introductory page: http://www.w3schools.com/ajax/ which proved to be the first of many. I'll have a proper read of them tomorrow.
  11. Bert Coules
    I'm putting together a website purely as a learning exercise, so I can experiment with new (to me) techniques and approaches without interfering with my two live sites. One thing I'd like to explore is smooth page transitions, or, more accurately, smooth transitions on just one area of a page with the rest - the heading and a side menu - remaining constant. A Google search throws up a vast amount of information but most of it seems to be at a far more complex level than I need and assumes a fairly high level of existing knowledge. Can anyone point me towards a more basic, step-by-step guide, if such a thing exists? Many thanks.
  12. Bert Coules
    Redredc, thanks for that, especially the width-comparison site. I knew of several others but not that one. I experimentally created a very simple single-column gallery and uploaded it to the test directory where the rest of the site is being developed. On that comparison site it doesn't look bad: I used a standard image width of 640px, and on wider screens the blank space at the right hand side is acceptable, I think, though the longer captions aren't wrapped at the same width but continue across. If you'd like to take a look, the gallery and the rest of the site is now live at http://www.merrisonholmes.com . A mobile or cell phone or a tablet should redirect automatically. To view the mobile site on a larger screen the link is http://www.merrisonholmes.com/mobile .
  13. Bert Coules
    What is the general view on adding a gallery to a mobile-friendly site? Obviously it would be sensible to make the image file sizes as small as possible consistent with quality, but beyond that, is there any agreement as to the best method of presenting a series of images? Presumably the simplest way is just to be low-tech and stack pictures one above another in a long single-column page, with captions beneath each image, but are there better approaches which perhaps don't put too much strain on a mobile connection? Many thanks.
  14. Bert Coules
    Ingolme, that worked beautifully. Many thanks for the speedy reply.
  15. Bert Coules
    Again, many thanks for all the help and advice so far; much appreciated, and my primary website now exists in a completely (or so I hope) mobile/tablet-friendly version. I want to do the same to a second site. The basic construction is simple: one column made up of four divs: header_box top_box text_box footer_box The top box holds an image at its left and a menu icon at its right: The problem is that I want to eliminate the extra line-space below the image, and also to position the menu icon just above the bottom edge of the div. This is the present coding: #top_box { width: auto; height: auto; border: 1px solid blue; /* temp */} menu_icon { float: right; margin-right: 0.5em;} <div id="top_box"> <img src="images/blank_image.jpg"> <a href="index.php"><img class="menu_icon" src="images/menu_icon.png" alt="Menu icon"></a><div/> <!-- top box --> I can get rid of the extra line-space by making the image "display: block" but that displaces the menu icon out of the div altogether: I'd be grateful for any pointers to the right approach. Many thanks.
×
×
  • Create New...