CSS Problem (jsFiddle Provided)

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

Browny
New php-forum User
New php-forum User
Posts: 26
Joined: Wed Mar 21, 2012 7:25 pm

CSS Problem (jsFiddle Provided)

Postby Browny » Mon Aug 06, 2012 4:08 am

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/

Cheers

User avatar
Nullsig
php-forum Fan User
php-forum Fan User
Posts: 981
Joined: Thu Feb 17, 2011 6:52 am
Location: Racine, WI

Re: CSS Problem (jsFiddle Provided)

Postby Nullsig » Mon Aug 06, 2012 1:33 pm

2 different things you need to do.

1. Your side divs (Injury Report, Mangement Options, Add Player) need to not be fixed. They should be floating divs or part of a table to maintain the layout you are looking for.

2. Your middle section with the placeholder section should have a fixed height and use the overflow:scroll in it's CSS
http://www.w3schools.com/cssref/pr_pos_overflow.asp

Browny
New php-forum User
New php-forum User
Posts: 26
Joined: Wed Mar 21, 2012 7:25 pm

Re: CSS Problem (jsFiddle Provided)

Postby Browny » Mon Aug 06, 2012 1:49 pm

The purpose of this layout is to be able to scroll the middle section with the 2 side divs staying where they are so a user can just quickly do things. Given this, the 2 sidebars have to stay fixed. Is there any other way around it? - If i change the class (.hidden1) to fixed, then it doesnt push the content down when i press 'DROPDOWN' div.

User avatar
Nullsig
php-forum Fan User
php-forum Fan User
Posts: 981
Joined: Thu Feb 17, 2011 6:52 am
Location: Racine, WI

Re: CSS Problem (jsFiddle Provided)

Postby Nullsig » Tue Aug 07, 2012 3:59 am

The way I mentioned will keep them fixed. because you will scroll the center content using the scroll bar that is created when a division has overflow:scroll as an attribute/value combination.

Browny
New php-forum User
New php-forum User
Posts: 26
Joined: Wed Mar 21, 2012 7:25 pm

Re: CSS Problem (jsFiddle Provided)

Postby Browny » Tue Aug 07, 2012 4:21 am

Thanks for the reply.

I see what you mean, i think im going to get really confused doing this. Would your option take long to fix from the jsFiddle that was provided. This reason being is because this feature has been the hardest part and this is all i need done before i can move on and start my php.

Cheers!

User avatar
Nullsig
php-forum Fan User
php-forum Fan User
Posts: 981
Joined: Thu Feb 17, 2011 6:52 am
Location: Racine, WI

Re: CSS Problem (jsFiddle Provided)

Postby Nullsig » Tue Aug 07, 2012 10:09 am

Because of the amount of restructuring it takes and the clunky interface of JS fiddle, yes it would take a lot of time.

Here is the pseudo-coded skeleton

Code: Select all

<div id='wrapper' style='width:1024px'>
       <div id='navigation' style='width:100%'>
       </div>
       <div id='lowersection'>
              <div id='leftsidebar' style='float:left;width:20%;height:500px;'>
              </div>
              <div id='content' style='float:left;width:58%;overflow:scroll;height:500px;'>
              </div>
              <div id='leftsidebar' style='float:left;width:20%;height:500px;'>
              </div>
       </div>
</div>


The inline style can go to a CSS page once you get it working.

Browny
New php-forum User
New php-forum User
Posts: 26
Joined: Wed Mar 21, 2012 7:25 pm

Re: CSS Problem (jsFiddle Provided)

Postby Browny » Tue Aug 07, 2012 3:57 pm

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 center now, although i cant seem to scroll now with the placeholder text?

User avatar
Nullsig
php-forum Fan User
php-forum Fan User
Posts: 981
Joined: Thu Feb 17, 2011 6:52 am
Location: Racine, WI

Re: CSS Problem (jsFiddle Provided)

Postby Nullsig » Wed Aug 08, 2012 6:58 am

http://jsfiddle.net/87g2X/8/

You didn't have the overflow or height attributes for #content

Browny
New php-forum User
New php-forum User
Posts: 26
Joined: Wed Mar 21, 2012 7:25 pm

Re: CSS Problem (jsFiddle Provided)

Postby Browny » Wed Aug 08, 2012 2:46 pm

Thanks for your reply,

Is there anyway I could hide the scrollbar of the content but still do the same effect of actually scrolling? - Ideally the user would just use his middle mouse scroller to scroll the content, if you know what i mean?

CHeers

User avatar
Nullsig
php-forum Fan User
php-forum Fan User
Posts: 981
Joined: Thu Feb 17, 2011 6:52 am
Location: Racine, WI

Re: CSS Problem (jsFiddle Provided)

Postby Nullsig » Thu Aug 09, 2012 6:39 am

There is probably a way to do it, but it is nothing I have ever encountered.

In general you want scrolling content to look like scrolling content. Otherwise the user will be confused.

I would look into JQuery packages that can accomplish this if you are absolutely committed to it.


Return to “CSS”

Who is online

Users browsing this forum: No registered users and 2 guests