Paladine, if you could give me links to one of those designs maybe I could have a go at making it in CSS. I will be busy in the next couple of weeks but I should be able to find the time somewhere.

Since I won't actually be using it hopefully I won't be breaching their copyright... Just proving a point... :lol:

P.S. I tried to do something simple in Adobe with slices and it didn't work the way I thought it would. I have a training CD which I am going to try to go through.

:cool:

Hey, Adobe is great for making graphics, but be careful using the HTML their products produce from slicing. It tends to write bloated code at times and it is somtimes not as cross browser compatible as it should be.

Hey, Adobe is great for making graphics, but be careful using the HTML their products produce from slicing. It tends to write bloated code at times and it is somtimes not as cross browser compatible as it should be.

I know what you mean about the bloated code... it's ridiculous. Anyway, I don't use adobe to generate html, I just slice the images up and save them as seperate files, then use them in my code :D.

Thanks DaveSW here is the primary site, and I just found those I posted initially just through browsing their items.

Thanks in advance.

P.S. I tried to do something simple in Adobe with slices and it didn't work the way I thought it would. I have a training CD which I am going to try to go through.

:cool:

Have I missed a link in there? :!:

Well, it would appear to me, maybe, a vector drawing program, Photoshop and Dreamweaver. What you show hear appears to be a template from one of those package thingies. I know a lot of those are done in Photoshop period. With layers you can arrange to suit yourself, then save as HTML. Jes thots off the top o me head.
BuddyB

Those two, specifically, are purchased templates from www.templatemonster.com

No one has mention Microsoft Publisher and Microsoft Excel. You can do some nice things with those programs too. I know for sure that in Excel you can create you site by inserting your pictures and such then just save it as a website under the File menu.

No one has mention Microsoft Publisher and Microsoft Excel. You can do some nice things with those programs too. I know for sure that in Excel you can create you site by inserting your pictures and such then just save it as a website under the File menu.

My problem with "auto generated" code is the bloat. Even when I use Photoshop, I do not auto generate the code. I slice them manually and then create the code myself.

When you are dealing with MS products that were not designed to create websites as their main function, like the office products, you get a TON of bloat. Bloat slows down your site and search engines choke on it.

OK check out this link:
http://www.emdevelopments.co.uk/demo/cssdemo/

I've had to shrink the fonts down because the image they provided was only 520px wide. Normally I'd up it to 740px wide, so the fonts would be readable...

It's not completely converted, but the hard work is done.
Basically one large top image. menus and titles positioned over it.
Content positioned by margins.
Footer left as an image for the time being.

Do you want me to try and explain it? Mind you, it won't seem like a miracle if I do...

Getting eye surgery done tomorrow

Ouch...

Ok First thing I did was take the screen shots into PSP8.
I then used the clone brush to brush the link text out, as you guessed. If you look closely you can see some background blurring there.
I then saved the cleaned version, cropped it to the top image http://www.emdevelopments.co.uk/demo/cssdemo/topback.jpg
saved that one. Then I pressed undo to get all the image back, cropped to the bottom piece, and saved that one.
http://www.emdevelopments.co.uk/demo/cssdemo/bottom.jpg

Because of the design of the images I decided it would have to go in the top left corner, as the images wouldn't look right if the design was centralised.

I then set the top image as the background of the page, tucked to the top left corner, set a simple font family (not being unduly bothered what font it was) and removed all margins and padding to get it flush.
body {
background: #3F3F50 url(topback.jpg) 0 0 no-repeat;
font-family: sans-serif;
margin: 0;
padding: 0;

I then created the container div, width same as the image, with a right border to help with debugging and actually improve the appearance slightly. the background color was from the bottom of the gradient, to make the design expand.

Then the title went in via a h1 tag.YOUR COMPANY NAME
An inline span was used to color the 'your' differently as in the original design.

The title had to be absolutely positioned from the top right to make it accurate:h1 {
color: #fff;
font-size: 14px;
position: absolute;
top:20px;
left: 300px;
}
The position: absolute takes it out of the document flow, so it won't affect the positioning of other elements if someone increases the font size etc.

Then the bit you've been waiting for: the menus.
incidentally I did #nav2 first, but that wasn't anything scientific. It just looked easier...
Because a menu is technically a list of links, I coded them as such. I then hid the bullets, cleaned off the margins, and accurately positioned the box over the place it was supposed to be on the image.
the li elements were used to set the widths, and the a elements then had the colors set.

#nav1 took longer, but only because horizontal lists are a little more tricky in Moz. I could just have floated them right, but then the order would have been reversed, and I preferred to keep the semantic list order.
If you examine the commented code below you'll see what I did:#nav1 {
position: absolute;
top: 175px;
left: 300px;
}
/* accurately position box from the left hand side */
#nav1 ul {
font-size: 8px;
list-style: none;
margin: 0;
padding: 0;
}
/* font size, hide bullets, remove all spaces around it. */
#nav1 li {
display: inline;
height: 30px;
text-align: center;
width: 51px;
}
/* display inline puts al the li tags in a row. However, if you look closely you may spot where Moz went wrong. Moz doesn't like dimensions on inline elements. So whilst it looked great in IE, moz put then next to each other as plain text. oops. hence the corrective measure in the next step for moz. */
#nav1 a {
display: block;
float: left;
width: 51px;
color: #808080;
text-decoration: none;
}
/* each hyperlink was floated left within it's li element. display block enabled moz to accept dimensions. I should have repeated the height entry in here to get the text vertically centered, but it doesn't matter. */
#nav1 a:hover {
text-decoration: underline;
}
/* the underline effect for the links. */

I then created a content div, and used margins to position it over the blank bit:#content {
color: #fff;
font-size: 10px;
margin-top: 215px;
margin-left: 180px;
}

Then because I was tired I dropped the footer image in below it. :)

And that was it. About 30mins worth.

Hopefully that helps you somehow!

Regards

Dave

Greetings.
Wow! That bit of "tutorial" was interesting!
Thanks! That got me excited and would want to try it out now. LOL.

How about this: Is it possible to do this without using flash at all?
Refering to your topback.jpg, hide the blue rectangle which accomodates the menu (first page link, second page link, & etc.) on the left at startup. Maybe, replace it with a small button. When the button is clicked, only will the blue rectangle appear on a setInterval manner (slowly unfolds).

yes. you'd use javascript/dhtml, probably javascript as in drop down menu type features.

The blue rectangle would have to be cut off the background image, and put as the background of #nav2 in my code.

I'm not actually into javascript, so I wouldn't be able to code the 'unfold'. However I might be able to find/adapt a script.

The straight show/hide code is simple enough so I'll see if I can dig it out for you.

This is the basic javascript that would show/hide the menu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/Javascript">
function show(id)
{
	el = document.getElementById(id);
	if (el.style.display == 'none')
	{
		el.style.display = '';
		el = document.getElementById('more' + id);
		el.innerHTML = 'Hide Menu';
	} else {
		el.style.display = 'none';
		el = document.getElementById('more' + id);
		el.innerHTML = 'Show Menu';
	}
}

</script>
</head>
<body>
<a id="moreinfo"
onclick="javascript:show('info');return false;"
href="#">show menu</a>

<div id="info" style="display: none">
Menu contents
</div>
</body>
</html>

The menu div would replace the one with the id of info.
The background would be attached to the div, hence the menu would appear onclick.
the hyperlink text could be replaced with an image for a graphical button.

I'll go in search of a script that includes transitions...

also this link has a different script: http://www.webmasterworld.com/forum91/441.htm

check out the dhtml slide for the animated part: http://www.dyn-web.com/dhtml/slide/

Greetings.
Impressed + thanks a lot for the help.
That really got my interest rising in being a webmaster too. :D