Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    I know this has been asked quite a few times before but.....
    I have tried googling it and I just don't know how to apply what I have read to my site cohmlaw.com/subsite2
    I would like to center the whole page and have a a green or gray background on either side. I do not know how to apply that to the current css, I had someone do the css for me and the person that did it has yet to get back to me so I really need help, the powers that be want it changed as of yesterday and I'm just confused at this point. Please can someone explain to me and so that it works cross browser and for this design? PLEASE?
    Thank you in advance!
    Q

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Not sure what all this mess is ....

    Code:
        /*html, body, ul, li, input, form, h4, form {
           	margin: 0;
           	padding: 0;
        }*/
    
       * {
       	margin: 0;
           padding: 0;
    }
    
        html, body {
           	height: 100%;
        }
    
        body {
          	font: 11px Tahoma, Geneva, sans-serif;
           	color: #757575;
        }

    Try this.
    I picked an arbitrary width of 850px. You can make it 1000 or whatever.

    Code:
     
    html, body {
    margin:0px auto;
    width:850px;
    font: 11px Tahoma, Geneva, sans-serif;
    color: #757575;
    text-align:center;
    }
    Then, you might need to add a wrapper to control the whole thing ...

    Put this in your CSS file ...

    #wrapper{
    margin:0px auto;
    width:850px;
    }


    And wrap everything in the "wrapper" based on the width you want.

    <body>
    <div id="wrapper">
    .
    . the rest of your site here ...
    .
    </div>
    </body>


  4. #3
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    Quote Originally Posted by mlseim
    Not sure what all this mess is ....
    Thank you! I will give it a shot, As far as the code I know it validates except for the search form I have not figured that out yet I'm having a hard enough time with the other stuff!
    I will have to look at the original css before I started adding any of the content and see if I forgot to delete that mess or if it was originally there.

    Thank you for your help and I will get back to you this afternoon after I give it a shot!:cross-eyed:

    Q

  5. #4
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    Yeah! we're off in the right direction it seems to work in FF and IE now that I added a border, prior to that it only worked in IE. test page
    If I change that code mess at the top and insert your code it does not center so I left it and just changed the wrapper info and it seems to work on my end in IE and FF. but I would really like to understand why that is... this is why I get so confused.
    Also how do I add a color and or background image outside the centered layout? I tried adding a bg color to the wrapper and it did not work it added it inside not outside of it.
    Thank you so much for your help I would be lost without it!:dead:

    Q

  6. #5
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    Quote Originally Posted by suz4x4
    I tried adding a bg color to the wrapper
    Add the colour to the body element, not the wrapper.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    margin: 0;

    was probably enough to trigger the centering with #wrapper.
    and that's because you gave #wrapper a defined width.

    very attractive layout BTW.


  8. #7
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    Quote Originally Posted by mlseim
    margin: 0;

    was probably enough to trigger the centering with #wrapper.
    and that's because you gave #wrapper a defined width.

    very attractive layout BTW.
    First Thank you very much for the compliment! :classic:
    and second so should I just leave the code as is then at the top( ya know the mess) LOL!! also going to give the color thing a shot on the body and see how it looks I think I may like it the way it is. What do you think?
    Thanks!
    Sue

  9. #8
    Senior Member paintingtheweb's Avatar
    Join Date
    Jul 2007
    Location
    Las Vegas
    Posts
    128
    Member #
    15503
    You can center it the way mlseim said (I tried it) and it works ok...but your background images (the ones that repeat to the right) are all located inside the body element itself. When you try and wrap it, it cuts it off. What I would do is to make background images outside of the actual content. ie - make an outer wrapper with the background images and then an inner wrapper with the content. This way no matter where you put your content (ie - centered), the green bars will always extend the entire page. Does that make sense? I've thrown something really quick and dirty together so you can see what I mean. I wouldn't recommend you do it the way I have it done here with the image...because if your content grows, it won't fit anymore, but it should give you and idea at least.

    Anyway - when you open the attachment - I added some things to your css (#outercontainer and #innercontainer) and then in your html (right in between the body tags)

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I would leave it alone.

    I think the white background looks good.

    About the CSS "mess" ... just delete the commented-out parts
    in the body portion between and including /* . . . */

    Nothing wrong with leaving it there ... it just makes it harder to read the code.


  11. #10
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    Quote Originally Posted by paintingtheweb
    You can center it the way mlseim said (I tried it) and it works ok...but your background images (the ones that repeat to the right) are all located inside the body element itself. When you try and wrap it, it cuts it off. What I would do is to make background images outside of the actual content. ie - make an outer wrapper with the background images and then an inner wrapper with the content. This way no matter where you put your content (ie - centered), the green bars will always extend the entire page. Does that make sense? I've thrown something really quick and dirty together so you can see what I mean. I wouldn't recommend you do it the way I have it done here with the image...because if your content grows, it won't fit anymore, but it should give you and idea at least.

    Anyway - when you open the attachment - I added some things to your css (#outercontainer and #innercontainer) and then in your html (right in between the body tags)
    Yikes that confuses me, I am a simpleton when it comes to this as of yet.
    I think as long as it seems to be working the way it is I could leave it right?
    I have not tried it in anything other than IE or FF I think our target clients would most likely use IE though.
    I will check out what you have done to see if I get what you mean, Thank you for your help as well! really without a forum like this I would be back in the dark ages, with you guys here I think I may be starting to see the light!:laugh: LOL!!!!!
    Q


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:02 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com