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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    having problems centering my site.

    I'm making a web page in dream weaver and am having problems centering my page. In the past, I have used apdiv layers. Using this it is very very easy to place things on my site, things can overlap, and its extremely easy to put together.

    My questions, is there a way to have everything on the page centered, while using apdiv layers. If not what is the best way to center my page? I'm using tables, and it seems impossible to have text over an image when using tables. Can tables overlap? How can I have text over an image thats inside of a table?

    Please help, thank you.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can't help you without a link to your site or your code and the CSS. A link would be better. Help us help you. We aren't psychic.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm asking a general question, from scratch...

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay then. Yes don't use position:absolute if you don't have to. You almost never have to. You should use a containing element around your code and then use margin:auto; to center it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    }
    #container {
    margin:auto; /* this won't work in IE if you don't have a valid full doctype */
    width:780px; /* change this width to suit your needs */
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    <!--rest of code here-->
    </div>
    </body>
    </html>
    You also shouldn't be using tables for page layout. Read the link in my sig titled "Why Tables for Layout is Stupid?". To get text over an image you must set the image as a background image.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so there is no other way to put text over an image, unless its the background image? If I use apdiv layers i can, it just wont be centered correctly. I can create a whole site EXACTLY how I want it using apdiv layers, but it just wont be centered correctly. Is there a way to do this?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What the heck is an apdiv? Explain to us what you think it might be.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Open dream weaver, click the insert tab, then layout objects, then apdiv. It gives you a little blue box, where you can move anywhere, and insert any content.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Ahh. Okay. Yeah that uses absolute positioning. Absolute positioning is NOT the way to go when designing a layout. Most layouts require little or NO absolute positioning. You should take the time to actually learn HTML/CSS so you don't have to rely on a program to do the work for you.

    If you really don't care then you shouldn't be coding web pages but a simple fix would be to still do what I said to do except make the #container position:relative. The absolute positioning will use the nearest relative parent element to use as a reference rather than using the browser window.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Jul 2007
    Location
    Chicago
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have to agree with Aero. I've started to see the light recently with respect to AP DIVs. And crj900, if you think it looks "exactly" right, trying zooming in on it with IE's (admittedly lousy) Zoom function. Your Divs will split apart like a puzzle. AP is easier to implement but the end results are lower quality when taking all browsers into account.

    With Aero's help I just got my site redesigned using default (static) positioning and it flows / degrades / works much better, even though it took some extra effort to get it done vs. AP layouts.

  • #10
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Try applying this code to fully center your site.

    Code:
    <style type="text/css">
    #contentHolder
    {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 500px;
     height: 500px;
     margin-left: -250px; /* always half of width - go figure */
     margin-top: -250px; /* always half the height - go figure */
    }
    </style>
    Of course - it only works if you your width and height - though you can disgard the height section [margin-top, height attributes] if you don't care about it being fully positioned.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #11
    New Coder
    Join Date
    Jan 2006
    Posts
    46
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    ....You also shouldn't be using tables for page layout. Read the link in my sig titled "Why Tables for Layout is Stupid?". To get text over an image you must set the image as a background image.
    Hey Aerospace, thanks for the tips on tables, I am looking to re-do my site and will consider using your tips!



  •  

    Posting Permissions

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