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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: Alignment Issue

  1. #1
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post

    Alignment Issue

    I'm having an issue with the alignment of my site. Have a look: http://freelancejohn.com/freelancejohn/. The header and portfolio wraps both have the same width (960px), but they aren't aligning (if you look at the sides, you'll see what I'm talking about).

    Any idea why this is happening?

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    That would be your content, buddy. It doesn't fill your entire 960px.

  • #3
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    Any idea what I can do to fix it?

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    I'm sure you can add some more margin space between your sample pics. ^_^

  • #5
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    I don't understand why it has the exact spacing as it did in Photoshop between each image and doesn't turn out right.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    #portfolio h1 {
    color:#545454;
    /*float:left;*/
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    margin-top:13px;
    }
    #recent-work-1{
    ...........
    float:left;
    /*margin-right:20px;*/
    ..........
    }
    #recent-work-2{
    ............
    float:right;
    ..........
    }
    #recent-work-3{
    ..........
    /*float:left;*/
    margin:13px auto 0 auto;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    JJackson (11-08-2010)

  • #7
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Code:
    #portfolio h1 {
    color:#545454;
    /*float:left;*/
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    margin-top:13px;
    }
    #recent-work-1{
    ...........
    float:left;
    /*margin-right:20px;*/
    ..........
    }
    #recent-work-2{
    ............
    float:right;
    ..........
    }
    #recent-work-3{
    ..........
    /*float:left;*/
    margin:13px auto 0 auto;
    }
    Thanks! That fixed the alignment issue. But it created another problem (http://freelancejohn.com/freelancejohn/). Now there's a space between the top background and the middle background.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I don't see any such gap in FF3.6. Which is your browser?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    I don't see any such gap in FF3.6. Which is your browser?
    I'm running the latest stable release of Firefox. Here's a screenshot of the gap... http://screencast.com/t/Ha8u1HaHoyS

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I see the gap. When I disable your background image....the grey image called banbg.png you can see it disappear. You should download and use firebug for firefox....its a great tool that will really help debug such issues.

  • #11
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    Quote Originally Posted by teedoff View Post
    I see the gap. When I disable your background image....the grey image called banbg.png you can see it disappear. You should download and use firebug for firefox....its a great tool that will really help debug such issues.
    Of course it will disappear if you remove the background image... but how does that help me?

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by JJackson View Post
    Of course it will disappear if you remove the background image... but how does that help me?
    It gives you part of the equation that says something is going on between the image and your header...lol...I havent figure out yet what it is, but it should give you something to work with as well.

    Hey just noticed you're in NC too!....cool
    Last edited by teedoff; 11-08-2010 at 09:27 PM.

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Its coming from your <h1> tag...you have a top margin of 13px set. Remove that and you will see.

    I love firebug! lol...As I said, if you download it, you could have found this issue in a matter of minutes. Good luck!

  • Users who have thanked teedoff for this post:

    JJackson (11-08-2010)

  • #14
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    Quote Originally Posted by teedoff View Post
    Its coming from your <h1> tag...you have a top margin of 13px set. Remove that and you will see.

    I love firebug! lol...As I said, if you download it, you could have found this issue in a matter of minutes. Good luck!
    Yup, I'm from NC.

    And thanks for helping. I should have added padding instead of margin.

  • #15
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    Does anyone know why my contact box (located at the bottom of the page) does not line up properly? It's supposed to look like this: http://screencast.com/t/DGGvwnlAUq -- and here's how it looks now: http://freelancejohn.com/freelancejohn.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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