Website design gurus! I need help!

[Shadowness]

Ok, after a long time I've had a go at building my own website. Before I post the link, there a some questions I have, which will be more obvious when you look at the site!


The website is pretty well finished APART from the arrangement is completely off! I have no experience with html or css, so I dont know how to move the banners. I want the final site to be arranged like this:



Heres the link to the site so far http://www.danfreemanphotography.com/

I understand I need to use css to arrange the two seperate banners, but I havent got the first clue how to do that!
This is the only thing that I need to do to almost finish the site, so all help is much apreciated!

[efoolution]

Looking at your screenshot made me think "looks fine to me" ... then I klicked the link ... and you are certainly not using what I am using if the page looks like that on your Pc ...

this is the page on the current firefox ...




on the recent internet explorer, it looks a lot better ... still not good.



(both screenshots are of reduced picture quality, for less filesize)

edit: misread your post. you WANT it to look like in the picture ... sry, please just ignore this post

[Solberg]

Shadowness, I will happily sort out all those issues for you.

However, I won't have any time until the end of next week.

If it's urgent perhaps someone else can be come to the rescue.

[Mally Dangerous]

Are you using any design software? Are you willing to learn a little CSS? It's not very hard to get the site looking how you want but you're going to have to get your hands dirty. I can help you if you like.

[Shadowness]

Yeh Ive got Dreamweaver, I did try to learn the basics, but I got frustrated lol! All I need is those in the correct place for all the pages and its done

Can I just send the code that I have at the moment, with one of the pages as reference to someone who can finish it off? Is that a big job or not?

[Solberg]

it's not a big job at all.

I will help you out at the end of next week as I said, unless someone else can help before then.

[avanti]

will follow this thread, since I'm pretty much in the same situation as shadowness.

[Mally Dangerous]

I'll have time to knock it out for you on Friday if you can wait till then.

[Dr.Kamiya]

Get rid of teh ugly height="100%" tags in your css. When you do that, the defined area becomes the same height as the viewable area in the browser, regardless of whether there's another area on top or below, giving you unnecessary vertical scroll bars. Also why is there a </div> tag after your first image, when you never even opened with a <div>?

For the top banner, you can prolly make the image wider so that it's as wide as your left navbar image + the swf viewer, or you can just use tables. People in modern web design will tell you tabled layouts are so web 1.0, but it is easy to use, especially if you're not sure about how to go about laying out the page with divs.

<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td></td>
<td> -- insert top banner image code here </td>
</tr>
<tr>
<td> -- insert left banner image code here </td>
<td> -- insert swf viewer code here </td>
</tr>
</table>

[Shadowness]

Thanks for the replies. I hope im not coming across as lazy lol Its just I not really looking forward to learning CSS just to move two objects. To be honest im feckin proud of myself for what ive done so far, as I knew NOTHING about web design before 2 days ago!

Ok, ive made a template of the style that the galleries are in. So this is representative of all my galleries. Obviously I had to change the link locations from their originals to work for you. As I said all I need is the new code that will tell the two banners where to go

Linky: Template.rar

Thanks to anyone who tries! If you have any questions, please feel free to ask!

[Shadowness]

Thanks Dr.Kamiya, I have to be honest in saying that most of what you said means nothing to me! How do I find the codes of each object?

[db2450]

Originally Posted by Shadowness

Thanks Dr.Kamiya, I have to be honest in saying that most of what you said means nothing to me! How do I find the codes of each object?

The codes of each object are the ways you stuck them into the page.
Have you done with all with Dreamweaver's design area? Or have you done some of the coding? If you did some coding, I will go more in depth in my next post.
For right now, you should be able to make a table in Dreamweaver and just place each image/banner in there.

Btw, what did you use to make the flash image thingy?

[Shadowness]

Its just a modified version of simpleviewer
I only did a bit of the basic coding. But I have no idea what to do for the table thingy!

[Shadowness]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DAN FREEMAN PHOTOGRAPHY</title>
<!-- Download SimpleViewer at www.airtightinteractive.com/simpleviewer -->
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}

#flashcontent {
height: 100%;
}
/* end hide */

body {
height: 100%;
margin: 0;
padding: 0;
background-color: #fcfbf9;
color:#fcfbf9;
}


</style>
</head>
<body>

<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td></td>
<td>Banner1.jpg</td>
</tr>
<tr>
<td>../Banner2.jpg</td>
<td>swfobject.js</td>
</tr>
</table>

<img src="Banner1.jpg" alt="banner1" width="809" height="19" border="0" align="middle" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="742,-4,813,18" href="contact/index.html" alt="Contact" />
<area shape="rect" coords="660,-1,717,19" href="about/index.html" alt="About" />
</map>



<img src="../Banner2.jpg" alt="banner2" border="0" align="left" usemap="#Map2" longdesc="../Banner2.jpg" />
<map name="Map2" id="Map2">
<area shape="rect" coords="41,0,125,20" href="index.html" alt="Automotive" />
<area shape="rect" coords="43,43,128,69" href="landscape/index.html" alt="Landscape" />
<area shape="rect" coords="83,87,129,109" href="floral/index.html" alt="Floral" />
<area shape="rect" coords="16,122,17,123" href="#" alt="" />
<area shape="rect" coords="0,130,127,158" href="abstract/index.html" alt="Abstract/Still Life" />
<area shape="rect" coords="81,175,129,201" href="misc/index.html" alt="Misc" />
</map>
<div id="flashcontent">SimpleViewer requires Macromedia Flash. <a href="http://www.macromedia.com/go/getflashplayer/">Get Macromedia Flash.</a> If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a>.</div>
<script type="text/javascript">
var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#fcfbf9");
fo.addVariable("preloaderColor", "0xfcfbf9");
fo.addVariable("xmlDataPath", "gallery.xml");
fo.write("flashcontent");
</script>

</body>
</html>

It'll probably help if I post the code for the index.html page. Tbh, all the other index.html pages are pretty similar with different links

[Dr.Kamiya]

Here's what I ended up with trying to fix things with tables, and getting rid of the height tags. I couldn't get the simpleviewer window much smaller than 900x700 though, much narrower and you lose the left/right buttons on the thumbnail bar, much shorter and you lose the thumbnail bar altogether. (Not familiar with how simpleviewer should be configured).

Download here:
http://senduit.com/ca0141

[Dr.Kamiya]

If I reduce the height and width of simpleviewer to about 700 or 800, it sits almost flush with the banners like in your first image, but then parts of the viewer get cut off.

[Shadowness]

Thats pretty close! How do I centre all of the objects to the centre of the page?

[Dr.Kamiya]

Originally Posted by Shadowness

Thats pretty close! How do I centre all of the objects to the centre of the page?

add an align=center attribute to the <table> tag or put the entire table in between <center></center> tags.

[Shadowness]

<centre>

<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
</td>
<td>
<div>
<img src="Banner1.jpg" alt="banner1" width="809" height="19" border="0" align="middle" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="742,-4,813,18" href="contact/index.html" alt="Contact" />
<area shape="rect" coords="660,-1,717,19" href="about/index.html" alt="About" />
</map>
</div>
</td>
</tr>
<tr>
<td valign=top>
<img src="Banner2.jpg" alt="banner2" border="0" align="left" usemap="#Map2" longdesc="../Banner2.jpg" />
<map name="Map2" id="Map2">
<area shape="rect" coords="41,0,125,20" href="index.html" alt="Automotive" />
<area shape="rect" coords="43,43,128,69" href="landscape/index.html" alt="Landscape" />
<area shape="rect" coords="83,87,129,109" href="floral/index.html" alt="Floral" />
<area shape="rect" coords="16,122,17,123" href="#" alt="" />
<area shape="rect" coords="0,130,127,158" href="abstract/index.html" alt="Abstract/Still Life" />
<area shape="rect" coords="81,175,129,201" href="misc/index.html" alt="Misc" />
</map>
</td>
<td valign=top>
<div id="flashcontent">SimpleViewer requires Macromedia Flash. <a href="http://www.macromedia.com/go/getflashplayer/">Get Macromedia Flash.</a> If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a>.</div>
<script type="text/javascript">
var fo = new SWFObject("viewer.swf", "viewer", "890", "700", "7", "#fcfbf9");
fo.addVariable("preloaderColor", "0xfcfbf9");
fo.addVariable("xmlDataPath", "gallery.xml");
fo.write("flashcontent");
</script>
</td>
</tr>
</table>

</centre>

It doesnt seem to do anything
So is there no way of getting the two banners into the exact positions?