creating website working with tables

[helen6391]

Hello Everyone,

I am creating a new site and would like the following. Please see image for example. I have tried but having difficulties with the upper background and lower background images. The text content part I would like a drop shadow which I can do.

This is what I would like to do.

1. main background colour grey
2. add upper image background on main background,
3. add navigation bar and text content on upper image background with drop shadow on text content part, so the upper image background would be underneath the navigation bar and text content area.
4. add bottom background image on top of text content page.

The problem I am having is to add the navigation and text content on top of the upper image background and to add the bottom image background on top of the navigation and text content area.

I hope i am not confusing anyone but any help would be great.

[KL-Webmedia]

with what software are you working? try to make div tags instead of tables! add a .css file and show how easy this works. maybe you should look up some fineshed website html files and should learn from them.

[webcosmo]

Use div with css, that would allow you manage the design aspect from one single place.

<div class="header">
<div class="nav">
........
</div>
</div>
<div class="content_l">
<div class="content_r">
........
</div>
</div>
<div class="footer">
...
</div>

[helen6391]

Use div with css, that would allow you manage the design aspect from one single place.

<div class="header">
<div class="nav">
........
</div>
</div>
<div class="content_l">
<div class="content_r">
........
</div>
</div>
<div class="footer">
...
</div>

Looks like what I might need but haven't got a clue how to go about creating the whole thing. I do not want to be spoon fed but would you be able to show me just the upper background image how you would insert the .css code in dreamweaver.

thanks

sorry

[RyanReese]

From the looks of it, that upper background image is the image you set on the header. Yes? Going off that assumption.

In the above HTML webcosmo mentioned, he uses a class to reference the element. So a background image would look like this

.header
{
  background:url(image.jpg) no-repeat;
}

The no-repeat may not be needed. Depends on if your image will be repeated across the x/y axis. If your image is 800x300. You won't watn that repeated probably. So you can just take out that no-repeat line. Depends on what you have .

[helen6391]

Thanks everyone you guys are great appreciate it. I shall head to the w3school css place and get learning.

[TechnoBear]

Thanks everyone you guys are great appreciate it. I shall head to the w3school css place and get learning.

Please don't - it's not the best place to learn. This site explains why and suggests a number of more reliable resources. Other good sites include http://www.htmldog.com/guides/ and http://www.iraqtimeline.com/maxdesign/basicdesign/.

[helen6391]

Please don't - it's not the best place to learn. This site explains why and suggests a number of more reliable resources. Other good sites include http://www.htmldog.com/guides/ and http://www.iraqtimeline.com/maxdesign/basicdesign/.

I am well confuse but appreciate your post I've also came across on the net about not using w3school. At the moment I am like a fish out of water i wouldn't know any different but yes I shall check your links.

[RyanReese]

I am well confuse but appreciate your post I've also came across on the net about not using w3school. At the moment I am like a fish out of water i wouldn't know any different but yes I shall check your links.

It's a good reference site just to get some minor details to jog your memory. Such as the syntax for something. I will visit there somewhat frequently due to it being at the top of google most of the time when I google a property . As a learnin resource? Technobear spoke my thoughts .

[TheRaptor]

I took 20 minutes and coded you a simple layout that should give you a shove in the right direction. As with all my layouts, this one is fluid.

The CSS is slightly commented. But if you have any questions, just ask.

HTML:

<div id="header">
    <h1>Header Image</h1>
</div><!-- #header -->

<div id="main">

    <ul id="navigation">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul><!-- #navigation -->
    
    <div class="content">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </div><!-- .content -->
        
</div><!-- #main -->

<div id="footer">
    <p>Footer Text</p>
</div><!-- #footer -->
    

CSS:

#header 
{
    background: #002FFF url() no-repeat; /* fill in the url to your background image */
    width: 100%;
    max-width: 1000px; /* take this and the next line out to remove constraints */
    margin: auto;
    padding: 80px 0 80px; /* make the box bigger by adding 80px padding to the top and bottom */
    text-align: center;
    color: #fff;
}
 
#main
{
    width: 100%;
    max-width: 950px; /* don't allow content to flow past 950px */
    margin: auto; /* center  #main div */
    box-shadow: 0 0 8px #000; /* CSS3 boxshadow (this will only work in select newer browsers, you may want to lookup vendor prefixes) */
}
 
#navigation
{
    background: #ccc;
    text-align: center;
    margin-top: -18px; /* force navigation up 18px */
}
 
#navigation li
{
    display: inline;
    padding: 0 20px;
}
 
.content 
{
    padding: 20px;
}
 
#footer
{
    width: 100%; 
    max-width: 1000px;
    margin: auto;
    background: #002FFF url() no-repeat; /* again, fill in the url to your background image */
    text-align: center;
    color: #fff;
    padding: 30px 0 30px;
}

Live demo: http://jsfiddle.net/2hEaU/embedded/result/.

[helen6391]

I took 20 minutes and coded you a simple layout that should give you a shove in the right direction. As with all my layouts, this one is fluid.

The CSS is slightly commented. But if you have any questions, just ask.

HTML:

<div id="header">
    <h1>Header Image</h1>
</div><!-- #header -->

<div id="main">

    <ul id="navigation">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul><!-- #navigation -->
    
    <div class="content">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </div><!-- .content -->
        
</div><!-- #main -->

<div id="footer">
    <p>Footer Text</p>
</div><!-- #footer -->
    

CSS:

#header 
{
    background: #002FFF url() no-repeat; /* fill in the url to your background image */
    width: 100%;
    max-width: 1000px; /* take this and the next line out to remove constraints */
    margin: auto;
    padding: 80px 0 80px; /* make the box bigger by adding 80px padding to the top and bottom */
    text-align: center;
    color: #fff;
}
 
#main
{
    width: 100%;
    max-width: 950px; /* don't allow content to flow past 950px */
    margin: auto; /* center  #main div */
    box-shadow: 0 0 8px #000; /* CSS3 boxshadow (this will only work in select newer browsers, you may want to lookup vendor prefixes) */
}
 
#navigation
{
    background: #ccc;
    text-align: center;
    margin-top: -18px; /* force navigation up 18px */
}
 
#navigation li
{
    display: inline;
    padding: 0 20px;
}
 
.content 
{
    padding: 20px;
}
 
#footer
{
    width: 100%; 
    max-width: 1000px;
    margin: auto;
    background: #002FFF url() no-repeat; /* again, fill in the url to your background image */
    text-align: center;
    color: #fff;
    padding: 30px 0 30px;
}

Live demo: http://jsfiddle.net/2hEaU/embedded/result/.

Thank you so much exactly what I was looking for appreciate it I would never been able to do those codes. This is a start and can take me to the right direction and understand how it's done.

Just one more question I would like to take the drop shadow off the top where the links are and just have them on the left and right sides only would you mind telling me what I need to do.

helen

[TheRaptor]

Its all in this line:

#main
{
    width: 100%;
    max-width: 950px; /* don't allow content to flow past 950px */
    margin: auto; /* center  #main div */
    box-shadow: 0 0 8px #000; /* CSS3 boxshadow (this will only work in select newer browsers, you may want to lookup vendor prefixes) */
}

Note the last line. That is what you'll need to change. To remove the shadow off the top, change the values to:

box-shadow: 0px 10px 8px #000;

In the snippet above, "10px" is whats pushing the shadow down off the top. Mess around with the values till you find something you like.

[helen6391]

Its all in this line:

#main
{
    width: 100%;
    max-width: 950px; /* don't allow content to flow past 950px */
    margin: auto; /* center  #main div */
    box-shadow: 0 0 8px #000; /* CSS3 boxshadow (this will only work in select newer browsers, you may want to lookup vendor prefixes) */
}

Note the the last line. That is what you'll need to change. To remove the shadow off the top, change the values to:

box-shadow: 0px 10px 8px #000;

In the snippet above, "10px" is whats pushing the shadow down off the top. Mess around with the values till you find something you like.

Thank you so much.

[helen6391]

I took 20 minutes and coded you a simple layout that should give you a shove in the right direction. As with all my layouts, this one is fluid.

The CSS is slightly commented. But if you have any questions, just ask.

HTML:

<div id="header">
    <h1>Header Image</h1>
</div><!-- #header -->

<div id="main">

    <ul id="navigation">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul><!-- #navigation -->
    
    <div class="content">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </div><!-- .content -->
        
</div><!-- #main -->

<div id="footer">
    <p>Footer Text</p>
</div><!-- #footer -->
    

CSS:

#header 
{
    background: #002FFF url() no-repeat; /* fill in the url to your background image */
    width: 100%;
    max-width: 1000px; /* take this and the next line out to remove constraints */
    margin: auto;
    padding: 80px 0 80px; /* make the box bigger by adding 80px padding to the top and bottom */
    text-align: center;
    color: #fff;
}
 
#main
{
    width: 100%;
    max-width: 950px; /* don't allow content to flow past 950px */
    margin: auto; /* center  #main div */
    box-shadow: 0 0 8px #000; /* CSS3 boxshadow (this will only work in select newer browsers, you may want to lookup vendor prefixes) */
}
 
#navigation
{
    background: #ccc;
    text-align: center;
    margin-top: -18px; /* force navigation up 18px */
}
 
#navigation li
{
    display: inline;
    padding: 0 20px;
}
 
.content 
{
    padding: 20px;
}
 
#footer
{
    width: 100%; 
    max-width: 1000px;
    margin: auto;
    background: #002FFF url() no-repeat; /* again, fill in the url to your background image */
    text-align: center;
    color: #fff;
    padding: 30px 0 30px;
}

Live demo: http://jsfiddle.net/2hEaU/embedded/result/.

Sorry I have another question I would like to replace the navigation links you've created and put a navigation bar with drop down menus i've created in fireworks 8 how do I go about inserting the fireworks navigation bar in that area.

Thanks



helen

[TechnoBear]

Have you tried to do this yourself? If so, what was the problem you encountered?

What's the code for your navigation bar?

[helen6391]

Have you tried to do this yourself? If so, what was the problem you encountered?

What's the code for your navigation bar?

Shamefully I have no idea I am very new with .css style i've been concentrated on html more but want to learn css style. I've created my navigation bar in photoshop then take it to fireworks and add the drop down menus then export to dreamweaver. I want to have the nav bar on the upper background image as shown in my original post.

Thanks to The Raptor i've got a little insight about css I am practicing with the codes he helped me with but making a mess to add the navigation bar where the links are.

helen

[TechnoBear]

I've created my navigation bar in photoshop then take it to fireworks and add the drop down menus then export to dreamweaver.

I'm trying not to think what auto-generated code will look like at the end of that process. However, after you've exported to Dreamweaver, can you then copy the relevant bit from code view? If you can't decide which bit is relevant, then just copy the lot.

[helen6391]

I'm trying not to think what auto-generated code will look like at the end of that process. However, after you've exported to Dreamweaver, can you then copy the relevant bit from code view? If you can't decide which bit is relevant, then just copy the lot.

I will yes you are right there is a lot of auto-generated code which I cannot make head or tails. I'll export from firework then show you all the codes. I need the drop down menus so not sure if I can achieve what I want with .css style.

brb

There's the codes with navigation bar and drop down menu. Sorry looks a mess

------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>INDEX PAGE LAYOUTNEW.png</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks 8 Dreamweaver 8 target. Created Sat May 05 20:02:12 GMT+0100 (GMT Daylight Time) 2012-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<style type="text/css" media="screen">
@import url("./INDEX PAGE LAYOUTNEW.css");
</style>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('INDEX%20PAGE%20LAYOUTNEW_r1_c1_f2.png','INDEX%20PAGE%20LAYOUTNEW_r1_c1.png','INDEX%20PAGE%20LAYOUTNEW_r1_c3_f2.png','INDEX%20PAGE%20LAYOUTNEW_r1_c3.png','INDEX%20PAGE%20LAYOUTNEW_r1_c5_f2.png','INDEX%20PAGE%20LAYOUTNEW_r1_c5.png','INDEX%20PAGE%20LAYOUTNEW_r1_c8_f2.png','INDEX%20PAGE%20LAYOUTNEW_r1_c8.png','INDEX%20PAGE%20LAYOUTNEW_r1_c10_f2.png','INDEX%20PAGE%20LAYOUTNEW_r1_c10.png','INDEX%20PAGE%20LAYOUTNEW_r3_c1_f2.png','INDEX%20PAGE%20LAYOUTNEW_r3_c1.png','INDEX%20PAGE%20LAYOUTNEW_r3_c10_f2.png','INDEX%20PAGE%20LAYOUTNEW_r3_c10.png','INDEX%20PAGE%20LAYOUTNEW_r3_c6_f2.png','INDEX%20PAGE%20LAYOUTNEW_r3_c6.png');">
<div id="FWTableContainer877518600">
<table border="0" cellpadding="0" cellspacing="0" width="980">
<!-- fwtable fwsrc="INDEX PAGE LAYOUTNEW1.png" fwbase="INDEX PAGE LAYOUTNEW.png" fwstyle="Dreamweaver" fwdocid = "877518600" fwnested="0" -->
<tr>
<td><img src="spacer.gif" width="76" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="103" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="43" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="67" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="32" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="46" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="203" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="7" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="118" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="205" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td><img name="INDEXPAGELAYOUTNEW_r1_c1" src="INDEX%20PAGE%20LAYOUTNEW_r1_c1.png" width="76" height="46" border="0" id="INDEXPAGELAYOUTNEW_r1_c1" usemap="#m_INDEX20PAGE20LAYOUTNEW_r1_c1" alt="" /></td>
<td rowspan="2"><img name="INDEXPAGELAYOUTNEW_r1_c2" src="INDEX%20PAGE%20LAYOUTNEW_r1_c2.png" width="40" height="52" border="0" id="INDEXPAGELAYOUTNEW_r1_c2" alt="" /></td>
<td><img name="INDEXPAGELAYOUTNEW_r1_c3" src="INDEX%20PAGE%20LAYOUTNEW_r1_c3.png" width="103" height="46" border="0" id="INDEXPAGELAYOUTNEW_r1_c3" usemap="#m_INDEX20PAGE20LAYOUTNEW_r1_c3" alt="" /></td>
<td rowspan="2"><img name="INDEXPAGELAYOUTNEW_r1_c4" src="INDEX%20PAGE%20LAYOUTNEW_r1_c4.png" width="43" height="52" border="0" id="INDEXPAGELAYOUTNEW_r1_c4" alt="" /></td>
<td colspan="2"><img name="INDEXPAGELAYOUTNEW_r1_c5" src="INDEX%20PAGE%20LAYOUTNEW_r1_c5.png" width="99" height="46" border="0" id="INDEXPAGELAYOUTNEW_r1_c5" usemap="#m_INDEX20PAGE20LAYOUTNEW_r1_c5" alt="" /></td>
<td rowspan="2"><img name="INDEXPAGELAYOUTNEW_r1_c7" src="INDEX%20PAGE%20LAYOUTNEW_r1_c7.png" width="46" height="52" border="0" id="INDEXPAGELAYOUTNEW_r1_c7" alt="" /></td>
<td><img name="INDEXPAGELAYOUTNEW_r1_c8" src="INDEX%20PAGE%20LAYOUTNEW_r1_c8.png" width="203" height="46" border="0" id="INDEXPAGELAYOUTNEW_r1_c8" usemap="#m_INDEX20PAGE20LAYOUTNEW_r1_c8" alt="" /></td>
<td rowspan="2"><img name="INDEXPAGELAYOUTNEW_r1_c9" src="INDEX%20PAGE%20LAYOUTNEW_r1_c9.png" width="40" height="52" border="0" id="INDEXPAGELAYOUTNEW_r1_c9" alt="" /></td>
<td colspan="2"><img name="INDEXPAGELAYOUTNEW_r1_c10" src="INDEX%20PAGE%20LAYOUTNEW_r1_c10.png" width="125" height="46" border="0" id="INDEXPAGELAYOUTNEW_r1_c10" usemap="#m_INDEX20PAGE20LAYOUTNEW_r1_c10" alt="" /></td>
<td rowspan="2"><img name="INDEXPAGELAYOUTNEW_r1_c12" src="INDEX%20PAGE%20LAYOUTNEW_r1_c12.png" width="205" height="52" border="0" id="INDEXPAGELAYOUTNEW_r1_c12" alt="" /></td>
<td><img src="spacer.gif" width="1" height="46" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="INDEXPAGELAYOUTNEW_r2_c1" src="INDEX%20PAGE%20LAYOUTNEW_r2_c1.png" width="76" height="6" border="0" id="INDEXPAGELAYOUTNEW_r2_c1" alt="" /></td>
<td><img name="INDEXPAGELAYOUTNEW_r2_c3" src="INDEX%20PAGE%20LAYOUTNEW_r2_c3.png" width="103" height="6" border="0" id="INDEXPAGELAYOUTNEW_r2_c3" alt="" /></td>
<td colspan="2"><img name="INDEXPAGELAYOUTNEW_r2_c5" src="INDEX%20PAGE%20LAYOUTNEW_r2_c5.png" width="99" height="6" border="0" id="INDEXPAGELAYOUTNEW_r2_c5" alt="" /></td>
<td><img name="INDEXPAGELAYOUTNEW_r2_c8" src="INDEX%20PAGE%20LAYOUTNEW_r2_c8.png" width="203" height="6" border="0" id="INDEXPAGELAYOUTNEW_r2_c8" alt="" /></td>
<td colspan="2"><img name="INDEXPAGELAYOUTNEW_r2_c10" src="INDEX%20PAGE%20LAYOUTNEW_r2_c10.png" width="125" height="6" border="0" id="INDEXPAGELAYOUTNEW_r2_c10" alt="" /></td>
<td><img src="spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="5"><img name="INDEXPAGELAYOUTNEW_r3_c1" src="INDEX%20PAGE%20LAYOUTNEW_r3_c1.png" width="329" height="314" border="0" id="INDEXPAGELAYOUTNEW_r3_c1" usemap="#m_INDEX20PAGE20LAYOUTNEW_r3_c1" alt="" /></td>
<td rowspan="2" colspan="4"><img name="INDEXPAGELAYOUTNEW_r3_c6" src="INDEX%20PAGE%20LAYOUTNEW_r3_c6.png" width="321" height="314" border="0" id="INDEXPAGELAYOUTNEW_r3_c6" usemap="#m_INDEX20PAGE20LAYOUTNEW_r3_c6" alt="" /></td>
<td rowspan="2" colspan="3"><img name="INDEXPAGELAYOUTNEW_r3_c10" src="INDEX%20PAGE%20LAYOUTNEW_r3_c10.png" width="330" height="314" border="0" id="INDEXPAGELAYOUTNEW_r3_c10" usemap="#m_INDEX20PAGE20LAYOUTNEW_r3_c10" alt="" /></td>
<td><img src="spacer.gif" width="1" height="28" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="286" border="0" alt="" /></td>
</tr>
</table>
<map name="m_INDEX20PAGE20LAYOUTNEW_r1_c1" id="m_INDEX20PAGE20LAYOUTNEW_r1_c1">
<area shape="rect" coords="0,0,76,46" href="javascript:;" alt="" onmouseout="MM_swapImage('INDEXPAGELAYOUTNEW_r1_c1','','INDEX%20PAGE%20LAYOUTNEW_r1_c1.png',1);" onmouseover="MM_swapImage('INDEXPAGELAYOUTNEW_r1_c1','','INDEX%20PAGE%20LAYOUTNEW_r1_c1_f2.png',1);" />
</map>
<map name="m_INDEX20PAGE20LAYOUTNEW_r1_c3" id="m_INDEX20PAGE20LAYOUTNEW_r1_c3">
<area shape="rect" coords="0,0,103,46" href="javascript:;" alt="" onmouseout="MM_swapImage('INDEXPAGELAYOUTNEW_r1_c3','','INDEX%20PAGE%20LAYOUTNEW_r1_c3.png',1);MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0501185134_0', 'MMMenu0501185134_0',0,46,'INDEXPAGELAYOUTNEW_r1_c3');MM_swapImage('INDEXPAGELAYOUTNEW_r1_c3','','INDEX%20PAGE%20LAYOUTNEW_r1_c3_f2.png',1);" />
</map>
<map name="m_INDEX20PAGE20LAYOUTNEW_r1_c5" id="m_INDEX20PAGE20LAYOUTNEW_r1_c5">
<area shape="rect" coords="0,0,99,46" href="javascript:;" alt="" onmouseout="MM_swapImage('INDEXPAGELAYOUTNEW_r1_c5','','INDEX%20PAGE%20LAYOUTNEW_r1_c5.png',1);MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0501201050_1', 'MMMenu0501201050_1',0,46,'INDEXPAGELAYOUTNEW_r1_c5');MM_swapImage('INDEXPAGELAYOUTNEW_r1_c5','','INDEX%20PAGE%20LAYOUTNEW_r1_c5_f2.png',1);" />
</map>
<map name="m_INDEX20PAGE20LAYOUTNEW_r1_c8" id="m_INDEX20PAGE20LAYOUTNEW_r1_c8">
<area shape="rect" coords="0,0,203,46" href="javascript:;" alt="" onmouseout="MM_swapImage('INDEXPAGELAYOUTNEW_r1_c8','','INDEX%20PAGE%20LAYOUTNEW_r1_c8.png',1);MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0501202804_2', 'MMMenu0501202804_2',0,46,'INDEXPAGELAYOUTNEW_r1_c8');MM_swapImage('INDEXPAGELAYOUTNEW_r1_c8','','INDEX%20PAGE%20LAYOUTNEW_r1_c8_f2.png',1);" />
</map>
<map name="m_INDEX20PAGE20LAYOUTNEW_r1_c10" id="m_INDEX20PAGE20LAYOUTNEW_r1_c10">
<area shape="rect" coords="0,0,125,46" href="javascript:;" alt="" onmouseout="MM_swapImage('INDEXPAGELAYOUTNEW_r1_c10','','INDEX%20PAGE%20LAYOUTNEW_r1_c10.png',1);MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0501203029_3', 'MMMenu0501203029_3',0,46,'INDEXPAGELAYOUTNEW_r1_c10');MM_swapImage('INDEXPAGELAYOUTNEW_r1_c10','','INDEX%20PAGE%20LAYOUTNEW_r1_c10_f2.png',1);" />
</map>
<map name="m_INDEX20PAGE20LAYOUTNEW_r3_c1" id="m_INDEX20PAGE20LAYOUTNEW_r3_c1">
<area shape="rect" coords="0,0,329,314" href="javascript:;" alt="" onmouseout="MM_swapImage('INDEXPAGELAYOUTNEW_r3_c1','','INDEX%20PAGE%20LAYOUTNEW_r3_c1.png',1);" onmouseover="MM_swapImage('INDEXPAGELAYOUTNEW_r3_c1','','INDEX%20PAGE%20LAYOUTNEW_r3_c1_f2.png',1);" />
</map>
<map name="m_INDEX20PAGE20LAYOUTNEW_r3_c6" id="m_INDEX20PAGE20LAYOUTNEW_r3_c6">
<area shape="rect" coords="313,0,651,314" href="javascript:;" alt="" onmouseout="MM_swapImage('INDEXPAGELAYOUTNEW_r3_c10','','INDEX%20PAGE%20LAYOUTNEW_r3_c10.png',1);" onmouseover="MM_swapImage('INDEXPAGELAYOUTNEW_r3_c10','','INDEX%20PAGE%20LAYOUTNEW_r3_c10_f2.png',1);" />
<area shape="rect" coords="0,0,314,314" href="javascript:;" alt="" onmouseout="MM_swapImage('INDEXPAGELAYOUTNEW_r3_c6','','INDEX%20PAGE%20LAYOUTNEW_r3_c6.png',1);" onmouseover="MM_swapImage('INDEXPAGELAYOUTNEW_r3_c6','','INDEX%20PAGE%20LAYOUTNEW_r3_c6_f2.png',1);" />
</map>
<map name="m_INDEX20PAGE20LAYOUTNEW_r3_c10" id="m_INDEX20PAGE20LAYOUTNEW_r3_c10">
<area shape="rect" coords="-8,0,330,314" href="javascript:;" alt="" onmouseout="MM_swapImage('INDEXPAGELAYOUTNEW_r3_c10','','INDEX%20PAGE%20LAYOUTNEW_r3_c10.png',1);" onmouseover="MM_swapImage('INDEXPAGELAYOUTNEW_r3_c10','','INDEX%20PAGE%20LAYOUTNEW_r3_c10_f2.png',1);" />
</map>
<div id="MMMenuContainer0501185134_0">
<div id="MMMenu0501185134_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
<a href="payroll paye.html" id="MMMenu0501185134_0_Item_0" class="MMMIFVStyleMMMenu0501185134_0" onmouseover="MM_menuOverMenuItem('MMMenu0501185134_0');">
Payroll,&nbsp;PAYE
</a>
<a href="self assessment.html" id="MMMenu0501185134_0_Item_1" class="MMMIVStyleMMMenu0501185134_0" onmouseover="MM_menuOverMenuItem('MMMenu0501185134_0');">
Self&nbsp;Assessment
</a>
<a href="cis.html" id="MMMenu0501185134_0_Item_2" class="MMMIVStyleMMMenu0501185134_0" onmouseover="MM_menuOverMenuItem('MMMenu0501185134_0');">
C.I.S
</a>
<a href="book-keeping.html" id="MMMenu0501185134_0_Item_3" class="MMMIVStyleMMMenu0501185134_0" onmouseover="MM_menuOverMenuItem('MMMenu0501185134_0');">
Book-keeping
</a>
<a href="human resources.html" id="MMMenu0501185134_0_Item_4" class="MMMIVStyleMMMenu0501185134_0" onmouseover="MM_menuOverMenuItem('MMMenu0501185134_0');">
Human&nbsp;Resources
</a>
<a href="preparation of company handbooks.html" id="MMMenu0501185134_0_Item_5" class="MMMIVStyleMMMenu0501185134_0" onmouseover="MM_menuOverMenuItem('MMMenu0501185134_0');">
Preparation&nbsp;of&nbsp;Company&nbsp;Handbooks
</a>
<a href="holiday & sickness cover.html" id="MMMenu0501185134_0_Item_6" class="MMMIVStyleMMMenu0501185134_0" onmouseover="MM_menuOverMenuItem('MMMenu0501185134_0');">
Holiday&nbsp;&amp;&nbsp;Sickness&nbsp;Cover
</a>
</div>
</div>
<div id="MMMenuContainer0501201050_1">
<div id="MMMenu0501201050_1" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
<a href="how we can help your business.html" id="MMMenu0501201050_1_Item_0" class="MMMIFVStyleMMMenu0501201050_1" onmouseover="MM_menuOverMenuItem('MMMenu0501201050_1');">
How&nbsp;we&nbsp;can&nbsp;help&nbsp;your&nbsp;business
</a>
</div>
</div>
<div id="MMMenuContainer0501202804_2">
<div id="MMMenu0501202804_2" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
<a href="read our customers testimonials.html" id="MMMenu0501202804_2_Item_0" class="MMMIFVStyleMMMenu0501202804_2" onmouseover="MM_menuOverMenuItem('MMMenu0501202804_2');">
Read&nbsp;our&nbsp;customer&nbsp;testimonials&nbsp;
</a>
</div>
</div>
<div id="MMMenuContainer0501203029_3">
<div id="MMMenu0501203029_3" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
<a href="enquiries.html" id="MMMenu0501203029_3_Item_0" class="MMMIFVStyleMMMenu0501203029_3" onmouseover="MM_menuOverMenuItem('MMMenu0501203029_3');">
Enquiries
</a>
</div>
</div>
</div>
</body>
</html>

-----------------------------------------
This is code from The Raptor very nice and cleaner codes

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src='/js/lib/mootools-core-1.4.5-nocompat.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>
#header
{
background: #002FFF url() no-repeat;
width: 100%;
max-width: 1000px;
margin: auto;
padding: 80px 0 80px;
text-align: center;
color: #fff;
}

#main
{
width: 100%;
max-width: 950px;
margin: auto;
box-shadow: 0 0 8px #000;
}

#navigation
{
background: #ccc;
text-align: center;
margin-top: -18px;
}

#navigation li
{
display: inline;
padding: 0 20px;
}

.content
{
padding: 20px;
}

#footer
{
width: 100%;
max-width: 1000px;
margin: auto;
background: #002FFF url() no-repeat;
text-align: center;
color: #fff;
padding: 30px 0 30px;
}
</style>



<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {

});//]]>

</script>


</head>
<body>


<div id="header">
<h1>Header Image</h1>
</div><!-- #header -->

<div id="main">
<ul id="navigation">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul><!-- #navigation -->

<div class="content">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div><!-- .content -->

</div><!-- #main -->

<div id="footer">
<p>Footer Text</p>
</div>
<!-- #footer -->



</body>


</html>

--------------------------------

Somewhere near the id Navigation links I would like to replace with my navigation bar.

[TheRaptor]

Missed your post, sorry. Taking one look at the code you posted I have to say, thats not viable for the web. Dont use it!

Creating a pure CSS drop-down menu is really quite simple. I'll walk you through it.

First you start with the markup. Basics first, we have a <ul> and a bunch of <li>'s to make up the menu as it sits. Now to build a dropdown on top of what we already have, all we need to do is create another unordered list inside one of the <li>'s (whichever one you would like the drop to appear in). This will create the second level. Here is the code so far:

<ul id="navigation">
        <li>
            <a href="#">Link 1</a>
            <!-- below this comment is the <ul> that creates the second level -->
            <ul>
                <li><a href="#">Drop Link 1</a></li>
                <li><a href="#">Drop Link 2</a></li>
                <li><a href="#">Drop Link 3</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
</ul><!-- #navigation -->

If you preview this without adding any CSS, it'll look pretty ugly. So we need to add some CSS to pretty it up. By default we want the second level to be hidden and then when someone hovers over the first level ("Link 1"), the dropdown pops up. So the CSS for that would look something like this:

/* target second level */
#navigation li ul
{
    position: absolute; /* added to allow the second level float below */
    left:-9999px; /* hide by default (push it off the screen) */
}
 
/* target second level on-hover */
#navigation li:hover ul
{
    left: 0; /* push the second level back when needed */
}

I did include some comments in the CSS so read those and you should understand what the code is doing. It is not perfect and you'll probably want to build off it and expand to reach your needs but it should give you a good starting point. You only learn by doing, so experiment with the code. Add a few rules at a time and watch what they do. Thats how I learned.

[Shyflower]

Gonna butt-in here and hope I don't make an a$$ of myself , but @Helen ; , the code you posted is a prime example of all the garbage WYSIWYGs infuse into html. This extra junk slows down your page load, makes it most difficult to parse cross browser and generally renders as the poor code it is. You would be much better off to start with a simple css template, such as TheRaptor originally posted and slowly learn how to do it right.

Additionally, it's a real PITA to change tables into compatible css styling. I know that because I had to do it when I made the transition years ago.

If you put your mind to it, within a week you can learn some css basics. In addition to the Sites mentioned before, SitePoint has a great, free css reference and one for HTML as well.

Overall, I think you will spend less time and have less aggravation if you take the time to learn how to do it right the first time.

[helen6391]

Missed your post, sorry. Taking one look at the code you posted I have to say, thats not viable for the web. Dont use it!

Creating a pure CSS drop-down menu is really quite simple. I'll walk you through it.

First you start with the markup. Basics first, we have a <ul> and a bunch of <li>'s to make up the menu as it sits. Now to build a dropdown on top of what we already have, all we need to do is create another unordered list inside one of the <li>'s (whichever one you would like the drop to appear in). This will create the second level. Here is the code so far:

<ul id="navigation">
        <li>
            <a href="#">Link 1</a>
            <!-- below this comment is the <ul> that creates the second level -->
            <ul>
                <li><a href="#">Drop Link 1</a></li>
                <li><a href="#">Drop Link 2</a></li>
                <li><a href="#">Drop Link 3</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
</ul><!-- #navigation -->

If you preview this without adding any CSS, it'll look pretty ugly. So we need to add some CSS to pretty it up. By default we want the second level to be hidden and then when someone hovers over the first level ("Link 1"), the dropdown pops up. So the CSS for that would look something like this:

/* target second level */
#navigation li ul
{
    position: absolute; /* added to allow the second level float below */
    left:-9999px; /* hide by default (push it off the screen) */
}
 
/* target second level on-hover */
#navigation li:hover ul
{
    left: 0; /* push the second level back when needed */
}

I did include some comments in the CSS so read those and you should understand what the code is doing. It is not perfect and you'll probably want to build off it and expand to reach your needs but it should give you a good starting point. You only learn by doing, so experiment with the code. Add a few rules at a time and watch what they do. Thats how I learned.

Thank you for your time and patience appreciate it. For some reason the first codes go gave me no longer work the colour has gone from the upper nav bar it's no longer blue not your fault most ly mine. I will keep away from it for couple days then get back to it.

Helen

[TheRaptor]

If you mess up the code playing with it, you can always come back here and get the working version again.

[helen6391]

If you mess up the code playing with it, you can always come back here and get the working version again.

Why is it your code work ok when I view the demo from here but when I paste it into my dreamweaver it's not the same. Could you please tell me where I should paste the code to the Head, Body or HTML part I've got a feeling that's where I am going wrong. (((

One thing i've been learning is box shadow I've managed to get what I want with this code.

------------------------

<!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>
<style type-"text/css">
#shadow
{
width:980px;
height:760px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div id="shadow"><p>Shadowed Box<p></div>
</body>
</html>

---------------------------------------------------

Not brilliant but I thought I share should someone else need the box shadow thingy.

Thanks


helen

[TechnoBear]

Basically, everything that is page content goes in the <body> section. The only things that go in the <head> are meta data, links to stylesheets or other resources - the kind of stuff that your page needs to run but which isn't for display.

Your basic page structure should be

<html>
<head></head>
<body></body>
</html>

Does that help?