The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Textbox with scrolling bar?, looking for codes to make a textbox with scroll bar
peach
post Mar 13 2007, 06:28 PM
Post #1


Newbie
*

Group: Members
Posts: 14
Joined: 13-March 07
Member No.: 2,194



Hi
I'm quite new to HTML and just made m.noy first pure HTML site...
take a look here
Now i want that kind of "main box" to be filled with text and information, maybe some pictures...
How do I insert a kinda textbox, or even any text at all that fits into it with no background colour?
And if it's to much text to fit in, how do i make it stay in the "main box" and enable a scrolling bar on the side?

Hope some of you out there understood my problem and I'm hoping of a quick answer

Thanks!

This post has been edited by peach: Mar 13 2007, 06:29 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 16 2007, 05:31 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,471
Joined: 10-August 06
Member No.: 7



QUOTE(peach @ Mar 14 2007, 12:28 AM) *

Hi
I'm quite new to HTML and just made m.noy first pure HTML site...
take a look here

Hi smile.gif

Visually it looks nice, but there are a few serious problems with the code: the header text is made with background images, and as such becomes invisible to search engines and browsers that don't use images. Instead you might use inline images with suitable ALT text. The image links also need ALT text. The HTML document also lacks the mandatory TITLE element in the HEAD section.

There are more HTML errors pointed out here: http://www.htmlhelp.com/cgi-bin/validate.c....loennechen.no/ (ask again if you have questions regarding the validator report).

QUOTE
Now i want that kind of "main box" to be filled with text and information, maybe some pictures...
How do I insert a kinda textbox, or even any text at all that fits into it with no background colour?

You could simply write it into the "main box" table cell. What tools are you using to create the HTML code?

QUOTE
And if it's to much text to fit in, how do i make it stay in the "main box" and enable a scrolling bar on the side?

This is best done with the CSS "overflow" property. See the CSS Reference link on top of this page for CSS basics, and http://www.quirksmode.org/css/overflow.html for specific information regarding overflow.

Note that two scrollbars (one for the window and another for the "main box") becomes annoying for the user. A better way might be to let the table cell expand, using tiling CSS background images to make it seamless.

User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
peach
post Mar 18 2007, 09:19 AM
Post #3


Newbie
*

Group: Members
Posts: 14
Joined: 13-March 07
Member No.: 2,194



thanks a lot biggrin.gif
will start working on the problems, might ask here again if some troulbe occurs blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
peach
post Mar 25 2007, 04:24 PM
Post #4


Newbie
*

Group: Members
Posts: 14
Joined: 13-March 07
Member No.: 2,194



Hi again
some problems occured...
im now using some css, and under here is my css atm:

body { margin: 10px; font-family: verdana; color: #FFFFFF; overflow: auto; }
p { margin: 17px; }


why wont the overflow work?
cause it doesnt, it just fucks up the site if i type to much in the cell...
and how do i make mouseovers btw?

thanks, peach
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 25 2007, 05:04 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,471
Joined: 10-August 06
Member No.: 7



QUOTE(peach @ Mar 25 2007, 11:24 PM) *

why wont the overflow work?

You should apply it (and some height value) to the element you want a scrollbar in (BODY has a scrollbar by default). Give the cell in question a CLASS name so the CSS applies to that cell only.

But I think a scrollbar in the content cell would look bad, rather let the cell expand vertically when needed.

QUOTE
and how do i make mouseovers btw?

These are usually done with javascript or CSS, see e.g. http://wellstyled.com/css-nopreload-rollovers.html

User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
peach
post Mar 30 2007, 06:29 AM
Post #6


Newbie
*

Group: Members
Posts: 14
Joined: 13-March 07
Member No.: 2,194



this is my css by now:

body { margin: 10px; font-family: verdana; color: #FFFFFF; }

#mainbox{margin: 15; overflow: auto }

.nav
a:link {
display: block;
width: 159px;
height; 32px:
background-image: url(images/default_06.gif) ;
text-decoration: none;
}

.nav
a:visited {
display: block;
width: 159px;
height; 32px:
background-image: url(images/default_06.gif) ;
text-decoration: none;
}

.nav
a:hover
{
display: block;
width: 159px;
height; 32px:
background-image: url(images/lys-default_06.gif) ;
text-decoration: none;
}

.nav
a:focus
{
display: block;
width: 159px;
height; 32px:
background-image: url(images/default_06.gif) ;
text-decoration: none;
}

.nav
a:active
{
display: block;
width: 159px;
height; 32px:
background-image: url(images/default_06.gif) ;
text-decoration: none;
}


why wont it work?
check out www.loennechen.no/testdefault.html for the page that im trying the css for and to find the html code

what is wrong?
thanks, PeacH

This post has been edited by peach: Mar 30 2007, 06:31 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 30 2007, 06:46 AM
Post #7


Programming Fanatic
********

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



Try by setting a height to the #mainbox rule.
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: 13th July 2020 - 08:26 AM