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 6 of 6
  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    Can't get rid of the padding

    There is this large gap from the middle content and the left side of the screen. I tweaked lots of stuff and can't get the text to move closer to the left. I want to cut it in half. I attached a picture and outlined the space I want smaller.

    http://www.rodgame.org/projects/photo/
    Attached Thumbnails Attached Thumbnails Can't get rid of the padding-test.jpg  
    Last edited by masterofollies; 03-13-2009 at 03:48 AM.

  • #2
    Regular Coder
    Join Date
    Jan 2005
    Posts
    189
    Thanks
    6
    Thanked 0 Times in 0 Posts
    There is probably a line in your .css file that specifies the page width (looks around 800px) you need to make it wider I'm guessing.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Hello masterofollies,
    #page is the div you want to move, #content will follow when you do.
    First you'll want to clear the floats. Have a look at this code -
    Code:
    #page {
    	width: 760px;
    	margin: 0 auto;
    overflow: auto;
    background: #f00;
    }
    Try it both with and without the overflow:auto; line. To explain how to clear floats that way, have a look at this page - http://www.quirksmode.org/css/clearing.html


    To move it over, change your margins. Right now #page is centered with margin:0 auto; You can move it over with margin:0 0 0 200px; or margin: 0 0 0 30%; ... see what works for you.
    Keep it margin:0 auto; to be centered and make it width:1200px; that will move it over too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    It's all screwed up now.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Yes it is. I did not mean for you to use my numbers... only that you could change those numbers to get the positioning your were looking for.
    Try this instead -
    Code:
     /* Page */
    
    #page {
    	width: 900px;
    	margin: 0 auto;
    overflow: auto;
    }
    
    /* Content */
    
    #content {
    float: left;
    	width: 500px;
    }
    
    /* Post */
    Last edited by Excavator; 03-13-2009 at 02:55 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Ok I played with it for awhile and got it. I used padding-left: 15px and used 70% width.


  •  

    Posting Permissions

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