Webforumz's RSS FeedRSS Webforumz RegistrationRegister Contact Webforumz StaffContact

Scrollable Div Help needed

This is a discussion on "Scrollable Div Help needed" within the Web Page Design section. This forum, and the thread "Scrollable Div Help needed are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Jul 10th, 2006, 10:36
New Member
Join Date: Jul 2006
Location: England
Age: 23
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Scrollable Div Help needed

Hi.
I have set up a website using a CMS and I have the content in a scrollable div, On many computers the content in the white box (content area) sits outside the content area and is thus unreadable. Can anyone tell me what I can do to fix this?

Thanks in advance
Tanya

ps. the website is http://www.cleanlivingrecords.com
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #2  
Old Jul 10th, 2006, 10:45
minute44's Avatar
Most Reputable Member

SuperMember
Join Date: Apr 2006
Location: Nottingham UK
Age: 25
Posts: 1,361
Blog Entries: 3
Thanks: 0
Thanked 1 Time in 1 Post
Re: Scrollable Div Help needed

To be honest Tanya, Scrollable divs aren't the best idea in the first place... they look ugly, especially on a nice graphical interface like yours. They also, by definition require the user to scroll to get information (not a good thing in web design)

What I'd suggest is redoing the page so that it eliminates the need for a scrollable div.

Alternatively, if you really need/want to keep it I'd suggest checking and double checking all your padding/margins on the div and all tags within it. If all else fails just stipulate that <p> is a set width so not to overhang the edges of the div.

If you need any further assistance then don't hesitate to ask.

Dan.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Jul 10th, 2006, 11:25
New Member
Join Date: Jul 2006
Location: England
Age: 23
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Scrollable Div Help needed

Quote:
Originally Posted by minute44
To be honest Tanya, Scrollable divs aren't the best idea in the first place... they look ugly, especially on a nice graphical interface like yours. They also, by definition require the user to scroll to get information (not a good thing in web design)

What I'd suggest is redoing the page so that it eliminates the need for a scrollable div.

Alternatively, if you really need/want to keep it I'd suggest checking and double checking all your padding/margins on the div and all tags within it. If all else fails just stipulate that <p> is a set width so not to overhang the edges of the div.

If you need any further assistance then don't hesitate to ask.

Dan.
Hi.
Thanks for replying Dan. I do want to keep the scrollable div, I believe everything is ok with the padding etc. I have been told the problem is occuring in IE6 and FF1.5.0.4. Im not sure what you mean by "stipulate that <p> is a set width" could you please clarify on this?
Cheers
Tanya
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Jul 10th, 2006, 11:35
minute44's Avatar
Most Reputable Member

SuperMember
Join Date: Apr 2006
Location: Nottingham UK
Age: 25
Posts: 1,361
Blog Entries: 3
Thanks: 0
Thanked 1 Time in 1 Post
Re: Scrollable Div Help needed

In CSS, as with everything else, you can set a width for the <p> tag.

For example:

p {
colour: #000000;
font-family: verdana, Ariel, MS Sans Serif;
font-size: 0.9em;
margin-bottom: 20px
width: 350px
}

This tells <p> that it cannot be wider than 350 pixels.

Hope this helps..

If not then I will be happy to continue to help you.

Dan.

Last edited by minute44; Jul 10th, 2006 at 11:38.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Jul 10th, 2006, 11:54
New Member
Join Date: Jul 2006
Location: England
Age: 23
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Scrollable Div Help needed

Quote:
Originally Posted by minute44
In CSS, as with everything else, you can set a width for the <p> tag.

For example:

p {
colour: #000000;
font-family: verdana, Ariel, MS Sans Serif;
font-size: 0.9em;
margin-bottom: 20px
width: 350px
}

This tells <p> that it cannot be wider than 350 pixels.

Hope this helps..

If not then I will be happy to continue to help you.

Dan.
Hi.
Ok i just added this, obviously edited to my needs and........
it just added a horizontal scrollbar to the div?

Any other suggestions, is anyone using any of these versions, in which the misplacement occurs? I dont know actually how bad it is?

Thanks
Tanya
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Jul 10th, 2006, 11:58
minute44's Avatar
Most Reputable Member

SuperMember
Join Date: Apr 2006
Location: Nottingham UK
Age: 25
Posts: 1,361
Blog Entries: 3
Thanks: 0
Thanked 1 Time in 1 Post
Re: Scrollable Div Help needed

Quote:
Originally Posted by hardybabe
Hi.
Ok i just added this, obviously edited to my needs and........
it just added a horizontal scrollbar to the div?

Any other suggestions, is anyone using any of these versions, in which the misplacement occurs? I dont know actually how bad it is?

Thanks
Tanya
Do you have other elements in there that aren't <p>? If so you'll need to edit them too. shrink it down to remove the horiz scrollbar.

I really think this is the answer and urge you to persist with exploring it.

can I see some screenshots of the problem as It looks OK on mine...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Jul 10th, 2006, 12:01
New Member
Join Date: Jul 2006
Location: England
Age: 23
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Scrollable Div Help needed

Quote:
Originally Posted by minute44
Do you have other elements in there that aren't <p>? If so you'll need to edit them too. shrink it down to remove the horiz scrollbar.

I really think this is the answer and urge you to persist with exploring it.

can I see some screenshots of the problem as It looks OK on mine...
It looks ok on mine aswell, but 30+ people have told me that the misplacement is occuring with them, partcularly in IE 6, obviously I would like to see some screenshots of the problem aswell, so indeed if anyone is getting the misplacement please help us out.

Cheers
Tanya
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Jul 10th, 2006, 15:50
New Member
Join Date: Jul 2006
Location: England
Age: 23
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Scrollable Div Help needed

Ok, I have just installed IE 6 AND FF 1.0.5.4 and I am not getting the misplacement, so why is it that other people are?
Is it showing up ok for everyone else? What browsers/versions are you using?
Cheers all
Tanya
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
scrollable, div, help, needed

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
scrollable text PLEASE HELP ASAP dench82 Starting Out 0 Apr 30th, 2007 02:58
Mouse scrollable gallery itorch Flash & Multimedia Forum 1 Nov 30th, 2006 17:50
Scrollable Table? Prof Web Page Design 6 Nov 7th, 2006 01:37
Scrollable Text Box mirracle4 Web Page Design 3 Jul 12th, 2006 11:28


All times are GMT. The time now is 19:20.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8