Setting TEXT ONLY margins/padding in a .div

[mi0sis]

Right now I am currently using this:

------------------------------------------------------------
.div0 {
background-image:url(http://www.rubnip.com/Pictures/topback.gif);
background-position:center center;
background-repeat:no-repeat;
background-attachent:fixed;
background-color:black; color:FFFFFF;
border:0px solid; border-color:grey;
padding-left:10px; padding-right:10px;
padding-top:10px; padding-bottom:10px;
width:800px; height:250px; overflow:none;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:150px; text-align:center;
visibility:visible;}
--------------------------------------------------------------

The only problem is, when I use that padding setting within the divider, it also moves my background image. I just want to set a margin or padding that affects the text within the divider only, not the background image. How would this be done?

---------------------------------------------------------------
<div class="bbzContainer">
<div class="div0">
<font size=1>Test</font>
</div>
---------------------------------------------------------------

Or maybe I can put something in there in the font tag that will affect only the text?

Any help is appreciated. :)

[drhowarddrfine]

You are applying the margin/padding to the div so that's why the background moves. You don't have any positioning applied to the text itself and font is not positionable anyway. The <font> tag also went the way of the do-do bird. Do not use it.

Instead, either enclose your tag in a paragraph, <p> tag, or, if it's a heading, call it that: <h1>, <h2> and so on. Then you can position it in your css like so:

h1{margin:20px}

Then you are applying positioning to the text and not the div.

[mi0sis]

You are applying the margin/padding to the div so that's why the background moves. You don't have any positioning applied to the text itself and font is not positionable anyway. The <font> tag also went the way of the do-do bird. Do not use it.

Instead, either enclose your tag in a paragraph, <p> tag, or, if it's a heading, call it that: <h1>, <h2> and so on. Then you can position it in your css like so:

h1{margin:20px}

Then you are applying positioning to the text and not the div.

OK where exactly do I put the "h1{margin:20px}"? Anywhere in my style sheet? Or is there some place in particular?

Thanks for the heads up on the <font> tag too. I've kinda been out of the web coding loop and I'm learning CSS at the moment.

So I'll define all my text properties in the "h1{margin:20px}" class and whatever I put between my <h1> <p> <h2> tags will be adjusted according to how the each class is defined (h1, p and h2 each respectively) correct?

P.S. Do I need a semicolon in "h1{margin:20px}" after the 20px?

[mi0sis]

OK where exactly do I put the "h1{margin:20px}"? Anywhere in my style sheet? Or is there some place in particular?

Thanks for the heads up on the <font> tag too. I've kinda been out of the web coding loop and I'm learning CSS at the moment.

So I'll define all my text properties in the "h1{margin:20px}" class and whatever I put between my <h1> <p> <h2> tags will be adjusted according to how the each class is defined (h1, p and h2 each respectively) correct?

P.S. Do I need a semicolon in "h1{margin:20px}" after the 20px?

Here is what I tried, it didn't work lol. I assume I am doing it wrong:

p {
magrin-left:10px
margin-right:10px
margin-top:10px
margin-bottom:10px
font-size:1
font-color:FFFFFF}

h1 {
magrin-left:10px
margin-right:10px
margin-top:10px
margin-bottom:10px
font-size:3
font-color:CCCC99}

h2 {
magrin-left:10px
margin-right:10px
margin-top:10px
margin-bottom:10px
font-size:2
font-color:CCCC99}

[mi0sis]

Here is what I tried, it didn't work lol. I assume I am doing it wrong:

p {
magrin-left:10px
margin-right:10px
margin-top:10px
margin-bottom:10px
font-size:1
font-color:FFFFFF}

h1 {
magrin-left:10px
margin-right:10px
margin-top:10px
margin-bottom:10px
font-size:3
font-color:CCCC99}

h2 {
magrin-left:10px
margin-right:10px
margin-top:10px
margin-bottom:10px
font-size:2
font-color:CCCC99}

Whoops spelled on of the "margins" wrong. X_X

[mi0sis]

Oh yeah, not to ask 5000000 questions but, is there anyway I can make the scrollbars affected by the margin? I.E. Say the divider is 400px in height, I have margins on top and bottom set to 20, the scrollbars only scroll between pixels 21 and 379.

Thanks again for all the help. :D

[mi0sis]

Oh yeah, not to ask 5000000 questions but, is there anyway I can make the scrollbars affected by the margin? I.E. Say the divider is 400px in height, I have margins on top and bottom set to 20, the scrollbars only scroll between pixels 21 and 379.

Thanks again for all the help. :D

OK, I fixed all the margins and got them working. :)

My question still stands about the scrollbars though, any way to get them to obey margins?

Thanks again.

[AricC]

OK, I fixed all the margins and got them working. :)

My question still stands about the scrollbars though, any way to get them to obey margins?

Thanks again.

Jumping in late on this but what do you mean by scroll bars obey the margins?

[drhowarddrfine]

Do I need a semicolon in "h1{margin:20px}" after the 20px?

Only to seperate other attributes of the same element, so, no.

font-size:1
font-color:FFFFFF}

font-size requires a unit type, such as ems or px. font-color requires a # before the number, ie, #ffffff. Case matters in CSS so use lower case.
http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

CSS Full Property Table

I don't know what is meant by the scrollbars, too.

[mi0sis]

Only to seperate other attributes of the same element, so, no.
font-size requires a unit type, such as ems or px. font-color requires a # before the number, ie, #ffffff. Case matters in CSS so use lower case.
http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

CSS Full Property Table

I don't know what is meant by the scrollbars, too.

Thanks again for the help.

OK, let's see here how can I describe what I mean here about the scrollbars.

Well OK let's say I have this 400 x 400 divider. If I have text and images that exceeds that size it will cause an overflow. I currently have my overflow set to "auto" so that in turn will create a scrollbar within' the divider so you can see the text and images in the divider that have gone over the height and width specifications.

My problem is, the scrollbars span the entire length of the divider, I.E. they start at pixel 0 and go all the way to pixel 400. By doing this, when you scroll through the divider the text also goes all the way to pixel 0 and 400 when clipping off the divider. So is there a way I can set the scrollbar height to match the size 380 x 380 (Starting at pixel 21 and ending at pixel 379) so that the text doesn't go all the way to the very edge of the divider when it scrolls off?

Here is the site I am working on:

http://www.myspace.com/fullofstupidandlose

Note: Contains obscenities.

If you look at any of the dividers with scrollbars you can see I have a background image that is supposed to appear as a window for the text to sit in. When you scroll up or down though, the text overlaps that image and goes all the way to the edge of the divider.

I hope this helps to clarify. I think that's the best way I can describe it. Thanks much guys. :)

[mi0sis]

Or here is another way I guess it could be done, is there a way to limit the size of the box that the text sits within' the divider so I can make that smaller in turn making the scrollbars smaller?

[mi0sis]

OK, I have been thinking about this, and it seems what I am trying to do doesn't make sense or isn't possible. Since the overflow setting of the divider is for the divider, not the text and soon as the divider reaches its' clipping limit it creates a scrollbar for the divider, not the text.

So I think what I need to do here, is put the text within something else inside of the divider.

Is there any kind of element or tag I can put the text in, inside the divider that has a separate overflow value from that of the divider? This way I can set a dimensions for that and if my text exceeds it, it will create a scrollbar within the bounds of that element instead of the divider.

Maybe a table or something? Better yet, another divider? Actually I think I'll try overlapping a divider.

New question, do I have to set any certain command to make sure my new divider is on top of the old one and visible?

Thanks again. :)

[mi0sis]

Maybe a table or something? Better yet, another divider? Actually I think I'll try overlapping a divider.

New question, do I have to set any certain command to make sure my new divider is on top of the old one and visible?

Thanks again.

Got this to work. Everything seems to be working as I want it to. Thanks again for the help. :D