locked
Rookie needing help RRS feed

  • Question

  • Hi you guys I am so new at designing webs that I do not what I am doing (LOL). I am creating a master page with Expression Web 3.  I inserted a div that is going to be at the center of the page with an image as background; that works. I also created the codes and styles for my menu; the menu works well. My problem is that I cannot position the menu where I want inside the div on the background; it is always at the top. How can move the menu list around so I can position it at a certain spot. I am attaching my code so you can see what I have done.:

    <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <style type="text/css">
    div {
     margin-right: auto;
     margin-left: auto;
     width: 840px;
     height: 700px;
     margin-top: 60px;
     background-image: url('Images/Background.jpg');
     border-bottom-style: solid;
     border-bottom-width: 2px;
     border-bottom-color: #efeab9;
    }
    p {
     color: #FFFFFF;
     text-align: center;
    }
    #newstyle {
     width: 500px;
     height: 60px;
    }

    #dropDownMenu {
     font-family: Arial;
     margin-top: 10px;
    }
    #dropDownMenu ul {
     padding: 0px;
     margin: 0px;
    }
    #dropDownMenu ul li {
     display: inline;
     width: 100px;
     float: left;
     height: 25px;
     font-size: 0.8em;
    }
    #dropDownMenu ul li a {
     color: #000000;
     text-decoration: none;
     line-height: 25px;
     display: block;
     padding-left: 8px;
    }
    #dropDownMenu ul li a:hover {
     color: #000000;
     background-color: #ebeadf;
    }
    #dropDownMenu ul li ul {
     visibility: hidden;
    }
    #dropDownMenu ul li:hover ul {
     visibility: visible;
    }
    #dropDownMenu ul li ul li a {
     color: #ffffff;
     background-color: #3399ff;
    }
    #dropDownMenu ul li ul li a:hover {
     color: #ffffff;
     background-color: #0065ca;
    }

     

    </style>


    </head>

    <body style="background-color: #000000">

    <form id="form1" runat="server">
    </form>

    <div>

     

    <div id="dropDownMenu">
    <ul>
     <li><a href="menu.html">Home</a></li>
     <li><a href="menu.html">The Artist</a>
      <ul>
      <li><a href="menu.html">Biography</a></li>
      <li><a href="menu.html">Artist Statement</a></li>
      </ul>
      </li> <!-- end The Artist Submenu -->
     <li><a href="menu.html">Gallery</a></li>
     <li><a href="menu.html">Exhibitions</a>
      <ul>
      <li><a href="menu.html">Shows</a></li>
      <li><a href="menu.html">Awards</a></li>
      </ul>
      </li> <!-- end Exhibitions Submenu -->
     <li><a href="menu.html">Contact</a></li>
    </ul>
    </div>
     <!-- end dropDownMenu -->


    </div>

    <p>Sculpture by Alfredo Alamo ©2009 All Rights Reserved. Use, duplication or reproduction prohibited without permission</p>

    </body>

    </html>

    Tuesday, November 24, 2009 3:08 AM

Answers

  • First, you have a form with runat=server on this page, yet it is a html page, not an asp.net page.
    I suspect you were messing about with a .master page when you probably wanted a DWT.  Regardless, the page isn't attached to either.  Delete the <form>...</form> lines.


    You have the banner defined as a background image for div.  That means for ALL divs.  You didn't mean that.  Define a new id (I'll call it "main") and assign it to the containing div for the page.  Apply the styling to #main, not to div.  That will put the page background, centering, and so on, only on that div, not all of them.

    So: change the div style to be the #main style:

    <style type="text/css">
    #main {
     margin-right: auto;
     margin-left: auto;
     width: 840px;
     height: 700px;
     margin-top: 60px;
     background-image: url('Images/Background.jpg');
     border-bottom-style: solid;
     border-bottom-width: 2px;
     border-bottom-color: #efeab9;
    }


    and assign the main id to your page div:


    <body style="background-color: #000000">
    <div id="main">
    <div id="dropDownMenu">




    Now, as to the menu:
    You have done nothing that would have the dropDownMenu div, including its menu, start anywhere other than at the top of the containing div (at the top of the background image).  Add some top padding to the dropdown div to move it down as far as you want, such as:


    #dropDownMenu {
     font-family: Arial;
     padding-top: 100px;
    }

    Tuesday, November 24, 2009 9:52 PM

All replies

  • We don't have access to your images and the only way to really help you would be to load your page in our editor while if the page is online we can use other tools to provide an answer easier. Why not upload somewhere and provide a link even if it is just a temporary one.
    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    Tuesday, November 24, 2009 3:32 PM
  • Cheryl,
     Thank you so much for your answer, how can I upload the page in the editor.

    Alfredo
    Tuesday, November 24, 2009 6:53 PM
  • She means Publish the page.  If you are creating a website, you need a host somewhere.  Go ahead and publish your page(s), even if only temporarily, when asking for help.
    Tuesday, November 24, 2009 7:11 PM
  • Got it!!! I am sorry. OK I published it www.alfredoalamo.com . If you look at it you will see the menu at the top of the banner/header Obviously I want it to be at the bottom (below the title: alfredo alamo sculptor) and to the right but still in the banner area. Thank you so much for your help

    Alfredo Alamo
    Tuesday, November 24, 2009 7:43 PM
  • First, you have a form with runat=server on this page, yet it is a html page, not an asp.net page.
    I suspect you were messing about with a .master page when you probably wanted a DWT.  Regardless, the page isn't attached to either.  Delete the <form>...</form> lines.


    You have the banner defined as a background image for div.  That means for ALL divs.  You didn't mean that.  Define a new id (I'll call it "main") and assign it to the containing div for the page.  Apply the styling to #main, not to div.  That will put the page background, centering, and so on, only on that div, not all of them.

    So: change the div style to be the #main style:

    <style type="text/css">
    #main {
     margin-right: auto;
     margin-left: auto;
     width: 840px;
     height: 700px;
     margin-top: 60px;
     background-image: url('Images/Background.jpg');
     border-bottom-style: solid;
     border-bottom-width: 2px;
     border-bottom-color: #efeab9;
    }


    and assign the main id to your page div:


    <body style="background-color: #000000">
    <div id="main">
    <div id="dropDownMenu">




    Now, as to the menu:
    You have done nothing that would have the dropDownMenu div, including its menu, start anywhere other than at the top of the containing div (at the top of the background image).  Add some top padding to the dropdown div to move it down as far as you want, such as:


    #dropDownMenu {
     font-family: Arial;
     padding-top: 100px;
    }

    Tuesday, November 24, 2009 9:52 PM
  • Kathy,

    Thank you so much I see what you mean. That solved my problem and I could add the paddings and marging for the menu div and now it is where it shoul be, Thank you so much.
    Tuesday, November 24, 2009 11:53 PM
  • I'm glad to see Kathy was able to help you before I was back on the forum.


    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    Wednesday, November 25, 2009 1:15 AM
  • I'm glad to see Kathy was able to help you before I was back on the forum.


    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    I'm glad you're glad :=)

    ClarkNK, A.K.A. HomePage Doctor
    HomePageDoctor.com -- Expression Web database tutorials
    Ownertrades.com -- Created with FP, Access, Bots and Wizards
    MyNumbersTracker.com -- Created with Expression, VWDExress, SQL Express, and ASP.NET.
    Wednesday, November 25, 2009 12:55 PM