SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    creating website working with tables

    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.
    Attached Images Attached Images
    Colorize Old Black and White Photos Photo Restorations

  2. #2
    SitePoint Member
    Join Date
    Apr 2012
    Location
    www.kl-webmedia.com
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Quote Originally Posted by webcosmo View Post
    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
    Colorize Old Black and White Photos Photo Restorations

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    .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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone you guys are great appreciate it. I shall head to the w3school css place and get learning.
    Colorize Old Black and White Photos Photo Restorations

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by helen6391 View Post
    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/.

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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.
    Colorize Old Black and White Photos Photo Restorations

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by helen6391 View Post
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    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:
    HTML Code:
    <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:
    Code 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/.
    TheRaptor - Joe

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    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:
    HTML Code:
    <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:
    Code 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
    Colorize Old Black and White Photos Photo Restorations

  12. #12
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Its all in this line:
    Code css:
    #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:
    Code css:
    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.
    Last edited by TheRaptor; May 4, 2012 at 08:21. Reason: fixed typo
    TheRaptor - Joe

  13. #13
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    Its all in this line:
    Code css:
    #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:
    Code css:
    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.
    Colorize Old Black and White Photos Photo Restorations

  14. #14
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    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:
    HTML Code:
    <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:
    Code 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
    Colorize Old Black and White Photos Photo Restorations

  15. #15
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Have you tried to do this yourself? If so, what was the problem you encountered?

    What's the code for your navigation bar?

  16. #16
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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
    Colorize Old Black and White Photos Photo Restorations

  17. #17
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by helen6391 View Post
    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.

  18. #18
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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.
    Colorize Old Black and White Photos Photo Restorations

  19. #19
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code HTML4Strict:
    <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:

    Code CSS:
    /* 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.
    TheRaptor - Joe

  20. #20
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    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.
    Last edited by Shyflower; May 8, 2012 at 09:38.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  21. #21
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    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:

    Code HTML4Strict:
    <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:

    Code CSS:
    /* 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
    Colorize Old Black and White Photos Photo Restorations

  22. #22
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    If you mess up the code playing with it, you can always come back here and get the working version again.
    TheRaptor - Joe

  23. #23
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    London
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    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
    Colorize Old Black and White Photos Photo Restorations

  24. #24
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    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
    Code:
    <html>
    <head></head>
    <body></body>
    </html>
    Does that help?
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •