Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Best way to proceed (CSS/HTML?) please

    Hello

    I have a page with a few small images arranged horizontally across the top of a Web page. The rest of the Web page is blank.

    I would like to make these images links so that when image A is clicked, content A appears below the images; when image B is clicked content B appears below the images.

    The images always remain in place at the top and horizontally and themselves never disappear from their top horizontal position.

    Years ago I would have used frames, putting the images in a top frame and changing only the content in a frame below them, but this appears to have gone out of fashion.

    The site will have a clean, uniform look about it throughout so I envisage using a style sheet.

    What would be the best way of proceeding with this, please?

    Steve

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    this gallery should be easy enough to modify to suit your needs: http://devkick.com/lab/galleria/
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello harbingerOTV

    Sorry, I probably wasn't clear enough.

    Though I have images across the top, and though I would like mto make those images clickable links, the page that is loaded after clicking an image will be a normal HTML Web page (which will hold text, links, etc) but not a larger version of the clicked image.

    (The gallery does look impresive, though.)

    Steve

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    So what you are after is basically a navigation menu that uses images for the links. Something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	background:#ccc;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	width: 800px;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -40px;
    	background:#fff;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    }
    #content {
    	clear:both;
    	width:100%;
    }
    #footer, #push {
    	clear:both;
    	width:800px;
    	height: 40px;
    	margin:0 auto;
    	background:#333;
    	font-size:11px;
    	text-align:center;
    	color:#ccc;
    }
    #push {
    	background:none;
    }
    /*--- navigation ---*/
    .nav {
    	height:60px;
    	text-align:center;
    	float:left;
    }
    .nav ul, .nav li {
    	display:inline;
    	list-style-type:none;
    }
    .nav a {
    	float:left;
    	width:100px;
    }
    .nav a:hover {
    	color:#FF3;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
      <ul class="nav">
        <li><a href="#"><img src="image.jpg" width="75" height="60" alt="" /></a></li>
        <li><a href="#"><img src="image.jpg" width="75" height="60" alt="" /></a></li>
        <li><a href="#"><img src="image.jpg" width="75" height="60" alt="" /></a></li>
        <li><a href="#"><img src="image.jpg" width="75" height="60" alt="" /></a></li>
        <li><a href="#"><img src="image.jpg" width="75" height="60" alt="" /></a></li>
        <li><a href="#"><img src="image.jpg" width="75" height="60" alt="" /></a></li>
        <li><a href="#"><img src="image.jpg" width="75" height="60" alt="" /></a></li>
        <li><a href="#"><img src="image.jpg" width="75" height="60" alt="" /></a></li>
      </ul>
      <div id="content">
        <p>Content of page here</p>
      </div>
      <div id="push"></div>
    </div>
    <div id="footer">
      <p>Footer Info</p>
    </div>
    </body>
    </html>
    It's up to you whether you want the images on the page or in the background of the links.

  • Users who have thanked Fisher for this post:

    SteveH (04-08-2009)

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Fisher

    Many thanks for your post.

    Well that's just great! I'll take a look at it and maybe change a thing here and there, but you have saved me an incredible amount of work!!

    Very many thanks for your help. If I'm not sure of anything, I'll post back, but cheers!

    Steve

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Another possibility can be found in action here:
    http://rowsdower.freehostia.com/page...avascript.html

    I equate this to the javascript version of frames:
    Code:
    <script type="text/javascript">
    //<!--
    function ahah(url, target) {
      document.getElementById(target).innerHTML = ' Fetching data...';
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (req != undefined) {
        req.onreadystatechange = function() {ahahDone(url, target);};
        req.open("GET", url, true);
        req.send("");
      }
    }  
    
    function ahahDone(url, target) {
      if (req.readyState == 4) { // only if req is "loaded"
        if (req.status == 200) { // only if "OK"
          document.getElementById(target).innerHTML = req.responseText;
        } else {
          document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
        }
      }
    }
    
    function load(name,div) {
    	ahah(name,div);
    	return false;
    }
    //-->
    </script>
    And the page call:
    Code:
    <a href="INSERT URL HERE" onclick="load('INSERT URL HERE', 'manipulated_div');return false;">Click here!</a>
    <div id="manipulated_div"></div>
    This keeps the page from reloading and instead calls in an external HTML file to load inside of the existing page.

    The upside:
    Your images won't reload with each navigation and your page won't "blink" in between the user switching sections.

    The downside:
    It's javascript based so accessibility might suffer a little bit for non-javascript users (they would have to use the back button to get back to the menu any time they clicked on one of your images). Also, IE apparently gets a little confused about stylesheets in the two different pages so you may see some minor styling confusion. The stylesheets work flawlessly in FF though.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Rowsdower

    Many thanks for your message, for your link and code. I have tried to test it just as you posted, and added a link to a site I sometimes use.

    Code:
    <html>
    <head></head>
    <body>
    
    <script type="text/javascript">
    //<!--
    function ahah(url, target) {
      document.getElementById(target).innerHTML = ' Fetching data...';
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (req != undefined) {
        req.onreadystatechange = function() {ahahDone(url, target);};
        req.open("GET", url, true);
        req.send("");
      }
    }  
    
    function ahahDone(url, target) {
      if (req.readyState == 4) { // only if req is "loaded"
        if (req.status == 200) { // only if "OK"
          document.getElementById(target).innerHTML = req.responseText;
        } else {
          document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
        }
      }
    }
    
    function load(name,div) {
    	ahah(name,div);
    	return false;
    }
    //-->
    </script>
    
    <body>
    
    <a href="http://www.brinkster.com" onclick="load('http://www.brinkster.com', 'manipulated_div');return false;">Click here!</a>
    <div id="manipulated_div"></div>
    
    </body>
    </html>
    If you go to the home page of that link, you will see that it is different to the one loaded in the window (but that is somewhat secondary to my question).

    I have tried showing locally-saved files in the same folder as in:

    Code:
    <a href="page1.html" onclick="load('page1.html', 'manipulated_div');return false;">Click here!</a>
    <div id="manipulated_div"></div>
    I cannot seem to get this to work. It does link to page2.html but the text link (which I would need to replace with my small photos) does not remain on the same page.

    Any advice would be appreciated.

    Thanks.

    Steve

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hmm, when you say "locally-saved" are you talking about working from files on your PC or are you talking about working from files on a server in the same directory as the page you are using this code in?

    If this file only exists on your computer I think that might be the problem (check here for some good and completely free hosting if you need it). Try to upload the page using the script I gave you, and then upload a few other pages to test with.

    If this page is already published online please give me the link to the file that uses the script so I can take a look at what you have so far.

    As an aside, when the page is on a home computer it can call up any website you want, but when it's on a remote server it will only be able to call up pages within the same domain/sub-domain. You can call files in folders above and below the page with the script in it, but you cannot, for instance, call up a page in http://apples.website.com or http://www.othersite.com when your script page is located in http://bananas.website.com. Similarly you will not be able to open files located on your own computer when this is on a remote server.

    Anyway, like I said, post a link to the page you are working with and I'll see if I can find the problem.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Rowsdower

    Thanks again for your explanation. Yes, I was using files on my hard disk only.

    I have uploaded the main page you have coded, plus a file called page2.html (it contains nothing, it's just to see if it works):

    http://stevehigham59.7host.com/test/test1.html

    Yes, if I click the link in your main page, I now get page2.html loaded.

    So all I need to do now is use a graphic instead of a text link and that should all be fine! That's great. I might use this concept for an onlike site I have in mind.

    My original question concerned how to do this - that is, click on graphics and then have the pages change as your script does while files are online - but originally I aimed to put them on a CD. I have to produce several hundred CDs which offer information on network security etc presented in Web page format, but I can probably not use this script for that purpose.

    Cheers

    Steve

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Ah, I see. In that case I also believe that this code would be worthless. Sorry to be a tease!

    Good luck with your CD's!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    I can see it's potential for online use and will use it on another site. But would I need to do anything spectacular to the code? I will have, probably six images along the top and each image will link to different html pages underneath those images.

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I don't think you would have any trouble with that. To be perfectly honest though I haven't tested extensively with that code yet. I only happened across it a few days ago and it got me pretty excited as a new toy. From what I can see it looks like it is pretty much limitless. You could link to as many pages as you wanted in that style. Furthermore, if you are linking to simple text files (even if you put HTML code into the text files to provide paragraphs and image tags, etc.) rather than HTML you should be able to create an entire site's content and have it appear in a <div> of any size you like, placed anywhere on the page you want it to be and all without worrying about styling confusion (as mentioned briefly before). I would imagine that you could even do submenu navigation with this as long as your submenu pages included a <div> with a unique ID in which to load their content. The main menu would load a submenu page, which would in turn load content within its own dynamic <div>.

    There are other approaches of course, but it should be pretty easy to work out one that you like... Now I'm getting some fun ideas to work on though.

    You could even open different menu items in different parts of the same page with different <div> id's, etc., etc., etc.

    Anyway, it's a neat little trick with a bit of potential but it does have its own limitations. Someone will probably tell you here before long that javascript navigation is a gamble (and they're right) in that between 5% and 12% of the world wide web users won't be able to enjoy your site in its full form due to their disabling of javascript in their browsers. The effect is somewhat mitigated when you use the <a href="INSERT URL HERE"> format rather than a dummy/blank href but users will still have to backwards navigate to find the menu structure again. It is important to consider this and only use this method on sites where you don't very much care about that 5-12% of users.
    Last edited by Rowsdower!; 04-09-2009 at 08:17 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •