Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Van frames naar divs -> site gecentreerd in het midden

Drewster
4 antwoorden
  • Ik heb een bestaande site die gemaakt is met frames. Nu wil ik deze site ombouwen naar divs en de opmaak doen met css.

    Nu heb ik de volgende code:
    [code:1:95bec0f208]
    <html>

    <head>

    <title>CS Racingteam/title>



    <!–Link naar de stylesheets –>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/lightbox.css" rel="stylesheet" type="text/css" />
    <link href="css/menu.css" rel="stylesheet" type="text/css" />

    </head>

    <body>
    test
    <!–Div waar de gehele site in staat–>
    <div id="container">

    <!– Div met alleen een achtergrond –>
    <div id="links">


    </div>

    <!–Hier staan de top, content en menu in–>
    <div id="midden">

    <!–Hier staat het logo in –>
    <div id="top">

    </div>

    <!–Hier staat de content in –>
    <div id="content">


    </div>

    <!–Hier staat het menu in –>
    <div id="menu">

    </div>

    </div>

    <!– Div met alleen een achtergrond –>
    <div id="rechts">

    </div>


    </div>

    </body>

    </html>
    [/code:1:95bec0f208]

    [code:1:95bec0f208]
    position: absolute of relative???;
    float: right, left????;
    [/code:1:95bec0f208]

    Wat ik mij afvraag is:

    1. Hoe krijg ik al die divs op de juiste plaats?

    2. D.m.v. van het php commando include wil ik de pagina's includen in de content div. Is het ook mogelijk dat ik de content div een bepaalde hoogte geef en de geinclude pagina hoger is dat er een verticale schuifbalk verschijnt? Net zoals bij mijn frames het geval is.
  • Het eerste wat je nodig hebt is een goede DOCTYPE anders gaat het centreren niet in elke browser werken.
    1: redelijk simpel met:[code:1:6f18dc9ae4]#container {
    width: 800px; /*een vaste breedte is verplicht, kan natuurlijk ook in em oid*/
    margin:0 auto;/*auto centreert de site */
    }[/code:1:6f18dc9ae4]Waar je al die andere divs komen is afhankelijk van wat jij "de juiste"plek vindt. Floaten kan absolute of relatief positioneren zou ik niet doen, je kunt veel beter de natuurlijk flow aan houden, margin en padding gebruiken en waar nodig floaten.

    2: ja, dat kan met de css regel "overflow:auto".
  • Bedankt, volgens mij begin ik het nu te begrijpen. Ik ga er gelijk mee aan de slag.
  • Ik ben weer een stapje verder. Ik heb nu een scrollende div en mijn pagina is horizontaal gecentreerd. Nu vraag ik mij alleen af hoe ik de pagina verticaal kan centreren. Ik dacht iets in te stellen met percentages, maar wil dat wel, omdat mijn div's een vaste hoogte hebben?

    De index.php:
    [code:1:da9db2715d]
    <?php
    if(!isset($_GET['page']))
    {
    $page='home';
    }
    elseif(strtolower($_GET['page']) == "index")
    {
    $page='home';
    }
    elseif(!file_exists($_GET['page'] .".php"))
    {
    $page='home';
    }
    else
    {
    $page=$_GET['page'];
    }

    ?>


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="nl">

    <head>

    <title>CS Racingteam</title>

    <meta http-equiv="imagetoolbar" content="no">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!– Popupvenster om de disclaimer te laden –>
    <script language="javascript">
    function popup(url) {
    window.open(url, "", "width=300, height=435, scrollbars=no");
    }
    </script>

    <!– Lightbox script –>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <!– Einde van het Lightbox script –>

    <!–Link naar de stylesheets –>
    <link href="css/main2.css" rel="stylesheet" type="text/css" />
    <link href="css/lightbox.css" rel="stylesheet" type="text/css" />


    </head>

    <body>

    <!–Div waar de gehele site in staat–>
    <div id="container">

    <!–Hier staat het logo in –>
    <div id="header">

    <img src="images/logo.jpg">

    <div>

    <div id="content">
    <?php include($page.".php"); ?>
    </div>

    <div id="menu">

    <a href="?page=home">Home</a>
    <a href="?page=gastenboek">Gastenboek</a>

    </div>

    </div>

    </body>

    </html>


    [/code:1:da9db2715d]


    CSS:
    [code:1:da9db2715d]
    html, body {
    height: 100%; /* héél belangrijk */
    margin: 0px; */
    }

    body { background-image: url(images/blauw.gif) }


    #container {
    width: 800px; /*een vaste breedte is verplicht*/
    margin:0 auto;/*auto centreert de site */
    border: 1px solid #cc0033;
    margin-top: 50px;
    margin-bottom: 50px;
    }

    #header {
    height: 50px;
    width: 800px;


    }

    #content {

    width: 800px;
    height: 400px;
    overflow:auto;

    }

    #menu {
    height: 50px;
    width: 800px;
    background: #cc0033;

    }
    [/code:1:da9db2715d]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.