Jump to content


Photo

Need the tabs to be "under" the #wrap


  • Please log in to reply
20 replies to this topic

#1 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 15 April 2011 - 01:11 PM

URL: http://bit.ly/gLgj2Z

See the 3 tabs on the right side of the page? I want those to appear "under" the #wrap div. I tried using z-index, but it didn't work. What am I missing? :huh:
  • 0

#2 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 15 April 2011 - 05:24 PM

Remove the z-index from #wrap and give the .tabs a negative z-index.
  • 0
Lynne
180virtual

#3 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 15 April 2011 - 05:38 PM

That works! :) But now the jquery slide out isn't working. Do you know how I might be able to make them work together? The slide out tabs are based on this: http://tympanus.net/...query-tutorial/
  • 0

#4 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 15 April 2011 - 06:08 PM

Were they working before modifying the z-index?

You might need to rearrange your calls to Jquery. CSS stylesheets come before the jQuery, and the jQuery library comes before your custom script.

Edited by virtual, 15 April 2011 - 06:13 PM.

  • 0
Lynne
180virtual

#5 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 15 April 2011 - 06:12 PM

Yeah, they were working before the z-index was applied.

I have the jquery in the head appearing after the calls to CSS. What you see in the footer is related to the wp_cycle plugin that controls the slideshow on the home page.
  • 0

#6 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 15 April 2011 - 06:17 PM

Yes I realized that after and edited my post. I'm not quite sure what is happening but they are halfway working, they slide back in on page refresh???
  • 0
Lynne
180virtual

#7 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 15 April 2011 - 06:18 PM

Yeah, that part is working. Ugh.... this is killing me.

Plus, I've got issues with the bottom widget area (the part in dark gray). On long pages, the bottom gets cut off. On short pages, it displays just fine. I know it's a silly error somewhere, but I can't find it! Nevermind the fact that the whole section is supposed to sit at the bottom right on top of the footer. <_<

Edited by Susie, 15 April 2011 - 06:19 PM.

  • 0

#8 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 15 April 2011 - 06:23 PM

Are you looking at it in IE? Because I don't see your page length issue in Firefox Mac
  • 0
Lynne
180virtual

#9 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 15 April 2011 - 06:25 PM

No, I'm using Firefox 4. You don't see a difference between these 2 pages?

http://bit.ly/gLgj2Z

http://bit.ly/gzUAUw
  • 0

#10 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 15 April 2011 - 06:28 PM

Just a thought, the tabs do animate, try changing the 'marginLeft'; settings to positive. Or just wait till Ben gets here and he'll sort you out quicker than I can.... B)
  • 0
Lynne
180virtual

#11 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 15 April 2011 - 06:31 PM

That didn't work either. Hmmm....

Oh, Beeeennnnnn..... :P
  • 0

#12 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 15 April 2011 - 06:32 PM

BTW, thanks for taking a look, Lynne. I appreciate it!
  • 0

#13 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 15 April 2011 - 06:32 PM

Yes of course, you mean your footer doesn't stick to the bottom. Have you tried the http://ryanfait.com/sticky-footer/
  • 0
Lynne
180virtual

#14 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 15 April 2011 - 06:33 PM

Sorry I can't be of more help.
  • 0
Lynne
180virtual

#15 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 15 April 2011 - 06:34 PM

Actually, the footer does stick to the bottom. The part that is white and has some links on the left and the copyright stuff on the right is the footer....
  • 0

#16 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 15 April 2011 - 06:44 PM

I'm seeing this - Firefox 3.6
Posted Image
  • 0
Lynne
180virtual

#17 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 15 April 2011 - 07:31 PM

Right - the footer at the very bottom is only 30 pixels high. That gray widget area should sit directly on top of the footer. And on long pages, the gray is cut off....you don't see the bottom dashes nor is the content properly padded....
  • 0

#18 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 15 April 2011 - 09:49 PM

Ok I missed the point before.
I think you might have a case of "collapsed margins".
http://www.complexsp...apsing-margins/
http://reference.sit...llapsingmargins
  • 0
Lynne
180virtual

#19 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 16 April 2011 - 05:52 AM

I don't know....I tried adding padding and borders and it didn't work for me. If I add enough padding for it to look right on the long pages, it's too much for the ones on the short pages.

Thanks for trying, Lynne. :)
  • 0

#20 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 16 April 2011 - 06:06 AM

Well, I just added a 30px bottom margin to #home-bottom-widgets and it seems to have solved it. But I'm not sure if it's the correct way to do it. I hope it won't negatively affect other pages down the road...
  • 0

#21 grabenair

grabenair

    Advanced Member

  • Member
  • PipPipPipPip
  • 361 posts
  • LocationIowa

Posted 16 April 2011 - 05:11 PM

not sure but what I do when i have a page of different lengths is make a new css rule for this document only and use the same name . That way in the cascade the new one will be at the bottom and the height only effects that page only effect that page. An example of this http://www.roxanesmarine.com
  • 0
Standards will change. But your website needs to remain in serving its audience.
My Portfolio site




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users