PDA

View Full Version : Please help me! Trying to design a friend's website



rewind
Feb 4th, 2010, 10:12 AM
Hi all,

I am hoping someone knowledgeable on here can help me.

A couple of my mates have asked me to help them design a basic website for their company. They only have a 1 page site at the moment and want a new one. It is only going to be a few pages big as it will act more of an information and contact portal rather than offering a lot of content as their business is a surveyors. I am not an expert in coding having only basically designed a site before. I am not charging them for it and just doing it as a favour.

Basically on the left they want four images with three of them cycling through different pictures and the top left one static as their log. Then to the right they want a menu at the top with options which when click the text appears below. I will upload their mock up tonight when I am home but in the meantime I have included the code I have written so far below.

I am now stuck. I need to work out how to (I presume) make a table so the pictures are on the left and the menu and text next to them on the right. :

1. Get the menus to appear and work
2. Text to appear below the menu
3. Code it so the whole page is centred no matter what resolution the user is using

Please let me know if I need to expand on any of this.





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<TITLE>Surveyors | </TITLE>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/dw-logo-square.jpg", "", "", "Test script for "] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 800, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "Test script for ."],
["images/test2.jpg", "", "", "Test script for "],
["images/test3.jpg", "", "", "Test script for "],
["images/test4.jpg", "", "", "Test script for "] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 300, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "Test script for ."],
["images/test2.jpg", "", "", "Test script for "],
["images/test3.jpg", "", "", "Test script for "],
["images/test4.jpg", "", "", "Test script for "] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 900, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery4=new fadeSlideShow({
wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "Test script for ."],
["images/test2.jpg", "", "", "Test script for "],
["images/test3.jpg", "", "", "Test script for "],
["images/test4.jpg", "", "", "Test script for "] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 700, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

<style type="text/css">
@import 'yuidomcollapse.css';
</style>
<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script>
<script type="text/javascript" src="pack.php?file=yuidomcollapse.js"></script>
<script type="text/javascript" src="pack.php?file=yuidomcollapse-fancy.js"></script>
<script type="text/javascript" src="yuidomcollapse-css.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onAvailable('demo',function(){
var p = document.createElement('p');
p.className = 'warning';
p.appendChild(document.createTextNode('Click the following headings to get extra information and see the script in action'));
this.parentNode.insertBefore(p,this);
var a = new YAHOO.util.Anim(['he','download'], { opacity: {from:0,to:1} },1,YAHOO.util.Easing.easeBoth);
a.animate();
})
</script>

</head>

<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">


<div align="left">
<div id="fadeshow1"></div>
<div id="fadeshow2"></div>

</div>

</td>

<td bgcolor="#FFFFFF">
<div align="left">
<div id="fadeshow3"></div>
<div id="fadeshow4"></div>
</div>


</td>

<td bgcolor="#FFFFFF" width="300" height="200">
<div align="left">

<div id="co">
<h2 id="demo" class="trigger">Accessibility and Usability</h2>

text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
</div>


</td>


</table>

<div id="footer">
Test footer
</div>

Avril
Feb 4th, 2010, 10:51 AM
You need to post this on the JavaScript forum !

rewind
Feb 4th, 2010, 11:11 AM
Really? How comes? Isn't the javascript bit just the picture part which I have got working anyway? It is the table and layout I am interested in which isn't javascript.

Excavator
Feb 4th, 2010, 05:45 PM
Hello rewind,
Do you have a test site up yet? Would be best to get a link to that.

Do you know tables are not for layout (http://www.hotdesign.com/seybold/everything.html)? See that link as well as the one in my sig below.

To center your site you can put margin: 0 auto; on your main containing div.

When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

Avril
Feb 4th, 2010, 05:56 PM
I guess I was a bit too hasty, but the code for the page is linked to external js and css stylesheets which are not posted. Also, you should enclose your code in the code tags to make it easier to distinguish. It seems like you found the code in a 'ready-made' template.

This said, it is better to use divs instead of tables to create your page. There are several sites that you can google to find the type of layout you want. Once you have the basic page layout, you can include the elements (animations, etc.).

To answer your questions just off the cuff:
- The menu has to be coded, and links included or onclick functions added to make the text appear in the div.
- To centre the page you have to place all the divs in a "wrapper", and centre the wrapper. This is generally done by using


#wrapper {margin-left: auto; margin-right: auto; }

in your .css

Cheers!

rewind
Feb 4th, 2010, 08:59 PM
Thanks guys. Before I read your suggestions, it might be worth you having a look at the site. It is here: www.dvdcompare.net/surveyors.

So I want the images where they basically are. Then in the white space above "Accessibility and Usability" I would like the menu bar - just 4 options. Then when a user clicks on one of the options the text will appear below.

They're the basics anyway! I have a couple of other questions but would rather get this sorted first.

I don't really want to use CSS seeing as the site is so small. Is it possible to make it so this is the only page that has to load and then the content just appears below the menu without the page reloading each time?

rewind
Feb 5th, 2010, 08:36 PM
Bump!

As my questions seem to be a bit too basic for this forum, does anyone have any suggestions for some sites to help me?

This is the mock up they made for me:

http://www.dvdcompare.net/surveyors/mockup.jpg

As I said I just want to design one page and then have all the content within that so the whole page doesn't have to load each time - just the section on the right with the text under the menu. I can look into that later though, the main thing I want is how to code the menu and to get it in the right position.

If people can help me out on this I would be really grateful.

Thanks.

Avril
Feb 5th, 2010, 10:11 PM
Hi!

Here, very quickly, is a basic layout, but done with divs and the table on the left side with the animated images. I have not tried it out on IE, for which it will probably need to be tweaked.

I will try and send you the onclick code for the text under the navbar.

To be adjusted according to the size, colour, etc. you want..

Cheers !




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

<head>
<title>Temp</title>

<style type="text/css">
body {margin: 0px; border:0px; background-color: #98a1e2; }

#wrapper { width: 700px; margin-left: auto; margin-right: auto; border: 1px solid #000; }

#leftpane {float: left; clear: right; width: 380px; height: 100%; background-color: #cccccc; padding: 10px;}

#rightpane {float: left; width: 300px; height: 100%; background-color: #f2f2f2; padding-bottom: 20px;}

#rightnav { float: left; width: 300px; height: 50px; background-color: #811e07; }

#textcontainer {float: left; width: 280px; border: 1px solid #FF0000; padding: 10px;}

table {border:1px solid #000; margin: 0px; }

#footer {float: left; width: 680px; clear: all; height: 50px; background-color: #3e4ca2; padding-left: 20px; }

</style>
</head>
<body>
<div id="wrapper">

<div id="leftpane">
table with animated images:
<table>
<tr>
<td>first image</td><td>second image</td>
</tr><tr>
<td>third image</td><td>fourth image</td>
</tr>
</table>
</div>

<div id="rightpane">
<div id="rightnav">navbar comes here</div>
<div id="textcontainer">text will come here</div>
</div>

<div id="footer"> footer content comes here </div>

</div> <!-- end of wrapper -->

</body>
</html>

rewind
Feb 6th, 2010, 10:16 AM
Thank you - I will have a fiddle with this and no doubt have further questions!

rewind
Feb 6th, 2010, 12:57 PM
Okay this is where I currently am: www.dvdcompare.net/surveyors/index2.php. The basics are now there. Please can someone now help me with the following:

1. How do I bring the top of the Navbar section in line with the top of the pictures?
2. How can I ensure there is a gap between the text in the pane and the new contact box below?
3. How do I apply curved edges to everything?

Thanks.

abduraooft
Feb 6th, 2010, 01:10 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> Your DOCTYPE (http://www.alistapart.com/articles/doctype) is an incomplete one. I'd recommend to use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The basics are now there. Get rid of all tables, which are used for layout!

rewind
Feb 6th, 2010, 01:12 PM
Your DOCTYPE (http://www.alistapart.com/articles/doctype) is an incomplete one. I'd recommend to use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Thanks. Have changed it to your one but now although it has centred it (which is great as that is what I wanted), the text pane has gone a bit squiffy!

rewind
Feb 6th, 2010, 04:26 PM
Your DOCTYPE (http://www.alistapart.com/articles/doctype) is an incomplete one. I'd recommend to use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Get rid of all tables, which are used for layout!

Huh? Sorry, you have to understand I am a complete novice (retard) when it comes to this! Why get rid of all tables? I have just been told to put them in!

abduraooft
Feb 6th, 2010, 04:33 PM
I'd recommend you to modify a 2 columns layout like http://bonrouge.com/2c-hf-fixed.php for your needs. Set a suitable width to the left column and place the images inside it. Then put the content on the right column. Don't use <table>s, unless you have some tabular data to be displayed.

rewind
Feb 6th, 2010, 04:40 PM
Sorry, I don't understand. This is what I get when I do as you suggested: www.dvdcompare.net/surveyors/index3.php.

Don't laugh!

abduraooft
Feb 6th, 2010, 05:01 PM
Have you missed the CSS in that link?
Also the following portion is not correctly wrapped inside <script> tags

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

Avril
Feb 7th, 2010, 09:02 AM
Hi, Rewind!

What I sent you was only a temp. You have to consider the wrapper like a box into which the other divs fit. If you change the width, the divs have to be adjusted accordingly. Divs can be placed in divs as well. I am sending you another temp where I've put borders around the divs so that you see which div it refers to. When it is almost complete, you will have to take the borders off and add the 2 pixels to the width.

I've not had time to look at the onclick for the text. Getting rounded corners is another kettle of fish, and would require a completely different style of construction! I based the temps on the image you had posted earlier.

Cheers!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Temp</title>

<br>

<style type="text/css">

body {margin: 0px; border:0px; background-color: #666666; }

#wrapper { width: 850px; margin-left: auto; margin-right: auto; border: 1px solid #000; overflow: hidden;}

#leftpane {float: left; clear: right; width: 500px; height: 100%; background-color: #666666; padding-right: 10px; border: 1px solid red;}

#rightpane {float: left; width: 336px; height: 100%; background-color: #f2f2f2; padding-bottom: 20px; border: 1px solid blue;}

#rightnav { float: left; width: 340px; height: 50px; background-color: #811e07; text-align: center; }

#textcontainer {float: left; width: 300px; border: 0px solid #FF0000; padding: 10px; font-family: tahoma, verdana, arial, sans-serif; font-size: 0.8em; color: #515151;}

#bottomrighttext {float: left; width: 300px; border: 0pc solid #FFFFFF; padding: 10px; background-color: #FFFFFF}

table {border:0px solid #000; margin: 0px; }

#footer {float: left; width: 850px; clear: all; height: 20px; background-color: #CCCCCC; padding-left: 20px; }

img { border: 1px solid yellow; height: 250px; width: 250px;

</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">


/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "We offer Building Surveys..."],
["images/test2.jpg", "", "", "We offer Building Surveys..."],
["images/test3.jpg", "", "", "We offer Building Surveys..."],
["images/test4.jpg", "", "", "We offer Building Surveys..."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 300, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "Test script for ."],
["images/test2.jpg", "", "", "Test script for s"],
["images/test3.jpg", "", "", "Test script for "],
["images/test4.jpg", "", "", "Test script for Ds"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 900, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "Test script for s."],
["images/test2.jpg", "", "", "Test script for rs"],
["images/test3.jpg", "", "", "Test script for Drs"],
["images/test4.jpg", "", "", "Test script for Ds"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 700, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>
<script type="text/javascript">
<!--
function switchPic(picID)
{
document.getElementById(picID).style.display="none";
}
//-->
</script>


</head>
<body>
<div id="wrapper">

<div id="leftpane">
<table>
<tr>
<td><img src="images/dw-logo-square.jpg" alt="" width="250" height="250"></td>
<td><div id="fadeshow"></div></td>
</tr>
<tr>
<td><div id="fadeshow2"></div></td>
<td><div id="fadeshow3"></div></td>
</tr>
</table>
</div>

<div id="rightpane">

<div id="rightnav">

<div><a href="link1.html">Link 1</a>
&nbsp;| &nbsp;
<a href="link2.html">Link 2 </a>
&nbsp;| &nbsp;
<a href="link3.html">Link 3 </a>
</div>

</div>

<div id="textcontainer">

<p>We carry out building surveys in Cambridge and throughout East Anglia, London and the South East. Whether you are considering purchasing a house or flat, or reviewing the maintenance liability on a commercial or industrial property, our thorough reports are tailored to your needs and provide a detailed summary of the building’s condition complete with comments on other factors which may have an impact on its present and future viability. We typically provide a costed schedule of significant repairs required and can provide general advice on the feasibility of any extensions or alterations you may be considering.</p>
<p> We etc.. </p>
</div>


<div id="bottomrighttext">Contact Details here<br>

Tel: <br>
Fax: <br>
E-mail: <br>
Address: <br><br><br>
</div>
</div>





<div id="footer"> XX Surveyors is a trading name of XXXXXXXXX </div>

</div> <!-- end of wrapper -->

</body>
</html>

rewind
Feb 8th, 2010, 04:52 PM
Thanks. That code is now closer to what I want but people above and I have read on other sites, it is not advisable to use tables. Is there a way of having the same layout as your example but without using a table?

abduraooft - I am sorry, I don't understand what you meant about me missing out CSS.

Sorry guys I know I am being thick but this is all very new to me! I didn't think it would be that hard to have 2 columns!

Avril
Feb 9th, 2010, 12:59 PM
Had a bit of time today...

Ummm, that's why they need web designers! ;)

Try this. Don't forget to add the doctype, etc. I have not tried it out on IE, though. Hope it works.

Cheers!



<html>
<head>
<title>Temp 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {margin: 0px; border: 0px; }

#wrapper {width: 852px; margin: 0 auto 0 auto; height: 100%; overflow: hidden; border: 1px solid #000; }

#leftpane {float: left; clear: right; width: 500px; height: 100%; background-color: #666666; }

#fadeshow, #fadeshow1, #fadeshow2, #fadeshow3 {float:left; clear: right; width: 250px; height: 250px; background-color: #919ca6 }

#righttextpane {width: 360px; height: 350px; border: 1px solid green; overflow: hidden; font-family: tahoma, verdana, arial, sans-serif; font-size: 13px; }

#triggers {
float:left; width: 360px;
border:1px solid blue; text-align: center; font-family: tahoma, verdana, arial, sans-serif; font-size: 12px;
}

#triggers div {float: left; clear: right; width: 90px; height: 30px; line-height: 30px;
cursor:pointer; background-color: #d6d17a;
}
#zero {
display:none;
color:red;
}
#first {
color:blue;
}
#second {
color:green;
}
#third {
color:#a52a2a;
}

#bottomrighttext {float: left; width: 332px; padding: 10px; background-color: #FFFFFF; font-family: tahoma, verdana, arial, sans-serif; font-size: 13px;}

#footer {float: left; width: 832px; clear: all; height: 20px; background-color: #CCCCCC; padding-left: 20px; font-family: tahoma, verdana, arial, sans-serif; font-size: 13px;}

</style>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "We offer Building Surveys..."],
["images/test2.jpg", "", "", "We offer Building Surveys..."],
["images/test3.jpg", "", "", "We offer Building Surveys..."],
["images/test4.jpg", "", "", "We offer Building Surveys..."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 300, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "Test script for ."],
["images/test2.jpg", "", "", "Test script for s"],
["images/test3.jpg", "", "", "Test script for "],
["images/test4.jpg", "", "", "Test script for Ds"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 900, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [250, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "Test script for s."],
["images/test2.jpg", "", "", "Test script for rs"],
["images/test3.jpg", "", "", "Test script for Drs"],
["images/test4.jpg", "", "", "Test script for Ds"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 700, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>


<script type="text/javascript">
if(document.getElementById)
document.write('<style type="text/css">.detail {float:left;width: 340px; border: 1px solid red; padding:10px; display:none;}#zero {display:block;}<\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i)
d[i].style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
</script>
</head>
<body>
<div id="wrapper">


<div id="leftpane">
<div id="fadeshow"><img src="images/dw-logo-square.jpg" alt="" > Image comes here</div>
<div id="fadeshow1">fadeshow 1</div>
<div id="fadeshow2">fadeshow 2</div>
<div id="fadeshow3">fadeshow 3</div>
</div>


<div id="righttextpane">
<div id="triggers">
<div onclick="reveal('first');">
About us
</div>
<div onclick="reveal('second');">
Products
</div>
<div onclick="reveal('third');">
Scope
</div>
<div onclick="reveal('fourth');">
Contact
</div>
</div>

<div class="detail" id="zero">
We carry out building surveys in Cambridge and throughout East Anglia, London and the South East. Whether you are considering purchasing a house or flat, or reviewing the maintenance liability on a commercial or industrial property, our thorough reports are tailored to your needs and provide a detailed summary of the building’s condition complete with comments on other factors which may have an impact on its present and future viability. We typically provide a costed schedule of significant repairs required and can provide general advice on the feasibility of any extensions or alterations you may be considering.</p>
</div>
<div class="detail" id="first">
This would be what people would see for the first clicked content.Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here.
</div>
<div class="detail" id="second">
This would be what people would see for the second clicked content. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here.
</div>
<div class="detail" id="third">
This would be what people would see for the third clicked content. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here.
</div>
<div class="detail" id="fourth">
This would be what people would see for the fourth clicked content. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here. Add more text here.
</div>


</div>

<div id="bottomrighttext">Contact Details here<br>

Tel: <br>
Fax: <br>
E-mail: <br>
Address: <br><br><br>
</div>


<div id="footer">
XX Surveyors is a trading name of XXXXXXXXX </div>
</body>
</html>

rewind
Feb 11th, 2010, 08:38 PM
Had a bit of time today...

Ummm, that's why they need web designers! ;)

Try this. Don't forget to add the doctype, etc. I have not tried it out on IE, though. Hope it works.

Cheers!



Thanks so much for taking the time to do that for me, much appreciated. Unfortunately it is currently laid out like this:

http://www.dvdcompare.net/surveyors/images/error.jpg

Originally the menu and the text was UNDERNEATH the images so I adjusted the overall width but now the images are not sitting next to each other like they did when they were in the table!

Site can be seen here: www.dvdcompare.net/surveyors/index3.php. Can it not be done without a table?

rewind
Feb 12th, 2010, 05:59 PM
Okay. I don't know how I did it but now pictures ARE in 2 x 2 like I wanted HOWEVER the bottom right one is now empty. How do I move that empty square to the top left and then put in a static image in that top left one?



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

<html>

<head>

<title>Temporary Title</title>

<style type="text/css">

body {margin: 0px; border: 0px; background-color: #D8D8D8; text-align: justify;}

#wrapper {width: 900px; margin: 0 auto 0 auto; height: 100%; overflow: hidden; border-style: groove; }

#leftpane {float: left; clear: right; width: 400px; height: 100%; background-color: #666666;}

#fadeshow1, #fadeshow2, {float:left; clear: right; width: 400px; height: 400px; background-color: #666666;}

#righttextpane {width: 500px; height: 400px; border: 0px; overflow: hidden; font-family: tahoma, verdana, arial, sans-serif; font-size: 13px; }

#triggers {

float:right; width: 500px;
border:0px; text-align: center; font-family: tahoma, verdana, arial, sans-serif; font-size: 12px;

}

#triggers div {float: left; clear: right; width: 100px; height: 30px; line-height: 30px;
cursor:pointer; background-color: #A00000;
}
#zero {
display:none;
color:black;
}
#first {
color:black;
}
#second {
color:black;
}
#third {
color:black;
}
#fourth {
color:black;
}
#fifth {
color:black;
}

#footer {float: left; width: 900px; clear: all; height: 15px; background-color: #CCCCCC; padding-right: 20px; border: 0px; font-family: tahoma, verdana, arial, sans-serif; font-size: 10px; text-align:right}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">


/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [200, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "This text could change..."],
["images/test2.jpg", "", "", "for each image..."],
["images/test1.jpg", "", "", "if you move the mouse pointer off and on..."],
["images/test2.jpg", "", "", "allowing you to caption any portfolio images..."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 300, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [200, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "For example..."],
["images/test2.jpg", "", "", "Generic Office Tower, London: EPC carried out"],
["images/test1.jpg", "", "", "Test script for "],
["images/test2.jpg", "", "", "Test script for Ds"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 900, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [200, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/test1.jpg", "", "", "Test script for s."],
["images/test2.jpg", "", "", "Test script for rs"],
["images/test1.jpg", "", "", "Test script for Drs"],
["images/test2.jpg", "", "", "Test script for Ds"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 700, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>


<script type="text/javascript">
if(document.getElementById)
document.write('<style type="text/css">.detail {float:left;width: 480px; border: 0px; padding:10px; display:none;}#zero {display:block;}<\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i)
d[i].style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
</script>
</head>


<body>

<br><br>

<div id="wrapper">


<div id="leftpane">
<div id="fadeshow1"></div>
<div id="fadeshow2"></div>
<div id="fadeshow3"></div>
</div>


<div id="righttextpane">
<div id="triggers">
<div onclick="reveal('first');">
Surveys
</div>
<div onclick="reveal('second');">
Dilapidations
</div>
<div onclick="reveal('third');">
EPCs
</div>
<div onclick="reveal('fourth');">
Other Services
</div>
<div onclick="reveal('fifth');">
Contact Us
</div>
</div>

<div class="detail" id="zero">
This would be the text for the main home page. An image could be displayed below if required as per the example.<br><br><br><br><br><br><br><br><br>
<img height=200 width=475 src="images/statelyhome.jpg">
</div>
<div class="detail" id="first">
This would be the text for the Building Surveys page. An image could be displayed below if required as per the example.<br><br><br><br><br><br><br><br><br>
<img height=200 width=475 src="images/statelyhome.jpg">
</div>
<div class="detail" id="second">
This would be the text for the Dilapidations page. An image could be displayed below if required as per the example.<br><br><br><br><br><br><br><br><br>
<img height=200 width=475 src="images/statelyhome.jpg">
</div>
<div class="detail" id="third">
This would be the text for the EPCs page. An image could be displayed below if required as per the example.<br><br><br><br><br><br><br><br><br>
<img height=200 width=475 src="images/statelyhome.jpg">
</div>
<div class="detail" id="fourth">
This would be the text for the Other Services page. An image could be displayed below if required as per the example.<br><br><br><br><br><br><br><br><br>

<img height=200 width=475 src="images/statelyhome.jpg">

</div>
<div class="detail" id="fifth">
This would be the text for the Contact Us page. An image could be displayed below if required as per the example.<br><br>

Telephone:<br>
Fax:<br>
E-mail:<br>
Address:<br><br><br><br>

<img height=200 width=475 src="images/statelyhome.jpg">


</div>


</div>

<div id="footer">
XX Surveyors is a trading name of XXXXXXXXX </div>
</body>
</html>


Additionally, it isn't displaying correctly in Firefox. The images are just one below each other in a long line.

Thanks.

Avril
Feb 12th, 2010, 07:01 PM
Hello Rewind!

It can!

1. Your left pane contains the four squares of 200px in which the animated images are placed. You can create divs for them, by nesting four divs in the left pane:



#fadeshow {float: left; width:200px; height:200px; border: 1px solid red; display: inline; }

#fadeshow1 {float: right; width:200px; height: 200px; border:1px solid green; display: inline; }

#fadeshow2 {float: left; width:200px; height: 200px; border:1px solid yellow; display: inline; }

#fadeshow3 {float: right; width: 200px; height: 200px; border: 1px solid blue; display: inline; }


The height and width are 200px because it seems your animated images are of that size. The #fadeshow contains your logo, #fadeshow1 contains the animation to the right of it, #fadeshow2 the animation under the first one and #fadeshow3 the animation next to it. Once you have placed them correctly take off the borders or the right div will scoot to the bottom. Adjust, adjust, adjust. Remember that when calculating widths and heights, borders and padding also count.

Your html willbe:



<div id="leftpane">
<div id="fadeshow">Logo </div>
<div id="fadeshow1">fadeshow1</div>
<div id="fadeshow2">fadeshow2</div>
<div id="fadeshow3">fadeshow3</div>
</div>


2. All the css for styling is between the <style> tags. Add your own. Then after you have finished your page satisfactorily, you can cut and paste it into a new .css document and link it to the page.

3. In the right pane you have the navbar with the text and photo underneath.

Cheers!

rewind
Feb 12th, 2010, 07:42 PM
You are a very, very helpful person! I can't thank you enough. I think that brings to an end my questions!!! Although...... ;)

1. In Firefox the border is showing as a black line instead of a grey line like it is in IE. The border code I have used is: border-style: groove;. Do I need to change it?

2. The footer text goes right up to the far right. How can I move it in slightly so the final X doesn't touch the border?

3. Regarding the CSS style code, if I want to change the colour of the links in the menu bar, where would I put this code:



<style type="text/css">
<!--
a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
-->
</style>


I want to change the links from the black text to white.

4. What's the benefits of moving the CSS out of the index.php page and moving it into it's own style sheet?

Many thanks again.

Avril
Feb 13th, 2010, 09:40 AM
Hi, Rewind!

Glad to help.

1. You would have to style the border colour in your css (style) as well. Something like:
border: 2px groove #5E5E5E; (IE is not a standards-compliant browser, so it is better to code for FireFox or the other compliant browsers, then tweak it for IE!)

2. For the footer, change it to:



#footer {float: left; width: 900px; clear: all; height: 15px; background-color: #CCCCCC; padding-right: 20px; border: 0px; font-family: tahoma, verdana, arial, sans-serif; font-size: 10px; text-align:right; line-height: 15px;}
.

The line-height is the same height as the div, which makes the text centre vertically.

3. Your colour codes (called hexadecimal codes) for the links are black (#000000), blue (#0000FF), green (#00800), red (#FF0000). They can be changed to the colours you want. White is #FFFFFF. You can find colour code charts on the Net - just google. The code you posted is what styles the links. It should be put between the <style> </style> tags in the head section with the rest.

4. The advantages of having an external style-sheet is that firstly, it clears up your page, secondly, if you want to use the same styling for other pages you would not have to repeat it again. You would just have to link them to the stylesheet.

Have fun!

rewind
Feb 13th, 2010, 10:44 AM
Thank you as always.

1. I have now created a new style sheet here:



<style type="text/css">

body {margin: 0px; border: 0px; background-color: #8D8D8D; text-align: justify;}

a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }

#wrapper {width: 900px; margin: 0 auto; height: 100%; overflow: hidden; border: 2px groove #5E5E5E; }

#leftpane {float: left; clear: right; width: 400px; height: 100%; background-color: #666666;}

#mainlogo {float: left; width:200px; height:200px; border: 0px; display: inline; }

#fadeshow1 {float: right; width:200px; height: 200px; border:0px; display: inline; }

#fadeshow2 {float: left; width:200px; height: 200px; border:0px; display: inline; }

#fadeshow3 {float: right; width: 200px; height: 200px; border: 0px; display: inline; }

#righttextpane {width: 500px; height: 400px; border: 0px; overflow: hidden; font-family: tahoma, verdana, arial, sans-serif; font-size: 13px; }

#triggers {

float:right; width: 500px;
border:0px; text-align: center; font-family: tahoma, verdana, arial, sans-serif; font-size: 12px;

}

#triggers div {float: left; clear: right; width: 100px; height: 30px; line-height: 30px;
cursor:pointer; background-color: #A00000;
}
#zero {
display:none;
color:black;
}
#first {
color:black;
}
#second {
color:black;
}
#third {
color:black;
}
#fourth {
color:black;
}
#fifth {
color:black;
}

#footer {float: left; width: 890px; clear: all; height: 15px; background-color: #CCCCCC; padding-right: 20px; border: 0px; font-family: tahoma, verdana, arial, sans-serif; font-size: 10px; text-align:right;; line-height: 15px;}

</style>


I have dropped in the following code to the above:



a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }


But it doesn't seem to be affecting the links. Is it because the links are not "proper links" - i.e. they are part of the javascript code you posted?

2. Since I have moved the CSS into a sheet of it's own, the background colour for the whole site has returned to white instead of light grey. Why is this? The grey colour is still there in this piece of code:



body {margin: 0px; border: 0px; background-color: #8D8D8D; text-align: justify;}


3. I notice each section has it's own font family. How would I change it if I wanted different fonts/sizes for different lines of text?

4. For some of the pages, I would like the ability to add more text. How do I make it so you can scroll the page within the righttextpane?

Continued thanks for your patience.

Avril
Feb 13th, 2010, 04:19 PM
Hi, Rewind!

1.2. To create an external css stylesheet, you have to take off the <style type= "text/css"> and the closing tag </style> paste only the styling elements into a separate page and save it as a new document in you site folder with a name ending in .css. E.g. mysitestylesheet.css. To link it to your html page you insert the link tag: <link rel="stylesheet" href='mysitestylesheet.css" type="text/css"> in the head section of the html page. This tells the browser where to find the stylesheet for the page in question. The function of the css is to style the elements in the page.

3. Re. fonts - these are styled with css as well. You can find detailed information on styling fonts if you google it. Too long for me to explain. You would need to know some basic html.

4. Scrolling text is done in two ways. A. With html and css, but it will give you a scroll-bar in the div and I don't know if you really want that seeing your div is small. B. With javascript, but you may find it complicated. If you feel up to it you can google it. There is a neat horizontal scroll code here: http://javascript.internet.com/miscellaneous/scroll-div-horizontal.html.

When designing a site it's best to plan it first to know how exactly it will be constructed, how many pages, etc. because changing it afterwards means going back and redoing parts of it with the errors that it implies.

If it really interests you you could learn the different languages - there are a number of tutorials available online. Hope I haven't discouraged you!

Cheers!

rewind
Feb 14th, 2010, 12:55 PM
Thank you for all of your help with this project. I couldn't have done it without you!

Avril
Feb 14th, 2010, 01:51 PM
Happy to help ! You can buy me a glass of champagne some time !

rewind
Feb 17th, 2010, 06:14 PM
Put the champagne on ice! The site is now completed and just run it through the W3 validator and got the following errors and warnings (14 errors and 10 warnings):



Line 10, Column 67: NET-enabling start-tag requires SHORTTAG YES
…"content-type" content="text/html; charset=utf-8"/>

Line 10, Column 68: character data is not allowed here
…ontent-type" content="text/html; charset=utf-8"/>




THESE SHORTtAG ERRORS CONTINUED FOR THE REMAINDER OF THE METADATA.


Line 18, Column 65: NET-enabling start-tag requires SHORTTAG YES
…uiv="Content-Script-Type" content="text/javascript"/>

Line 127, Column 170: Attribute "BORDER" is not a valid attribute. Did you mean "border"?
… to return to the main page" border=0></a></div>


Line 226, Column 101: Attribute "TARGET" is not a valid attribute. Did you mean "target"?
…uilding/epcsandnondwellings" target=new>here</a> for more



Line 268, Column 15: Attribute "WIDTH" is not a valid attribute. Did you mean "width"?
<iframe width=475 height=200 frameborder=0 scrolling=no marginheight=0 marginwid


Line 268, Column 26: Attribute "HEIGHT" is not a valid attribute. Did you mean "height"?
<iframe width=475 height=200 frameborder=0 scrolling=no marginheight=0 marginwid


Line 268, Column 42: Attribute "FRAMEBORDER" is not a valid attribute. Did you mean "frameborder"?
…me width=475 height=200 frameborder=0 scrolling=no marginheight=0 marginwidth


Line 268, Column 54: Attribute "SCROLLING" is not a valid attribute. Did you mean "scrolling"?
… height=200 frameborder=0 scrolling=no marginheight=0 marginwidth=0 src="http


Line 268, Column 70: Attribute "MARGINHEIGHT" is not a valid attribute. Did you mean "marginheight"?
…eborder=0 scrolling=no marginheight=0 marginwidth=0 src="http://www.google.co


Line 268, Column 84: Attribute "MARGINWIDTH" is not a valid attribute. Did you mean "marginwidth"?
…lling=no marginheight=0 marginwidth=0 src="http://www.google.co.uk/maps?f=q&a


Line 268, Column 90: Attribute "SRC" is not a valid attribute. Did you mean "src"?
…no marginheight=0 marginwidth=0 src="http://www.google.co.uk/maps?f=q&amp;sou


Line 268, Column 386: element "IFRAME" undefined. Did you mean "iframe"?
…,0.002548&amp;z=18&amp;output=embed"></iframe><br /><small><a href="http://ww


Line 268, Column 400: NET-enabling start-tag requires SHORTTAG YES
…z=18&amp;output=embed"></iframe><br /><small><a href="http://www.google.co.uk


Line 276, Column 41: Attribute "ALIGN" is not a valid attribute. Did you mean "align"?
… src="images/brericslogo.jpg" align="right" alt="BRE and RICS certified" titl


Line 281, Column 13: Attribute "COLOR" is not a valid attribute. Did you mean "color"?
<font color="#CC0033"><b>Chartered Surveyors : Building Consultants </b></font>|


Line 281, Column 22: element "FONT" undefined. Did you mean "font"?
<font color="#CC0033"><b>Chartered Surveyors : Building Consultants </b></font>|



I haven't copied and pasted all the text underneath each one. How can I get rid of those? A lot of the warnings are from a Google Map iframe I have included on the Contact Us page.

For the font ones. Why is it saying "FONT" is the error and did I mean "font"? I have written it as "font" and not "FONT" already!

I am using this as my header:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


Is that correct for CSS?

Thanks.

bazz
Feb 17th, 2010, 06:52 PM
Well I have tried all 3 different links to your page that you have posted in this thread and I get a 404 page or something like it, with each of them. :mad:

post a link and keep it live so we can help you.

bazz