SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems w/ positioning menu...

    I got my nav menu all set up and positioned how i like it. But when i made the browser wider the whole menu moved w/ it. How can i keep the menu to stay over the body content?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It would be best to pos a live link or the code of a working example. Otherwise this question is impossible to answer usefully, as each site is different.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have a live link, but here is my style sheet. I just started so not everything is how it should be yet. I'm just focused on getting the menu issue fixed. -Thanks

    Code CSS:
    body {
      background: url(images/linebg.png);
    }
     
    #bodycontent {
      margin: auto;
      width: 949px;
      position: relative;
      top: 100px;
      background: #fff;
      border-radius: 7px;
      box-shadow: 0px 3px 5px #999;
    }
     
    p {
      color: #000;
      font-family: Big Caslon, Times, Georgia;
    }
     
    h2 {
      font-family: Big Caslon, Times, Georgia;
      padding: 20px 20px 0px 20px;
    }
     
    h3 {
      color: #245b7d;
    }
     
    h4 {
      color: #154D43;
    }
     
     
     
     
     
    ///////* MENU */
     
     
     
     
     
     
    #navmenu {
        margin: auto;
    }
     
    #navmenu ul {
        background: url(images/nav1.png) no-repeat;
        float: right;
        width: 949px;
        position: relative;
    }
     
    #navmenu li {
        float: left;
        list-style-type: none;
        padding: 0px px 0px px;
    }
     
    #navmenu li a {
        color: #fff;
        text-shadow: #000 -1px 0px;
        display: block;
        padding: 10px 4px 10px 4px;
        position: relative;
        text-decoration: none;
        font-size: 18px;
        position: relative;
        right: 30px;
        border-right: 1px solid #245b7d;
        height: 20px;
    }
     
    #navmenu li a:hover {
    	background: url(images/nav2.png) no-repeat;
    	text-decoration: underline;
    }
     
    #navmenu li a:active {
      background: url(images/nav3.png) no-repeat;
    }
     
     
     
     
     
    //////* ADJUSTMENTS */
     
     
     
     
    .logo {
      position: absolute;
      right: 300px;
      top: 300px;
      border: 2px solid #fff;
    }
     
    #tagline {
      position: absolute;
      right: 170px;
      top: 50px;
      font-family: Papyrus;
      font-size: 21px;
      font-weight: bold;
    }
     
    #widget {
      position: absolute:
      right: 700px;
      width: 200px;
      padding: 0px 10px 0px 10px;
      border: 2px solid #C4C4C4;
      border-radius: 4px;
      margin: -300px 707px;
      background: #F7F7F7 url(images/wh.png);
    }
     
    #main {
      padding: 2px 0px 0px 20px;
      width: 650px;
      order: 1px solid red;
    }
     
     
     
     
     
     
     
    /////////* FOOTER */
     
     
     
     
     
    #footer {
     
    }
    Last edited by TechnoBear; Apr 13, 2012 at 07:10. Reason: Code tags added

  4. #4
    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)
    We need HTML as well to go with it . Aka HTML/CSS you post should be able to give us a replicated version of what you are seeing (so make sure that when you post your HTML, the CSS you post along with it can trigger the wrong behavior).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure i understand. But here are both the HTML & CSS i have so far.

    CSS
    Code CSS:
    /*
    CSS for begreenplumbing.com
    */
     
     
     
    body {
      background: url(images/linebg.png);
    }
     
    #bodycontent {
      margin: auto;
      width: 949px;
      position: relative;
      top: 100px;
      background: #fff;
      border-radius: 7px;
      box-shadow: 0px 3px 5px #999;
    }
     
    p {
      color: #000;
      font-family: Big Caslon, Times, Georgia;
    }
     
    h2 {
      font-family: Big Caslon, Times, Georgia;
      padding: 20px 20px 0px 20px;
    }
     
    h3 {
      color: #245b7d;
    }
     
    h4 {
      color: #154D43;
    }
     
     
     
     
     
    ///////* MENU */
     
     
     
     
     
     
    #navmenu {
        margin: auto;
    }
     
    #navmenu ul {
        background: url(images/nav1.png) no-repeat;
        float: right;
        width: 949px;
        position: relative;
    }
     
    #navmenu li {
        float: left;
        list-style-type: none;
        padding: 0px px 0px px;
    }
     
    #navmenu li a {
        color: #fff;
        text-shadow: #000 -1px 0px;
        display: block;
        padding: 10px 4px 10px 4px;
        position: relative;
        text-decoration: none;
        font-size: 18px;
        position: relative;
        right: 30px;
        border-right: 1px solid #245b7d;
        height: 20px;
    }
     
    #navmenu li a:hover {
    	background: url(images/nav2.png) no-repeat;
    	text-decoration: underline;
    }
     
    #navmenu li a:active {
      background: url(images/nav3.png) no-repeat;
    }
     
     
     
     
     
    //////* ADJUSTMENTS */
     
     
     
     
    .logo {
      position: absolute;
      right: 300px;
      top: 300px;
      border: 2px solid #fff;
    }
     
    #tagline {
      position: absolute;
      right: 170px;
      top: 50px;
      font-family: Papyrus;
      font-size: 21px;
      font-weight: bold;
    }
     
    #widget {
      position: absolute:
      right: 700px;
      width: 200px;
      padding: 0px 10px 0px 10px;
      border: 2px solid #C4C4C4;
      border-radius: 4px;
      margin: -300px 707px;
      background: #F7F7F7 url(images/wh.png);
    }
     
    #main {
      padding: 2px 0px 0px 20px;
      width: 650px;
      order: 1px solid red;
    }
     
     
     
     
     
     
     
    /////////* FOOTER */
     
     
     
     
     
    #footer {
     
    }


    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "html://www.w3.org/TR/xhtm1/DTD/xhtml-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>   - GreenPlumbing</title>
        <meta http-equiv="Content-Type"
             content="text/html; charset=utf-8"/>
        <link href="gpstyle.css" rel="stylesheet" type="text/css"/>
      </head>
      <body>
       <div id="header">
    <img src="images/gplogo.png" class="logo"
      width="540" height="80"
         alt="BeGreenPlumbing logo"/>         
         <div id="tagline">
      A good name is rather to be chosen<br/>than great riches. - Proverbs 22:1
         </div> <!-- end of tagline div -->
      </div> <!-- end of header div -->
    <div id="navmenu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="testimonies.html">Testimonies</a></li>
        <li><a href="helpfulinfo.html">Helpful Info</a></li>
    </div> <!-- end of navmenu div --> 
    <div id="bodycontent">
        <h2>Home</h2>
    <div id="main">
       <p><h4>Plumbing Services You Can Count On Every Time!</h4></p>
    
    
        <p>We are a small business that strives to give superb service. We have flat rates on many of our services. We have plumbers with many years in the business. Our rates are very competitive with our competition.</p>
        <p>Whether you have a clogged drain, need a hot water heater or a complete remodeling project, Green Plumbing has got it covered.</p>
        <p>Fair Pricing-Quality Work-Beautiful Results</p>
        <p> We hope that with that first call you will never call another plumber again.</p>
    </div> <!-- end of main div -->
    <div id="widget">
       <p><h3>What You Can Expect From Green Plumbing</h3></p>
    <p><h4>100% SATISFACTION GUARANTEE</h4></p>
    <p>You'll never be disappointed with our Service.</p>
    <p>We guarantee you'll be pleased, no matter what it takes.</p>
     <p><h4>Prices Quoted In Advance</h4></p>
    <p>We'll give you the price, guarantee the price, and guarantee the work.</p>
    <p>That way there are no surprises. Thatís the way we do business.</p>
     <p><h4>PROFESSIONAL SERVICE</h4></p>
    You deserve the comfort and peace of mind that comes with having a professionally maintained system. We use only the finest quality products and the most skilled technicians. When you call Green Plumbing, you can be confident that you will have the most professional people in the plumbing service industry today.</p>
    </div> <!-- end of widget div -->
        </div> <!-- end of bodycontent div -->
    <div id="footer">
    
    <!-- end of "footer" div --> 
      </body>
    </html>
    Last edited by TechnoBear; Apr 13, 2012 at 07:11.

  6. #6
    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)
    Just do this . Place a <div id="wrapper"> around the entire page, MINUS the header. So everything after the header should be wrapped in the wrapper element.

    Then give that the margin:0 auto; and width:949px. It'll center the whole page and have the menu go with the contrent upon page resize . Oh, and also give the #nav ul{} float:left instead of float:right.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks man, that did it.

  8. #8
    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)
    Glad to hear so . You're welcome.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •