dreamweaver/html

[derekteixeira]

hey guys ...
i'm not sure how to ask this, so i'll just do my best ...

i'm designing my website, and i think i am doing a decent job so far. i've been using dreamweaver/html for the layout. you guys can see basically what im going for so far ... here (http://www.derekteixeira.com) it is... my question is this ... where you see the brown box on the left i wanted like a scrolling box sort of, that i can use to insert updates, news or whatever text i'd like to use.. i'm not sure how to do this.. i read somewhere that you can do the text you want to insert on a different html page and then you make it be appear in a box or something... i also heard that i shouldn't use a div layer because then when a user resizes my site, it'll cause the box to move out of place .. i'm sorry if this is confusing .. but i guess my best example would be ... listen skateboards (http://listenskateboards.com/default.htm) how they have the box in the middle... i hope you can help. thanks in advance ..

Derek..

[SurfPark]

Its called a scrolling frame and its very easy to do. Check out this code, which also has an example.

http://www.java2s.com/Code/HTMLCSS/Frame-Attributes/scrollingsetswhetheraframeshouldhaveascrollbarorno t.htm

[derekteixeira]

ah perfect.. but where would i put that ... because if you look at the source code for my page so far ...that table already has the image in it ..

[SurfPark]

Remove the image, put in the HTML code. Instead of using an img tag for the brown box, make the image a background image of the table cell.

[derekteixeira]

Remove the image, put in the HTML code. Instead of using an img tag for the brown box, make the image a background image of the table cell.

ah!!!
and one last thing...

let's say i only want a certain amount of characters to fit across .. so it won't have a sideways scroll bar ... is there a way to do that .. *you've been a huge help by the way.. thank you so much*

[deadmanlaz]

This css file attached should help you out.

All you need to do is edit the width and height to the size you would like it to be.

[derekteixeira]

and i save this as an html and paste it into that row of the column of the table?
i am afraid to use divs because they tend to move on their own when i resize the browser or anything..

[deadmanlaz]

Its css. Ditch the tables and use css.

Divs only resize if they are not set as an absolute.

Here's a .txt attached with the css and HTML. Resave as .html

[derekteixeira]

oh, very nice! i looked over the coding, and it really helped me understand a little better about css. I just have one question (i really want to understand this, not just take what you gave me) .. can you tell me what each part of this means?

position: absolute; top: 66px; left: 73px; width:217px; height:265px; overflow: scroll;

also, i noticed that when i type a large amount of text, the box stretches horizontally ... i was wondering what property would need to be changed and what to to fix this .. once again thank you.

[SurfPark]

can you tell me what each part of this means?

position: absolute; top: 66px; left: 73px; width:217px; height:265px; overflow: scroll;
That's describing the box. I'm going to translate that line of code.. The position is absolute in relation to the window size (it doesn't move no matter what resolution). The top of the box starts at 66 pixels from the top of the screen. The left starts at 73 pixels from the left left of the screen. The box is 217 pixels wide and 265 pixels tall. When the text overflows from what is viewable, the box will create scrolling bars.

also, i noticed that when i type a large amount of text, the box stretches horizontally ... i was wondering what property would need to be changed and what to to fix this .. once again thank you.

You're going to be adding this attribute into your CSS file....

overflow-x: hidden;
overflow-y: scroll;

Just like math, the box works around the idea of an x and y axis. You'll want all horizontal content that goes downward (on the y axis) to scroll while anything that scrolls right or left (on the x axis) will be hidden or disabled.