Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Apr 2011
    Posts
    143
    Thanks
    3
    Thanked 1 Time in 1 Post

    Why does certain padding and margin not work?

    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?

  • #2
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Could you post your code and/or a link to the page you're having trouble with?
    "Yeah science!"
    Online Science Tools

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    143
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by djh101 View Post
    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.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by dazd View Post
    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.
    Last edited by teedoff; 05-16-2011 at 08:44 PM.
    Teed

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    also line 57 of your source code...
    class"port"...
    should be class="port"

    Edit: and line 55
    Last edited by alykins; 05-16-2011 at 08:43 PM.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You need to do some reading on Absolutely positioned divs and why they usually get you in trouble and are not needed.
    Teed

  • #8
    Regular Coder
    Join Date
    Apr 2011
    Posts
    143
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by alykins View Post
    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)
    Quote Originally Posted by alykins View Post
    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.

  • #9
    Regular Coder
    Join Date
    Apr 2011
    Posts
    143
    Thanks
    3
    Thanked 1 Time in 1 Post
    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.

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #11
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    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

  • #12
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.
    Code:
    #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!
    Last edited by SKY-ProToSs; 05-17-2011 at 12:03 AM.

  • #13
    Regular Coder
    Join Date
    Apr 2011
    Posts
    143
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Aurora.Light View Post
    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.

    Quote Originally Posted by SKY-ProToSs View Post
    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.
    Code:
    #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.

  • #14
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    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

  • #15
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Aurora.Light View Post
    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.
    Last edited by SKY-ProToSs; 05-17-2011 at 12:30 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •