-1

I'm trying to use foundation as a floating div on top of my fullpage The foundation has some interactive elements in it (changing text sizes, etc)

example can be seen here: http://goedgevonden.net/laurent/examples/index.html

everything is working so far so good the only problem is that the content of the slides moves aswel when the text in foundation div moves... (i'd like the content of the slides to stay at the same place)

is my div not floating afterall? been looking for hours now and cant really find the problem. Anyone has a clue what I'm doing wrong?

The interactive foundation is btw not affecting the on scroll rotating 'Athene' text (= which is good)

this is the css I used for the foundation div

#foundation {
    position:absolute;
    height: 100%;
    display:block;
    width: 100%;
    background: transparent;
    z-index:999;
}

Thanks in advance & Best Regards to all of you

Knut Holm
  • 3,988
  • 4
  • 32
  • 54
Alfred Kwak
  • 85
  • 11
  • 1
    "Test 1" is scrolling upward with the slide like you wanted right? I'm not sure what your problem is here, can you elaborate on the exact issue that you are having? Refer to specific elements. I also see your initiating JS in your `` any scripting or links to scripts should be in your `` right before you close the tag: above `` – JLF Apr 25 '15 at 14:29
  • Hi JLF thanks for the quick reply. Test 1 is indeed the content of slide 1. But the interactive foundation text (on top, the changing Athena is... text) is pushing down this content of slide 1... so I assume this div is not floating on top of the page? (The other div (the rotating Athena text) is working just fine, the interactive div does not affect/push down the rotating text... ) – Alfred Kwak Apr 25 '15 at 14:34

1 Answers1

1

The page itself is very disorganized. You should never be writing CSS using <style> in the middle of the body inside elements. You should also never be linking entire CSS libraries inside the middle of the body either.

All relevant CSS belongs in one <style> inside the head. All linked libraries also belong in the head in order based upon their dependancies on another.

Same with JavaScripts. If the JavaScript library determines how the rest of the scripts react with one another, like jQuery, they belong individually linked in the head. Otherwise, they need to be in dependency order at the bottom of the body, just above the </body>.

Your #foundation element may not be working because of this disorganization. Follow Foundation's Getting Started second chapter to learn where exactly you should be putting these scripts and linked libraries. I suggest reading the whole Docs before you use this massive framework.

Lastly, for elements that have position: absolute you should consider actually defining their position:

#foundation {
  position: absolute;
  top: 0
  left: 0
}

When you have done all of this, and your problem is not fixed, update your question and I will look further into it. But now you have a mess of CSS rules that are probably clashing with each other and creating a problem that can't be seen.

JLF
  • 2,280
  • 4
  • 28
  • 45
  • Thanks JLF for the constructing answer, I will follow these steps and keep you updated! Thanks for your effort! – Alfred Kwak Apr 25 '15 at 14:52
  • Hi JLF thanks for the advice you gave me earlier today I tried to update the html file by following your guidelines. Things look like a lot more clear now and a bit better. Things are starting to work out but i'm still struggling with the div. Example can be seen at: goedgevonden.net/laurent/examples/index.html as you can see the interactive div is still lost somewhere on top of the page... Any idea what's triggering this issue? Really thank you for your efforts, you're really helping me out and i'm learning a lot! – Alfred Kwak Apr 25 '15 at 19:52
  • Make sure you are applying your absolute styles to your interactive div @AlfredKwak also, update you answer to include styles and HTML for that interactive div. – JLF Apr 25 '15 at 23:22
  • Looks like I was making it too complicated, everything's working now as it should be! Thanks for your time man! – Alfred Kwak Apr 27 '15 at 11:59
  • @AlfredKwak Always remember to stay organized as your code expands, this is your best defense against errors and your first step in debugging. If this answer solved your question, remember to tick the check mark. – JLF Apr 27 '15 at 14:50