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!
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.
For the slideshow to push up:
.scmenu in your CSS file (line 102):
I see you already have z-index. But z-index will not work without a position reference.
.displaywrap (line 53 of your CSS):
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:
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:
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>
Run your code through http://validator.w3.org/, check & resolve all errors first.
Wow, you guys went above and beyond what I needed for help, I'll be sure to check that validator soon to work out all the errors in the site.
As for the Hide Tag on the Twitter Ticker, I was hoping I'd be able to make it so that the Hide tag overlays over the menu bar. I'm thinking I might make a graphic specifically for the index page with the tops of the d & b cut off to make it so the red menu bar touches the top of the screen. I'm not sure if that will fix the Hide button psuing it down or not... Would it be possible to have the Twitter ticker overlay over the top of the d & b while having the Hide button overlay over the red menu bar?
Or is it possible to make it so that the top of the d & b are overlaying over the Twitter ticker bar instead? That way I won't have to cut my logo up.