The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> I want to do this....
mrsrjp
post Jun 29 2009, 02:38 PM
Post #1





Group: Members
Posts: 7
Joined: 29-June 09
Member No.: 9,021



http://www.maverickbusinessadventures.com/

Here is the website. Do you see about half way down they have a list of video testimonials that have their own scroll bar? How can a person replicate that?

Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 29 2009, 03:51 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



Put the movies in a DIV. Give it a width, a hight and 'overflow: auto'.

http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mrsrjp
post Jun 29 2009, 06:59 PM
Post #3





Group: Members
Posts: 7
Joined: 29-June 09
Member No.: 9,021



QUOTE(pandy @ Jun 29 2009, 03:51 PM) *

Put the movies in a DIV. Give it a width, a hight and 'overflow: auto'.

http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow


Ok dumb question of the week award is about to go to me. How do I do a div? smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 29 2009, 11:10 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



Thusly. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mrsrjp
post Jun 30 2009, 05:52 AM
Post #5





Group: Members
Posts: 7
Joined: 29-June 09
Member No.: 9,021



Thank you!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 30 2009, 07:04 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



You're welcome. Post again if it doesn't work out. smile.gif

Just wanted to add that you don't need to use DIV to create scrollbars. CSS can do it with any block level element. But in this case DIV is the most suitable, HTML-wise. Wanted to explain this, because DIV is often used in examples when CSS tricks are demonstrated and many people get the impression it's the DIV that's magic when it's really utterly unimportant. Could be a P, a H1, whatever. Only that wouldn't be suitable here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mrsrjp
post Jun 30 2009, 08:07 AM
Post #7





Group: Members
Posts: 7
Joined: 29-June 09
Member No.: 9,021



QUOTE(pandy @ Jun 30 2009, 07:04 AM) *

You're welcome. Post again if it doesn't work out. smile.gif

Just wanted to add that you don't need to use DIV to create scrollbars. CSS can do it with any block level element. But in this case DIV is the most suitable, HTML-wise. Wanted to explain this, because DIV is often used in examples when CSS tricks are demonstrated and many people get the impression it's the DIV that's magic when it's really utterly unimportant. Could be a P, a H1, whatever. Only that wouldn't be suitable here.



I tried to do it - I don't think I'm doing it right. In box it's auto height and width. In positioning it's auto on height, width, and overflow.
Here is the URL: http://www.clientattraction.com/clientattractionwiab/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 30 2009, 08:47 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



No, auto width and hight won't work. If width and height aren't limited, there won't be anything that can overflow because the box will expand to accommodate its content. You don't have to use px if you don't want to. Other units like em and % will work also, but you must make sure the box is too small to hold what you put in it. Like a bucket filled with water. If the bucket grew larger the more water you poured into it, the water would never run over. Makes sense?

Maybe I should add that "natural" limitations work too. For example if you have a box that runs the full width of the browser window (or is jammed in by other boxes on the sides), you only need to limit its hight explicitly. Point is, the scrollbar appears first when there's nowhere for the content to go.

HTML
...
<body>
<div style="height: 100px; overflow: auto">
#PUT LOTS OF TEXT HERE#
</div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mrsrjp
post Jun 30 2009, 08:52 AM
Post #9





Group: Members
Posts: 7
Joined: 29-June 09
Member No.: 9,021



QUOTE(pandy @ Jun 30 2009, 08:47 AM) *

No, auto width and hight won't work. If width and height aren't limited, there won't be anything that can overflow because the box will expand to accommodate its content. You don't have to use px if you don't want to. Other units like em and % will work also, but you must make sure the box is too small to hold what you put in it. Like a bucket filled with water. If the bucket grew larger the more water you poured into it, the water would never run over. Makes sense?


You're so stinkin' smart!!! smile.gif God bless for people like YOU! That worked like a charm. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 30 2009, 08:54 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



Oops! You're too quick for me. I added a bit above. Don't want to misguide you. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mrsrjp
post Jul 2 2009, 11:59 AM
Post #11





Group: Members
Posts: 7
Joined: 29-June 09
Member No.: 9,021



Ok so how about this problem. In safari the code looks like *beep*. Everything is fine in IE and FF. Any suggestions?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 2 2009, 01:18 PM
Post #12


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Validate your HTML (links on this page) and the CSS too (at http://jigsaw.w3.org/css-validator/).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mrsrjp
post Jul 2 2009, 01:51 PM
Post #13





Group: Members
Posts: 7
Joined: 29-June 09
Member No.: 9,021



thanks! fixed!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 2 2009, 04:08 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



The page now *looks* fixed in Safari, but there are still html and CSS errors.

Let ALA's Flash Satay be your friend.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th April 2024 - 10:49 PM