SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Sindi's Avatar
    Join Date
    Nov 2007
    Location
    Boucherville, Québec
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Fronm left align to Centered

    Hi all:
    I have a current website which is used alot by the skating members and I would like to slightly change the layout from its current 'Left align' to a site that would be centered ... possibly with the center column being flexible?

    I tried by my own but failed miserably. Keep in mind that I'm not a site designer and that I do this as a volunteer so please be gentle. Next phase will be to redo the whole thing and make it mobile friendly. But, in the meantime, this small tweak will make it a little fresher.

    Here is the site http://www.patinageartistiquebourassa.com/
    Here is the css http://www.patinageartistiquebourass...stylepatin.css

    Thank you!
    I used to have an open mind but my brains kept falling out.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Sindhi,

    You could pretty much get what you want by removing the styles in red and adding those in blue. But it might be better just to wait until the site is redesigned. Anyhow, if you try the changes below, keep a copy of the original CSS in case there are problems.

    Code:
    #outer {
    position: relative;
    min-height: 100%;
    margin-top: -55px;
    margin-left: 210px;
    width: 900px;	
    margin: 0 auto;
    border-left: 1px solid rgb(204, 204, 204);
    z-index: 1;
    }
    
    
    #header {
    border-top: 55px solid white;
    margin-left: -211px;	
    position: relative;
    min-height: 0;
    z-index: 999;
    padding: 5px 0 0;
    background: white;
    color: rgb(51, 102, 153);
    }
    
    #sidebar {
    float: left;
    width: 200px;
    position: relative;
    margin-left: -199px;	
    left: -11px;
    }
    
    
    #content {
    float: right;
    width: 100%;
    margin: 0 0 0 -1px;
    position: relative;
    z-index: 1;
    padding-top: 20px;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    This is NOT what i would do, but since this is a "patch" design anyway. This would be a simple to understand fix, in case what Ralph suggested doesn't take.

    1) BACK UP THE SITE ( is always a good idea)
    2) add .center{width: (the width of your site)px; margin:0 auto; position:relative;}
    The footer area already seems to be centered, so we wont worry about it.
    3) Wrap the H1 and P tag in a div with class='center', give the UL inside <div id="top-nav"> class="center", and wrap everything from <div id='sidebar> to <!-- InstanceEndEditable -->
    <div class="clearer"></div> in a div with class='center'

    my review of you site was quite cursory, but that should do it that should do it. Hope it helps.

  4. #4
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sindi View Post
    Hi all:
    I have a current website which is used alot by the skating members and I would like to slightly change the layout from its current 'Left align' to a site that would be centered ... possibly with the center column being flexible?
    This example is centered and has a flexible width center column. Change the widths of the left and right sidebars to whatever you like to fit within the wrapper and the width of the center column automatically adjusts to fill the gap between the left and right sidebars.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 900px;
                    margin: 20px auto 20px auto;
                    border: 1px solid red;
                }
                #sidebarLeft {
                    width: 40%;
                    float: left;
                }
                #sidebarRight {
                    width: 20%;
                    float: right;
                }
                #centerColumn {
                    overflow: hidden;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid blue;
                }
            </style>
        </head>
        <body>
            <div id="wrapper">
                <div id="sidebarLeft">
                    <h1>This is the left sidebar</h1>
                </div>
                <div id="sidebarRight">
                    <h1>This is the right sidebar</h1>
                </div>
                <div id="centerColumn">
                    Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
                    Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
                    pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
                    ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
                    aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor, 
                    volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec 
                    ante sed, ac turpis dis dui vestibulum aut.
                </div>
            </div>
        </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Location
    pune
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Create main whole stucture parent div
    #main-parent-wrapper{
    width:980px;
    height:auto;
    margin:0px auto;
    }

    Thanks


Bookmarks

Posting Permissions

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