Skip navigation
Currently Being Moderated

center container problem

Apr 13, 2012 6:37 AM

Tags: #cs5 #dreamweaver #code

Hi,

 

I wanted to rebuild an existing site which I've made a few years ago, but I can't find where I'm going wrong.

 

The site www.tandzorgbelfort.nl was first made with tables, and now I made div's.

The page with div's which is going wrong is http://www.tandzorgbelfort.nl/aften_alg.html

As you can see the container is 1200px. Te headers, menu, content, footer, info div are positioned at the left. This must me center.

I've allready tried some changes in the css, but I don't see it anymore.

See the rest of the site how it has to look finaly. http://www.tandzorgbelfort.nl/behandelingen.html

 

Can someone help me?

Thanks!

Carla

 
Replies
  • Currently Being Moderated
    Apr 13, 2012 7:46 AM   in reply to Carla Leliveld

    Hello Carla,

     

    You need to rethink your approach to your design using CSS instead of using tables. There are some very good tutorials available some of which can be found here http://forums.adobe.com/thread/492638

     

    To give you an idea, copy and paste the following into a new document and view in your favourite browser

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    html {
        margin: 0;
        padding: 0;
        background-color: #222222;
        height: 100%;
        overflow-y: scroll;
    }
    body {
        width: 1200px;
        margin: auto;
        background-image: url(http://www.tandzorgbelfort.nl/images/ag_vragen.gif);
        height: 100%;
    }
    .header {
        height: 170px;
    }
    .nav {
        height: 35px;
    }
    .article {
        font-size: 0.8em;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 17px;
    }
    .article .featurebox {
        width: 325px;
        float: left;
        background-color: #FFF;
        border: 1px solid #F00;
        padding: 10px;
    }
    .article .featurebox.left {
        margin: 20px 100px 20px 150px;
    }
    .article .featurebox.right {
        margin: 20px 150px 20px 100px;
    }
    </style>
    </head>
    
    <body>
    <div class="header"></div>
    <div class="nav">MenuBar</div>
    <div class="article">
        <div class="featurebox left">
          <p align="justify">Aften</p>
        <p align="justify">Wat zijn aften?</p>
        <p align="justify">Sommige   mensen worden    regelmatig geplaagd door pijnlijke zweertjes in de   mond. Deze zweertjes,    aften, komen zowel voor bij jongeren als bij   volwassenen. De oorzaak is    niet helemaal duidelijk, maar ze richten   geen blijvende gezondheidsschade    aan.</p>
        <p>Aften zijn blaasjes of    zweertjes in de mond   met een doorsnede van drie tot vier millimeter. Het zijn    grijswitte   of dikke gele plekjes met een rode ontstoken rand. Aften    verschijnen   aan de binnenkant van de lippen, wangen of onder de tong. Ze    bezorgen   een stekende pijn tijdens het eten van zuur of heet voedsel. Sommige      mensen voelen een afte van te voren aankomen. Ze herkennen het   pijnlijke    gevoel wat erbij hoort. Soms ziet ook het mondslijmvlies   rood. </p>
      </div>
        <div class="featurebox right">
          <p align="justify">Aften</p>
        <p align="justify">Wat zijn aften?</p>
        <p align="justify">Sommige   mensen worden    regelmatig geplaagd door pijnlijke zweertjes in de   mond. Deze zweertjes,    aften, komen zowel voor bij jongeren als bij   volwassenen. De oorzaak is    niet helemaal duidelijk, maar ze richten   geen blijvende gezondheidsschade    aan.</p>
        <p>Aften zijn blaasjes of    zweertjes in de mond   met een doorsnede van drie tot vier millimeter. Het zijn    grijswitte   of dikke gele plekjes met een rode ontstoken rand. Aften    verschijnen   aan de binnenkant van de lippen, wangen of onder de tong. Ze    bezorgen   een stekende pijn tijdens het eten van zuur of heet voedsel. Sommige      mensen voelen een afte van te voren aankomen. Ze herkennen het   pijnlijke    gevoel wat erbij hoort. Soms ziet ook het mondslijmvlies   rood. </p>
      </div>
    </div>
    </body>
    </html>

     

    Hup Holland Hup

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 8:56 AM   in reply to Carla Leliveld

    Does it help if you change this:

     

     

    #container {
        margin: 0;

        padding-top: 0;

        vertical-align: top;

        width: 1200px;

    }

     

    to this:

     

    #container {

        margin: 0 auto;

        padding-top: 0;

        vertical-align: top;

        width: 1200px;

     

    }

     

    Martin    

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 9:04 AM   in reply to Carla Leliveld

    Hi again,

     

    Try adding the following to just above the </head> tag

     

    <style>
    html {
        height: 100%;
        background-color: #333333;
    }
    body {
        width: 1200px;
        margin: auto;
        height: 100%;
    }
    </style>

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2012 8:02 AM   in reply to Carla Leliveld

    @Carla,

     

    In augutus zijn wij in Elburg, 50 jarig jubileum van Veluwestrandbad.

     

    Hopen op mooi weer.

    Ben a.k.a Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points