tebrown Posted August 6, 2012 Share Posted August 6, 2012 Hey Guys, Ok this is really annoying me. I have provided a link, which shows the problem i have ran into. Basically when you mouse click the "DROPDOWN" div, another div drops down. This part works fine. The issue that i have is when you scroll down this div goes with the middle content. What i want is the middle section (place holder text) to scroll as normal, with the 'DROPDWON' div fixed so that it doesnt move. This would allow the placeholder text to scroll behind it. http://jsfiddle.net/tebrown/fwgPJ/4/ * Please excuse the messy code. Testing purposes. Cheers Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/ Share on other sites More sharing options...
Mahngiel Posted August 6, 2012 Share Posted August 6, 2012 http://jsfiddle.net/fwgPJ/19/ Set your .hidden1 to fixed and apply a few position guides. Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367222 Share on other sites More sharing options...
tebrown Posted August 6, 2012 Author Share Posted August 6, 2012 When you click on the 'DROPDOWN' div, and then you scroll down, the white class (.hidden1) also goes behind it aswell. This needs to stay fixed. Cheers Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367332 Share on other sites More sharing options...
Mahngiel Posted August 6, 2012 Share Posted August 6, 2012 then it's supposed to be "fixed" too. apply the code to it. there is no magic in coding, you have to make it happen. Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367334 Share on other sites More sharing options...
tebrown Posted August 6, 2012 Author Share Posted August 6, 2012 Yup i just did that, but when you apply a position: fixed to it, it then doesn't push the left section, middle section, and right section down. It just goes overtop of it. http://jsfiddle.net/tebrown/fwgPJ/31/ Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367338 Share on other sites More sharing options...
Mahngiel Posted August 6, 2012 Share Posted August 6, 2012 i think your page structure is what's messed up. you should include the drop down inside the 'dropdown' element at the very least. Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367339 Share on other sites More sharing options...
tebrown Posted August 6, 2012 Author Share Posted August 6, 2012 The page structure I have got is set out so that when a user scrolls the information in the middle will go up and the 2 sidebars will stay fixed and not move. In terms of the dropdown that we have been talking about, it should push this content down upon clicking the 'DROPDOWN' (.toggle1) class, which would then show the .hidden1 class and push down the 3 sections. If the user trys to scroll once this is active, the middle section will go behind both the .hidden1 and .toggle1 classes. In regards to your above reply, i think the reason they cant be pushed down is because the side divs are set to fixed. But they have to be in order for my layout to work. What do you mean by "you should include the drop down inside the 'dropdown' element at the very least.". Cheers Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367342 Share on other sites More sharing options...
Mahngiel Posted August 6, 2012 Share Posted August 6, 2012 <div> <div>dropdown</div><div>expando chango</div></div> Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367355 Share on other sites More sharing options...
tebrown Posted August 7, 2012 Author Share Posted August 7, 2012 I'm very confused. I understand your not here to for me but could you please elaborate on this? Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367443 Share on other sites More sharing options...
Mahngiel Posted August 7, 2012 Share Posted August 7, 2012 I'm very confused. I understand your not here to for me but could you please elaborate on this? Yes, I can tell from reading your code you would be. You've thrown so many elements at the page, if you were to ever get this working, I'm not sure you understand why. Take a look at this code, for example: <div style="background-color: #FFFFFF;width: 1119px; margin: 0px auto; border-left: 1px solid #ccc; border-right: 1px solid #ccc;"> <ul id="navlist"> <li> <div class="toggle1" style="background-color: #FFFFFF; border-bottom: 1px solid #ccc;"> <a href="#"> <div align="center" style="color: #000000;"><b>DROPDOWN</b></div> </a> </div> <div class="hidden1"> <div style="height: 50px; background-color: #FFFFFF;"></div> </div> </li> </ul> </div> The purpose of these elements is to create one clickable element and the corresponding show/hide div. Validation failures aside, you've got no logic in your code. [*] The UL is a block-level element which is supposed to hold a ... list or grouped items like menus [*] You use a div > a > div This doesn't validate because you don't wrap a block-level element (<div>) in an inline element ( <a> ). Yes, it works, but there is a much better way to do this: If you manipulate the stylesheet, you can turn an element block. [*] Your code can be minimized and more easily read with a few minutes of study and effort. Put your styles into the stylesheet, not inline. makes debugging a pain in the ass. http://jsfiddle.net/Mahngiel/87g2X/ Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367466 Share on other sites More sharing options...
Christian F. Posted August 7, 2012 Share Posted August 7, 2012 To give you a further hint on what Manhgiel said: In the block of code he posted there are only three tags that's actually needed, namely ul, li and a. And the only attributes necessary are id, class, and href, with the latter being necessary for when the user have JS turned off. To quote a very famous, and very smart, man: It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away. Or to put it in a more modern way: Keep it simple stupid. Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367499 Share on other sites More sharing options...
tebrown Posted August 7, 2012 Author Share Posted August 7, 2012 Manhgiel, Thankyou so much. Really appreciate you taking your time to reply to this topic. I suppose i was rushing, hence the messy code. I need to prepare a few different variations of layouts for a project and the once i had selected the chosen layout i would have gone and re-coded it. Cheers Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367632 Share on other sites More sharing options...
tebrown Posted August 7, 2012 Author Share Posted August 7, 2012 Hey Manhgiel, Also with the container div. I see you have put the container div around the middle section, i've been trying to play around with this so that the left and right navigations are also within this auto margin, not right up against the left and right sides. Ideally, i was aiming to have the middle section 650px (not %) with the 2 sides 250px. These would then stick to each side of the middle section. Cheers. Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367648 Share on other sites More sharing options...
Mahngiel Posted August 7, 2012 Share Posted August 7, 2012 you could define it pixel based if you wanted. to get the page contents "separated" from the body of the browser, you could add padding to the body. because elements positioned other than relatively (order of appearance on the page) [floats, absolutes, fixes] remove themselves from the natural flow of the page, you have to encapsulate them together. That lack of encapsulation is why you found this error in the first place, and why putting them into one fixed container fixes the issue. if your site is going to be fixed width, it needs to start at the top-most parent container. if that width is less than the body width (width of the browser) auto margins will center it accordingly - either vertically or horizontally. Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367654 Share on other sites More sharing options...
tebrown Posted August 7, 2012 Author Share Posted August 7, 2012 Ok i have made a couple of changes. http://jsfiddle.net/tebrown/87g2X/3/ Try open the result as far as you can, in my browser (localhost) it does now center, although i cant seem to scroll now? Quote Link to comment https://forums.phpfreaks.com/topic/266726-css-problem-jsfiddle-provided/#findComment-1367655 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.