...

View Full Version : Why does certain padding and margin not work?



dazd
05-16-2011, 07:14 AM
Hey all,

On some things, no matter it be an image or text sometimes padding-left, padding-right, margin-left and margin-right do not work. Why is that? padding top bottom and margin top bottom work but horizonatally i padding or margins wont work. Is it maybe because I added a position of absolute?

djh101
05-16-2011, 08:10 AM
Could you post your code and/or a link to the page you're having trouble with?

dazd
05-16-2011, 08:35 PM
Could you post your code and/or a link to the page you're having trouble with?

pvdemos.com, note the text ( Fusce luctus velit nec tellus dapibus vel vulputate nibh tempus. Integer feugiat nisi vitae nisl eleifend ac facilisis est cursus. Quisque ac scelerisque urna. )

I am unable to give that some padding-left: to move it under the picture displayed above it.

teedoff
05-16-2011, 08:37 PM
pvdemos.com (http://www.pvdemos.com), note the text ( Fusce luctus velit nec tellus dapibus vel vulputate nibh tempus. Integer feugiat nisi vitae nisl eleifend ac facilisis est cursus. Quisque ac scelerisque urna. )

I am unable to give that some padding-left: to move it under the picture displayed above it.

It's time you learned how to post a link...lol Use the little blue icon that looks like a globe with a figure eight at the bottom. Then type or copy and paste your URL in the popup window.

alykins
05-16-2011, 08:39 PM
adding padding left to that text will move it further right... padding left moves objects right... remove padding to put it under the img... going to look at ur source code and css now (just did a quick view/response)

alykins
05-16-2011, 08:41 PM
also line 57 of your source code...
class"port"...
should be class="port"

Edit: and line 55

teedoff
05-16-2011, 08:43 PM
You need to do some reading on Absolutely positioned divs and why they usually get you in trouble and are not needed.

dazd
05-16-2011, 10:06 PM
adding padding left to that text will move it further right... padding left moves objects right... remove padding to put it under the img... going to look at ur source code and css now (just did a quick view/response)


also line 57 of your source code...
class"port"...
should be class="port"

Edit: and line 55

Thanks for that! corrected the issue.

I'm adding padding but it's not working, for some reason it doesn't add any padding.

dazd
05-16-2011, 11:42 PM
Only way for me to get my text in the position I wanted it, I had to remove all the position absolute from the col div, and add a margin-left:-240px;

I feel like I did more then I was suppose to, just to simply get my text to align on the bottom of the my image.

teedoff
05-16-2011, 11:45 PM
I had to remove all the position absolute

Did you read my post above??


You need to do some reading on Absolutely positioned divs and why they usually get you in trouble and are not needed.

Aurora.Light
05-16-2011, 11:52 PM
why would you have to use negative margins?

if you don't write a script right in the first place, changing it later is going to be a pain

SKY-ProToSs
05-16-2011, 11:59 PM
If this is about the text. Your whole system is probably wrong. There's no need to use any position absolute there. If you have a container, make it the width of the side borders and put position: relative;.

If you have a position absolute div with padding and margin, it wont work.

If you have a position absolute div you use top:; bottom:; left:; right:;

You put position: relative; to change the borders that the absolute div listens to.

If you position: relative; a header div and do position: absolute; bottom: 5px;

It will treat the bottom of the header as the edge of the page and not the bottom of the view.


#container {
background-image:url(images/container-bg2.png);
background-repeat:no-repeat;
height:1600px;
width:100%;
}

YOU MUST HAVE POSITION RELATIVE FOR AN ABSOLUTE DIV!

dazd
05-17-2011, 12:10 AM
why would you have to use negative margins?

if you don't write a script right in the first place, changing it later is going to be a pain

Idk why I would have to use negative margins, that's why I am on coding forums lol. That's the only way I myself could get it to where I wanted it to be.


If this is about the text. Your whole system is probably wrong. There's no need to use any position absolute there. If you have a container, make it the width of the side borders and put position: relative;.

If you have a position absolute div with padding and margin, it wont work.

If you have a position absolute div you use top:; bottom:; left:; right:;

You put position: relative; to change the borders that the absolute div listens to.

If you position: relative; a header div and do position: absolute; bottom: 5px;

It will treat the bottom of the header as the edge of the page and not the bottom of the view.


#container {
background-image:url(images/container-bg2.png);
background-repeat:no-repeat;
height:1600px;
width:100%;
}

YOU MUST HAVE POSITION RELATIVE FOR AN ABSOLUTE DIV!

ok, I added a position:relative; to my container. I had it in there once, I must have removed it. Can you check out my coding so far and tell me if I could change anything to make things easier for myself.

Remember, this is my first time coding a website from scratch. I created it in photoshop and I am slowly working on it. I enjoy doing it very much, but feel like I am doing more than I should be doing.

Aurora.Light
05-17-2011, 12:18 AM
you probably are. I don't see much point in using position absolute here or in most cases, at all. a webpage is divided natural into rows or columns and wrapped with divs. maintain the natural flow!

i pmed you if you need any more help

SKY-ProToSs
05-17-2011, 12:21 AM
you probably are. I don't see much point in using position absolute here or in most cases, at all. a webpage is divided natural into rows or columns and wrapped with divs. maintain the natural flow!

i pmed you if you need any more help

That's true, but you might have to use float or position absolute to get certain effects.

Here I think he wants the text area to be at a certain place in the container.

He only needs to add a margin-top.

Also, I think that he could put a spacer inbetween or something like that, but if the area above the text is going to be blank then it would be best to have a position absolute.

If not then the content above will cause the desired effect.

If that is also not the case then here's a breakdown on several things:

Well, you had a position relative somewhere random, and unless you want something outside the container div, there's no need for two position relatives.

You want one for the container, incase you do decide to have divs positioned with random coordinates.

If you want something outside the container div. You position absolute it and put the div outside the container div.

Think of position absolute as removing a div from the rules of the rest of the elements in the document.

If I have:

<div id="ads">

</div>

<div id="container">

stuff

</div>

#ads {

position: absolute;
top: 0px;
right: 0px;

}

the ad's will now post in the top right corner of the page disregarding the container.

even if the container is:

position: relative;

------

If it's like this:

<div id="container">

<div id="ads">

This div will show up in the top right corner of the container and not the body.

</div>

</div>

------

It is literally that simple and the reason your absolute div ignores the container.

By default, unless you set a width for the container and then a bigger width for the text, it will not overflow. The divs expand for each other until you do that.

So, in your case, the problem is simply that your text div does not need a width or height. The content will expand the div. Your problem is that your container is not position: relative;.

This means that a position absolute div treats it as if it does not exist.

You want to also use min-width and min-height, to avoid div overflow incase you have too much content for the original height to hold.

If you have a 900px height container and a content area that's a 1000px height then it will overflow by 100px.

If you min-height the container, it will stretch. This is not necessarily needed though, because that's by default. You would only use min-height if there is a need to display something like a background beforehand.

Margin generally applies to the left and top side of the page elements. You can't margin bottom. It won't work, because it will just by default stick to the top of the page.

You don't want to use -margins, because then your page is going to get extremely sloppy.

The reason they are used on myspace is because they are purposely there to overlap certain elements.

Padding will stretch the width of a div to the total padding width or height.

If you have 800px on your container and padding: 5px; on another div the new width of your container has now become 810px;

This may cause other errors.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum