Advanced Search

Results 1 to 9 of 9

Thread: Centering content

  1. #1
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Centering content

    I've looked through many posts with the search item "center" and have not been able to find the answer I am looking for.

    The skinny of it is this... I'm building a friend a website, and I need the main content to center just like the msn.com website.

    I will be using the same page layout for nearly every page, so this of course is important. I just started, but here is the link to the page in question: http://www.sierramobilesound.com/caraudio.shtml

    One side note, I've used absolute positioning for nearly everything, so I'm wondering if I will need to apply the answer to every div, or work it out where they are relative to each other within the #content div?

    Here is my current CSS page:

    Code:
    /*This is the main CSS sheet for format of all pages appearance*/
    
    body {
    background-color: #000000;
    background-image: url(images/fade.jpg);
    background-repeat: repeat;
    }
    
    #content {
    position: absolute;
    top: 0em;
    background-color: #fcfffb;
    max-width: 745px;
    min-width: 745px;
    }
    
    
    #bookmark {
    position: absolute;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: .8em;
    color: #560169;
    text-align: right;
    top: 1em;
    right: 1em;}
    
    #bookmark a:link {
    color: #560169;}
    
    #bookmark a:visited {
    color: #560169;}
    
    #bookmark a:hover {
    color: #ce01f6;}
    
    #navi {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    right: 1em;}
    
    #navtext {
    max-width: 580px;
    position: absolute;
    top: 166px;
    left: 123px;
    background-color: #929292;
    min-width: 580px;
    min-height: 209px;
    text-indent: 9px;}
    
    #infobox {
    position: absolute;
    min-height: 250px;
    background-color: #000000;
    top: 420px;
    min-width: 650px;
    color: #ffffff;
    text-indent: 10px;
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    padding-right: 1em;
    max-width: 650px;
    left: 58px;}
    
    
    h1 {
    font-size: 1em;
    text-align: center;
    margin-bottom: -1em;
    }
    
    
    h2 {
    font-size: 1em;
    text-align: center;
    }
    
    p {
    font-size: .8em;
    text-align: justify;}
    
    a {}
    
    a:link {
    color: #061745;
    text-decoration: none;}
    
    a:visited {
    color: #061745;
    text-decoration: none;}
    
    a:hover {
    color: #76b4d1;
    text-decoration: underline;}
    
    a:active {}
    
    #counter {
    position: absolute;
    top: 900px;
    right: 5%;
    display: none;}
    Thanks in advance for any help!!!

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    You can do a general contain all container dix if you like, or just add to the body rule:

    Code:
    text-align:center;
    Then when ever you want the text to align correctly in that div rule put:

    Code:
    text-align: left;
    Also... this line in your HTML:

    HTML Code:
    <a href="http://www.sierramobilesound.com/sitemap.shtml" <span>Site Map</span></a><span>~~</span>
    Is missing the closing ">" for the anchor tag
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    Sliight (02-24-2008)

  4. #3
    Join Date
    Nov 2007
    Posts
    346
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry if I am hijacking this thread, but I have the same question, I want to center this page like msn.com too. Can anyone tell me how to center it please? http://www.afesports.com/indexxxxx.php

    Thanks!

  5. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by afe View Post
    Sorry if I am hijacking this thread, but I have the same question, I want to center this page like msn.com too. Can anyone tell me how to center it please? http://www.afesports.com/indexxxxx.php

    Thanks!

    Did you read the response? It's the same answer for ANY site.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  6. #5
    Join Date
    Nov 2007
    Posts
    346
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well yes, I entered "text-align:center;" into the body section and it's still the same. Thanks!

  7. #6
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    So I placed this in the body tag of my CSS... is this what you meant to do? If that is what you wanted me to do, it doesn't appear to have done anything on the page. I'm guessing since it didn't work I've placed it in the wrong spot...

    I probably should have mentioned I'm very inexperienced at CSS and HTML... everything I've learned have been from a couple tutorials, here, and just fiddling with crap.

    Code:
    body {
    background-color: #000000;
    background-image: url(images/fade.jpg);
    background-repeat: repeat;
    text-align: center;}
    In addition... you mentioned I missed the "/>" in that HTML? I looked at it and I thought I had it correct... the additional span with the ~~ is just for spacing and will blend when I adjust the color. Is it really incorrect?

    Thank you!

  8. #7
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Okay, depends on the starting layout, and I will be the first to admit that I didn't take a real close look at your file.

    We will work with a container div. Should help out. Leave the body { rule as you have it.

    Then add this:

    Code:
    #wrapper {
        margin: 2em auto auto auto;
        text-align: left;
        width: 900px;
        position: relative;
    }
    Then in the html file just after the <body> tag put this:

    Code:
    <div id="wrapper">
    then just before the </body> tag close the wrapper div:

    Code:
    </div>
    You will have to fiddle with the width and margins of the wrapper rules to suit your needs, but this should get it started.

    as for the anchor you have this:

    Code:
    <a href="http://www.sierramobilesound.com/sitemap.shtml" <span>Site Map</span></a><span>~~</span>
    note my change in red below:

    Code:
    <a href="http://www.sierramobilesound.com/sitemap.shtml"> <span>Site Map</span></a><span>~~</span>
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  9. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    Sliight (02-24-2008)

  10. #8
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Sweet that worked. Thank you Sooooo much. I'm the type of person who can't stop working on something when I can't figure it out. Not as bad as Monk, but would have spent my day messing with it. Now I can move on.

    I see what you meant by the anchor now... guess I hadn't noticed since the browsers seemed to fix on their own. Closed it up though.

    Thanks again for your help!

  11. #9
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Not as bad as Monk
    As long as you aren't scared of milk...

    Glad it is working for you!
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

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
  •