Skip navigation
Currently Being Moderated

Slideshow Under Menu Bar, Help Please

Mar 20, 2013 11:32 AM

Tags: #background #internet #jquery #html #dreamweaver #layout #cs6

Hi again,

I require some help from the awesome members of the Adobe Community again, good news is that I actually have an example to show this time to make it easier to provide an answer. I recently started up a new page for the business I work with, and there is a change to the menu bar and slide show that I have been wanted to make for the longest time, maybe even the Twitter ticker bar if anyone wishes to cover that in this same discussion.

 

First, the link:  http://restorationacpc.com/

 

The menu bar, as you can see, the red thing moving across the top of the screen with the menu tabs on it like Home, About Us, ect. ect. For some reason it doesn't travel off the page like I originally intended for it to do, it stops just short and you can see the background of the page on the left and right of the bar, that's the smaller issue I face here.

 

The bigger issue with the menu bar that I'd like to fix is that the Showcase D & B logo pushes the slide show down, and while that doesn't look necessarily bad, I would still like for the slideshow to sit under the logo with the logo shining on top of the slide show.

 

Last, a small and optional problem to hit for anyone who wishes to solve it, is there a way for me to have the Twitter Ticker bar up at the top of the site sit OVER the top of the d & b logo, and against the red menu bar? I'd like for the Twitter Ticker bar to look like it is part of the menu bar if possible.

 

 

As always, any and all help is greatly appreciated!

 
Replies
  • Currently Being Moderated
    Mar 20, 2013 5:37 PM   in reply to Hyde1216

    the Showcase D & B logo pushes the slide show down... I would like the slideshow to sit under the logo with the logo shining on top...

     

    Looks to me like the logo is a background image.  Background images are well... in the background.  So you would have to insert the logo into the foreground of a positioned container and give it a higher z-index than the slideshow.

    http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property -a-comprehensive-look/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 20, 2013 8:25 PM   in reply to Hyde1216

    For the slideshow to push up:

     

    .scmenu in your CSS file (line 102):

     

    Add:

     

    position: relative;

    I see you already have z-index. But z-index will not work without a position reference.

     

    .displaywrap (line 53 of your CSS):

     

    Add:

    position: relative;

    top: -56px;

    z-index: 1;

     

    That should push the slideshow up for you under the logo.

     

    Your page margins are not reset to 0 - which is why you're seeing left and right blank space.

     

    Line 58 of style.css, body - add this:

     

    margin: 0;

    padding: 0;

    This will reset your body margin and padding to 0. For any element that requires padding, you can define an override within its own class or id.

     

    For Twitter bar, if you push it closer to menu, what will you do about your 'Hide' trigger button?

     

    On a sidenote, I notice a lot of faulty code:

     

    <headstuff class="twoColLiqLtHdr">

    <scmenu class="twoColLiqLtHdr">

    <tab class="twoColLiqLtHdr">

    I think you've made up your tags! You may want to stick to standard <div.... definitions.

     

    Line 24 of HTML where you've defined your jQuery script tag is missing a closing >. Fix that.

     

    Line 138 of HTML:

     

    <strong?image</strong> <a href="#">Tag</a>

    Invalid markup.

     

    Run your code through http://validator.w3.org/, check & resolve all errors first.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points