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.

Results 1 to 4 of 4
  1. #1
    Member beans's Avatar
    Join Date
    Jul 2005
    Location
    Melbourne, Australia
    Posts
    66
    Member #
    10559
    I'm so stuck on this. I have tried using a container div with margins of zero and auto, i've tried it with and without text-align center on the body, html, and container, nothing seems to work?!?!

    The only thing I can seem to do to make a page center in Safari is put a single cell table (center aligned) around my content, but this seems like a hack.

    It frustrates me so much that CSS is supposed to make things so easy, yet you have to jump through hoops of fire just to get your page centered!

    Can anybody help? Am i just silly? Is there a dead-obvious, easy answer??
    - gah!

  2.  

  3. #2
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    The margin method teamed with the text-align method should work for virtually all browsers, safari included.. provide a link or paste your mark up and css so i can take a look at exactly whats going on.

    In its most basic form here is how it should be(note that alot of people forget to declare a width for the containing element.

    CSS
    Code:
    body {
        text-align: center;
    }
    
    div#wrap {
        margin: 0 auto;
        text-align: left;
        width: 750px;
    }
    HTML
    HTML Code:
    ..
    </head>
    <body>
        <div id="wrap">
            <!-- your website goes here -->
        </div>
    </body>
    ..


  4. #3
    Member beans's Avatar
    Join Date
    Jul 2005
    Location
    Melbourne, Australia
    Posts
    66
    Member #
    10559
    That's pretty much what I've got
    If it makes any difference, I'm testing it on my computer, not online... but that shouldn't really make a difference should it?

    Here is my CSS:
    Code:
    body {
    	background-color: #FFFFFF;
    	color: #000000;
    	font-size: 10px;
    	font-family: "trebuchet ms",arial,helvetica,sans-serif;
    	text-align: center;
    }
    
    /* PAGE DIVISIONS*/
    
    #container {
    	margin: 0px, auto;
    	width: 800px;
    	text-align: left;
    }
    
    #header {
    	width: 600px;
    	position: relative;
    	float: left;
    	background-color: #778899;
    }
    
    #nav {
    	width: 200px;
    	position: relative;
    	float: left;
    	background-color:#660066
    }
    
    #main {
    	width: 600px;
    	position: relative;
    	float: left;
    	background-color: #FFFF66;
    }
    
    #footer {
    	width: 800px;
    	clear: both;
    	position: relative;
    	background-color: #990000;
    }

    And my page code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    
    <body>
    
    <div id="container">
    
    
    
    <div id="nav">
     Navigation Here               
     
     <ul>
     <li><a href="about.php">About Us</a></li>
     <li><a href="products.php">Products</a></li>
     <li><a href="retail.php">Retail Outlets</a></li>
     <li><a href="info.php">Info</a></li>
     <li><a href="contact.php">Contact Us</a></li></ul>
    </div>
    
    <div id="header">Header goes here</div>
    
    <div id="main">main body text here </div>
    
    <div id="footer">made by beans</div>
    
    
    </div>
    
    </body>
    </html>
    Thankyou for taking the time to help me. I am still just a beginner at this, and I'm doing my best to write good code, not just a whole heap of hacks :rambo: (and just in case anyone is wondering, no, those colours are not the colour scheme )
    - gah!

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Remove the , after 0px, auto. So that container id should look like

    Code:
    #container {
    	margin: 0 auto;
    	width: 800px;
    	text-align: left;
    }
    One more thing, change your doctype to a XHTML Transitional doctype or HTML Strict.

    0 values don't need units after them like 0px. 0px or 0pt or 0em is still 0 whatever the unit is
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


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
  •  

Search tags for this page

center page in safari
,

centering web page on safari

,
centering websites in safari
,
how to automatically center safari page
,
how to center a webpage in safari
,
how to center webpage in safari
,
how to center website in safari
,
safari center page
,
web site centered in safari
,

website not centering on safari

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:58 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com