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 8 of 8

Thread: DIV Center

  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy DIV Center

    Hello,

    I知 doing a website for one of my girlfriends and I知 having a hard time aligning my content in the middle.
    Any help is greatly appreciated!

    See: Website

    You値l notice a menu at the bottom that loads content into an 殿bsolute positioned DIV above.
    I壇 like this content to be centered.

    Please advise <3

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    there are various ways of doing it and I think everybody has their favorite, but what I have found to be simplest is the following:

    - take the width of your div class (in this case 800px)
    - move the left edge of the div to the midway point of the screen (left: 50%;)
    - move the div back to the left by half its width (margin-left: -400px;)

    it should be centered, regardless of screen width.

    but if the screen is less than 800px wide, then the fun starts
    Last edited by xelawho; 12-23-2010 at 12:46 AM.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello LillyB1983,
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    Your .fadecontentwrapper already has a width so adding margin: 0 auto; to that will center it.

    But the content doesn't follow along with it because it's absolutely positioned. Do you really need ap there? Have a look at the pitfalls of absolute positioning.

    Adding position: relative; to .fadecontentwrapper will make the ap elements it contains position themselves relative to .fadecontentwrapper instead of the body of the document.

    You get the scrollbars because you add padding to 800px width .fadecontent. The box model shows how what you put in a container must not exceed the size of that container - margin/padding/border all count when figuring total width.
    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 xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    ... but then Excavator's method would seem to be simpler still

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the replies.

    @Excavator

    When I take out the position:absolute; tag from my .fadecontent the fade script seizes to work and "stacks" my content on top of each other. Any idea why?

    Site Link Updated:

    I've gone ahead and put a 900px width and auto R/L margins on my .fadecontentwrapper and this seems to work except let's say you click a new link and want to go back to the indexed link ("Collection") I see a bit of the other divs content underneath it.

    Ultimately I want each div centered perfectly to the logo at the bottom with no overlap. Your time/patience is greatly appreciated with this! Thank You!!

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Resolved

    Ahh I think I figured it out. I needed to set the width of my wrapper div and the height of my content div.

    Seriously thank you! Huge help.


    Updated Link

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    glad you got it sorted.

    just took a quick look at your css.

    I know it wasnl;t your question but, you can simplify the links css at the end with

    Code:
    a:link, a:visited, a:hover, a:active {
    	color: #000000;
    	text-decoration: none;
    }
    
    a:hover {
    	text-decoration: underline;
    	color: #000000;
    }
    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You could benefit from using the vaildators too. Have a look at the links about validation in my sginature line.

    Fix your mix-n-matched DocType by making the top of your document look like this -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>K R E B S B A C H</title>
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/contentfader.js"></script>
    Then you can should be able to look at each error found by the validator and fix it without much trouble.
    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


  •  

    Posting Permissions

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