CSS Problem (jsFiddle Provided)

[tebrown]

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

[Mahngiel]

http://jsfiddle.net/fwgPJ/19/

 

Set your .hidden1 to fixed and apply a few position guides.

[tebrown]

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

[Mahngiel]

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.

[tebrown]

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/

[Mahngiel]

i think your page structure is what's messed up. you should include the drop down inside the 'dropdown' element at the very least.

[tebrown]

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

[Mahngiel]

<div>

 

<div>dropdown</div><div>expando chango</div></div>

 

[tebrown]

I'm very confused. I understand your not here to for me but could you please elaborate on this?

[Mahngiel]

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/

[Christian F.]

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.

[tebrown]

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

[tebrown]

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.

 

 

[Mahngiel]

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.

[tebrown]

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?