...

View Full Version : Best way to proceed (CSS/HTML?) please



SteveH
04-08-2009, 01:39 PM
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

harbingerOTV
04-08-2009, 01:57 PM
this gallery should be easy enough to modify to suit your needs: http://devkick.com/lab/galleria/

SteveH
04-08-2009, 02:23 PM
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

Fisher
04-08-2009, 03:48 PM
So what you are after is basically a navigation menu that uses images for the links. Something like this:


<!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.

SteveH
04-08-2009, 04:22 PM
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

Rowsdower!
04-08-2009, 10:01 PM
Another possibility can be found in action here:
http://rowsdower.freehostia.com/page_call_using_javascript.html

I equate this to the javascript version of frames:
<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:
<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. :thumbsup:

SteveH
04-09-2009, 01:51 PM
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.


<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:


<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

Rowsdower!
04-09-2009, 03:23 PM
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 (http://www.freehostia.com/) 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. :thumbsup:

SteveH
04-09-2009, 03:39 PM
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

Rowsdower!
04-09-2009, 04:00 PM
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!

SteveH
04-09-2009, 04:22 PM
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.

Rowsdower!
04-09-2009, 08:10 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum