Help with deciding upon language!

They have: 10 posts

Joined: Jul 2006

Hey, im fairly new to this whole web design game. I thought I was fairly competant with it after studying Dreamweaver for 2 terms, but obviously not. Ive been asked by a friend to design a website for a side line business shes starting. The attached image shows the basic layout shes after. As you can see, at first it looks perfect for a frameset, but shes dead set on this 'border area' around the bulk of the site (which i think would be made with tags, no?), and as I understand you cant have a frameset in this layout, at least not with HTML. She would also like a slightly more interactive navigation bar than standard, perhaps something that allows you to hover over a link and then show more subcategories. What I would love is someone to give me an idea on what language/languages would be easiest to design this site on.

Thanks Smiling

AttachmentSize
Template.JPG13.94 KB
Megan's picture

She has: 11,421 posts

Joined: Jun 1999

This is pretty much your standard HTML layout. No need for any special languages at this point. For a layout with div's you'd have HTML something like 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#container {width: 760px; border: 1px solid #000;}

#header {width: 100%; height: 150px; border-bottom: 1px solid #000;}

#navbar {float: left; width: 150px; }
#navbar ul {margin-left: 15px; list-style-type: none;}

#content {margin-left: 150px; border-left: 1px solid #000; padding: 15px;}

-->
</style>
</head>

<body>

<div id="container">

<div id="header">
<h1>This is the header</h1>
</div>

<div id="navbar">
<ul><li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
</ul>
</div>

<div id="content">
Pellentesque rhoncus condimentum nibh. Nunc ac justo. Duis eget diam blandit nibh ultrices gravida. Proin pellentesque. Donec sit amet justo quis justo sollicitudin gravida. Pellentesque eu ipsum vel nibh vulputate dignissim. Integer lacinia. Vivamus in ante. Sed erat. Donec sed felis. In auctor. Cras eget orci. Aliquam mi mi, tincidunt id, pharetra quis, imperdiet sed, lectus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vitae massa quis tortor rhoncus congue. Maecenas tempor lobortis leo. Suspendisse molestie urna. Cras rhoncus. Nulla dictum, neque ut rutrum facilisis, ligula dui ultricies neque, a viverra est quam at lectus. Fusce venenatis feugiat purus. Nam posuere. Donec tincidunt dapibus mauris. Aliquam quis ante. Donec malesuada odio ut velit. Nam et velit. In rhoncus, magna commodo porta cursus, mauris augue varius felis, vulputate tristique nisi nibh vehicula ipsum. Donec fermentum justo volutpat odio. Sed pede mauris, tempus et, porttitor a, feugiat a, nisi. Donec sed nisi id sapien fermentum porttitor. Quisque justo odio, malesuada ac, tristique at, condimentum ac, velit. Donec sed sapien. Curabitur sed justo et ligula vehicula tempor. In at mauris.

Etiam ultrices, libero vel bibendum venenatis, eros odio blandit nisl, sed vestibulum lacus augue ac nulla. In ac enim. Proin dolor nibh, tincidunt et, facilisis ac, placerat id, eros. Donec tempor ultricies eros. Sed risus. Maecenas eleifend. Sed fermentum vehicula nisl. Aliquam dictum, mi ut bibendum fringilla, felis felis hendrerit leo, sit amet sagittis purus quam suscipit ipsum. Nam interdum. Nulla convallis tortor et arcu. Vivamus dignissim orci id lorem. Vestibulum accumsan dictum orci. Fusce mattis.
</div>

</div>


</body>
</html>
'

For a fly-out navigation menu like that, you can do it entirely with CSS as well. Check out the control panel here on the forums. The Drop-down menu there is done entirely with CSS. I belive I borrowed the code from A List Apart.

I'll be back in a minute with a different version of the above using tables. You really ought to learn about how to lay out pages in HTML. The prefferred version is with div's and CSS as I posted above. The "old" way is with tables as a layout framework which I'll show you in a minute.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Here's the tabled version:

<style type="text/css">
<!--
#container {width: 760px; border: 1px solid #000;}

#header {height: 150px; border-bottom: 1px solid #000;}
#navbar {width: 150px; }
#navbar ul {margin-left: 0px; list-style-type: none;}
#content {border-left: 1px solid #000; padding: 15px;}
#footer {border-top: 1px solid #000;}

td {vertical-align: top;}
-->
</style>
</head>

<body>


<table id="container">
<tr><td id="header" colspan="2">
<h1>This is the header</h1>
</td>
</tr>

<tr><td id="navbar">
<ul><li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
</ul>
</td>

<td id="content">
Pellentesque rhoncus condimentum nibh. Nunc ac justo. Duis eget diam blandit nibh ultrices gravida. Proin pellentesque. Donec sit amet justo quis justo sollicitudin gravida. Pellentesque eu ipsum vel nibh vulputate dignissim. Integer lacinia. Vivamus in ante. Sed erat. Donec sed felis. In auctor. Cras eget orci. Aliquam mi mi, tincidunt id, pharetra quis, imperdiet sed, lectus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vitae massa quis tortor rhoncus congue. Maecenas tempor lobortis leo. Suspendisse molestie urna. Cras rhoncus. Nulla dictum, neque ut rutrum facilisis, ligula dui ultricies neque, a viverra est quam at lectus. Fusce venenatis feugiat purus. Nam posuere. Donec tincidunt dapibus mauris. Aliquam quis ante. Donec malesuada odio ut velit. Nam et velit. In rhoncus, magna commodo porta cursus, mauris augue varius felis, vulputate tristique nisi nibh vehicula ipsum. Donec fermentum justo volutpat odio. Sed pede mauris, tempus et, porttitor a, feugiat a, nisi. Donec sed nisi id sapien fermentum porttitor. Quisque justo odio, malesuada ac, tristique at, condimentum ac, velit. Donec sed sapien. Curabitur sed justo et ligula vehicula tempor. In at mauris.

Etiam ultrices, libero vel bibendum venenatis, eros odio blandit nisl, sed vestibulum lacus augue ac nulla. In ac enim. Proin dolor nibh, tincidunt et, facilisis ac, placerat id, eros. Donec tempor ultricies eros. Sed risus. Maecenas eleifend. Sed fermentum vehicula nisl. Aliquam dictum, mi ut bibendum fringilla, felis felis hendrerit leo, sit amet sagittis purus quam suscipit ipsum. Nam interdum. Nulla convallis tortor et arcu. Vivamus dignissim orci id lorem. Vestibulum accumsan dictum orci. Fusce mattis.
</td>
</tr>

<tr><td id="footer" colspan="2">You'll probably want a footer here </td></tr>
</table>
'

He has: 490 posts

Joined: May 2005

There is also another way to handle the header.
header name
Actually when a table colspan dimension contains the header this is the proper way to do it.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Wait! You wanted the background showing? Put in:

body {margin: 50px;} (or however big you want it)

More complete code:

<style type="text/css">
<!--
body {background-color: #99CCCC; margin: 50px;}
#container {width: 100%; border: 1px solid #000; background-color:#fff;}

#header {height: 150px; border-bottom: 1px solid #000; padding: 15px;}

#navbar {float: left; width: 150px; padding: 15px; }
#navbar ul {margin-left: 0; padding: 0; list-style-type: none;}

#content {margin-left: 170px; border-left: 1px solid #000; padding: 15px;}

#footer {padding: 15px; text-align: center; border-top: 1px solid #000;}
-->
</style>
</head>

<body>

<div id="container">

<div id="header">
<h1>This is the header</h1>
</div>

<div id="navbar">
<ul><li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
</ul>
</div>

<div id="content">
  <p>Pellentesque rhoncus condimentum nibh. Nunc ac justo. Duis eget diam blandit nibh ultrices gravida. Proin pellentesque. Donec sit amet justo quis justo sollicitudin gravida. Pellentesque eu ipsum vel nibh vulputate dignissim. Integer lacinia. Vivamus in ante. Sed erat. Donec sed felis. In auctor. Cras eget orci. Aliquam mi mi, tincidunt id, pharetra quis, imperdiet sed, lectus.    </p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vitae massa quis tortor rhoncus congue. Maecenas tempor lobortis leo. Suspendisse molestie urna. Cras rhoncus. Nulla dictum, neque ut rutrum facilisis, ligula dui ultricies neque, a viverra est quam at lectus. Fusce venenatis feugiat purus. Nam posuere. </p>
  <p>Donec tincidunt dapibus mauris. Aliquam quis ante. Donec malesuada odio ut velit. Nam et velit. In rhoncus, magna commodo porta cursus, mauris augue varius felis, vulputate tristique nisi nibh vehicula ipsum. Donec fermentum justo volutpat odio. Sed pede mauris, tempus et, porttitor a, feugiat a, nisi. Donec sed nisi id sapien fermentum porttitor. Quisque justo odio, malesuada ac, tristique at, condimentum ac, velit. Donec sed sapien. Curabitur sed justo et ligula vehicula tempor. In at mauris.
   
    Etiam ultrices, libero vel bibendum venenatis, eros odio blandit nisl, sed vestibulum lacus augue ac nulla. In ac enim. </p>
  <p>Proin dolor nibh, tincidunt et, facilisis ac, placerat id, eros. Donec tempor ultricies eros. Sed risus. Maecenas eleifend. Sed fermentum vehicula nisl. Aliquam dictum, mi ut bibendum fringilla, felis felis hendrerit leo, sit amet sagittis purus quam suscipit ipsum. Nam interdum. Nulla convallis tortor et arcu. Vivamus dignissim orci id lorem. Vestibulum accumsan dictum orci. Fusce mattis. </p>
</div>

<div id="footer">You'll probably want a footer here </div>
</div>
'

They have: 10 posts

Joined: Jul 2006

Thank you for the fast and very helpful replies Smiling

Megan, im having difficulty with the background though. We want an image for it, and have already got one set up (it looks amazing, my friends business is for her own modelling/photography business and shes incredibly arty) and I cant seem to get the code right. As I understand I want the tables/divs to sit on top of it, but when I do manage to get it appearing through the use of CSS its not shown in full. What would be the code for this?

Very sorry about the lack of knowledge ive got on this Sad Would really appreciate any further help

Cheers

He has: 490 posts

Joined: May 2005

body{
background: #? url(whatever.jpg/gif)
no-repeat fixed center;
}

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Try what steve has there and see how far that gets you. This is what that code is doing

Background: (obvious)
#? (this means the colour value to show up in behind. So you'd have #ffffff if you wanted white)
url(whatever.jpg) (link to your file)
no-repeat (if you want it to tile, change that to repeat; backgrounds always tile by default so if you don't want them to you have to put in the no-repeat)
fixed (this means that that the background won't scroll with the page. I personally don't really like this effect. It's a little weird)
center (this is the position of the background on the page; there are a range of values you can put here).

You can take a look at all of the background properties here. You can see that steve has combined them all into one rule. It's just more efficient to do it that way rather than listing them all separately. You can also have a background on the whole page (body) or on any div.

If you put up a link to what you've go so far we might be able to help find out what exactly you need to do.

They have: 10 posts

Joined: Jul 2006

Wow, thanks again for the help Laughing out loud

I've managed to get the background working, and am slowly perfecting the positioning of the table (I had to use these in the end, couldnt get the div code to show it properly). Ive also placed an iFrame in the content cell, its shaping up very nicely. We should be getting the web space/domain name within the next couple of days, until then I cant show you anything Sad As soon as I can, I will though.

Thanks again for the help! No doubt I'll be back soon enough in need of more lol

Cheers

They have: 10 posts

Joined: Jul 2006

Hey
I've finally got the webhosting sorted, and the address is vintageneedles.co.uk
Its very much a work in progress, as you can see. I've got to get a bigger background to stop it tiling on larger screens for one thing. The thing that concerns me the most however is that the table that holds the banner, content and nav bar isnt dead center. Could someone give me the code that would allow me to place it like this? Thanks Smiling

Edit: Could people also try 'The Girls' link? For some reason it doesnt work when I myself try to look at it from the net, though other people say it works fine

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.