CSS absolute position error

Discussion in 'CSS' started by texanweb, Nov 20, 2011.

  1. #1
    I am implementing a jquery sticky menu on my website. However, the problem is that the menu itself was going underneath the content. After looking at the CSS, I notice if I took out the position:absolute; that the sticky menu would start working. However, it screws up my entire design.

    So, what should I do?


    CSS
    
    
    menu, nav, video {margin: 0; padding-top:240px;border: 0; font-size: 100%; font: inherit;vertical-align: baseline;}
    #main-nav-holder {height:30px;}
    #main-nav ul {width:500px;margin-left:-20px;height:30px;line-height:30px;text-align:center;font-size:14px;background:#333;color:#ddd;}
    #main-nav li {display:inline;padding:0 15px;border-left:1px solid #555;}
    #main-nav li:first-child {border-left:0;}
    
    #wrapper { width:1139px; margin:0 auto}
    #content { width:1139px; float:left; padding:24px 0 40px 0; position:relative;}
    #content .boxtop { width:1027px; height:309px; float:left; background:url(../images/bg_contentbox_top.png) no-repeat; padding:0 56px; position:relative;}
    #content .boxmiddle { width:1027px; float:left; background:url(../images/bg_contentbox_middle.png) repeat-y; padding:0 56px; position:relative;}
    #content .boxbottom { width:1027px; height:328px; float:left; background:url(../images/bg_contentbox_bottom.png) no-repeat; text-align:center; padding:132px 56px 0 56px; position:relative;}
    #content .bull { float:left; position:absolute; top:104px; left:43px;}
    #content .horse { float:left; position:absolute; top:142px; right:56px;}
    #content .contentbox { margin-bottom:-120px; position:relative; z-index:150;}
    #content .boxtop p { font-size:48px; text-align:center; padding-top:112px;}
    #content p { text-align:justify; padding:12px 0 28px 0;}
    #content .longhorn { float:right; padding:15px 0 0 15px;} 
    
    Code (markup):


    HTML
     <nav id="main-nav">
              <div style="margin-left:100px;">
              <div id="Panel1" class="stickypanel" style="height:50px; width:400px; background-color:Red; position: static;">Stick Panel 1</div>
            </div>
          </nav>
        </header>
      </section>
      <!-- header -->
      <section id="wrapper">
        <section id="content">
          <div class="boxtop">
            <figure class="bull"><img src="images/bull.png" alt="CowBoy Bull"></figure>
            <p>Welcome to <br>
              Texas Webmaster</p>
            <figure class="horse"><img src="images/horse.png" alt="CowBoy Horse"></figure>
          </div>
          <!-- box top -->
          <div class="boxmiddle">
            <div class="contentbox">
              <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack! " my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy! ", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just flocked up to quiz and vex him. Adjusting quiver and bow, Zompyc[1] killed the fox. My faxed joke won a pager in the cable TV quiz show. Amazingly few discotheques provide jukeboxes. My girl wove six dozen plaid jackets before she quit. Six big devils from Japan quickly forgot how to waltz. Big July earthquakes confound zany experimental vow. Foxy parsons quiz and cajole the lovably dim wiki-girl. Have a pick: twenty six letters - no forcing a jumbled quiz! Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag. A quick movement of the enemy will jeopardize six gunboats. All questions asked by five watch experts amazed the judge. Jack quietly moved up front and seized the big ball of wax. The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. </p>
    </div></div>
    Code (markup):
     
    texanweb, Nov 20, 2011 IP
  2. Feelme@alone

    Feelme@alone Active Member

    Messages:
    128
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    error in ur css code
     
    Feelme@alone, Nov 21, 2011 IP
  3. texanweb

    texanweb Active Member

    Messages:
    377
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Gee, thanks for your help. I would have never been able to figure it out.
     
    texanweb, Nov 21, 2011 IP
  4. MsNN

    MsNN Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    3
    Trophy Points:
    0
    #4
    Because this is really not enough to go on (and actual live page online for troubleshooting would help), my best response is adding a z-index of 151 or more to your sticky panel, since your content has a z-index of 150.
     
    MsNN, Nov 22, 2011 IP
  5. premium-theme

    premium-theme Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    i agree with MsNN most likley the z-index though a url would help
     
    premium-theme, Nov 23, 2011 IP
  6. over_flow

    over_flow Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    No No i dont think so that all time people get irritation, yeah its a fact
     
    over_flow, Nov 26, 2011 IP