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
    New Coder
    Join Date
    May 2011
    Posts
    13
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Help fixing a bad CSS layout.

    Hi folks..I'm a CSS newbie and am having some difficulty fixing the very bad layout of my site, which I have chosen to use all absolute positioning for and need to fix. I'm having some trouble understanding how to convert some of it to relative to make the layout/css better and cut down on the number of objects on the page. I've read up on CSS generally, but I am getting tripped up attempting to implement it specifically on my page and would love some help recreating it so I can better understand it.

    Here's an example of the page I am talking about:
    http://www.bonch.tv/new/jarrett/index.html

    I know the bottom section with the thumbnails could be better off in relative positioning instead of absolute especially, but once again, I am just having trouble rebuilding it/applying what the layout information sites say.

    Also, ideally I would like to fix the layout so the entire page could be centered in the window, as right now the space on the right is too big in most browser windows, and I don't know if switching most of the things away from absolute positioning would fix this, but it is something I hope could be done as well.

    Any help with my lack of understanding of how to fix this/implement relative positioning (or an alternate to what I have) would be much, much appreciated.

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Location
    USA
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sup man.

    Whoa. Absolute positioning galore. I'm a CSS noob too so I'll try my best


    I apologize in advance for my way of describing code, I can code it but I can't yet explain it in it's proper terms.

    Your CSS needs a total overhaul. IMO a better way to lay out this site would be to set widths and float rather than position.

    Set a width for a main container, and insert all divs into it. This layout is simple enough that you do not have to exclude a container such as one for the header or footer for example because the backgrounds repeat infinitely.

    Set margin: 0 auto to center the page. Also

    Nice clean layout, but I see why it's driving you crazy.

    PM if you need help. I wouldn't mind helping you code it.

  • Users who have thanked subtoneweb for this post:

    AustinB (07-05-2011)

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    http://www.barelyfitz.com/screencast...s/positioning/

    Position: absolute; should be avoided, because it takes an element out of the natural flow of the page. I would suggest using it for position icons or other small items (like a search icon in a search input).

    a fixed layout is normally set to

    Code:
    #page {
     width: 960px;
     margin: auto;
    }
    design wise, your website looks pretty nice.
    Last edited by Sammy12; 07-04-2011 at 06:06 AM.

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    13
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Sub and Sammy--thanks for both of your responses. I will definitely take you up on your offer Sub--I'll PM you for more advice. I understand the container/ float div stuff, I've read about it on the site you sent me Sammy, I just have a hard time understanding how to implement it specifically on my site. Thanks for clearly explaining to me when exactly to use absolute positioning and when not to--and thanks for the compliment about the design from both of you

    If anyone else has any advice about this or anything else to share, please feel free--it would be much appreciated.

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hello ,

    Please do avoid using of position relative and positio:absolute unnecessarily .

    it can be used to add z-index for the element. if we use position absolute and position

    relative then it is difficult to postion all the element and may create browser issues.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Hi,

    the layout is very simple to style it. Please let me know if you want same layout or there will be any change.

    I will share the complete code and also explain to you for your feature work


  •  

    Posting Permissions

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