1. #1
    dask's Avatar
    Registered
    16/02/08
    Location
    Antwerpen City
    Posts
    630
    iTrader
    19 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/5

    plaatsing centrale box

    Ik ben begonnen met het inlezen van verschillende css tutorials om zo op een cleane manier websites te maken.
    Momenteel heb ik een probleempje met de plaatsing van de centrale box die in het midden geplaatst moet worden tussen de linker en rechter box.

    Het zal wel iets eenvoudig zijn, maar ik vind het niet

    style.css
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body{
    	margin: 50;
    	text-align: center;
    	background-color: #FF9;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 62.5%; /* = 10px */
    }
    
    p.groot{
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.4em; /* = 14px */
    }
    
    p.klein{
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.2em; /* = 12px */
    }
    
    li{
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.1em; /* = 11px */
    }
    
    div#main_container{
    margin: 0 auto 0 auto;
    width: 750px;
    text-align: left;
    }
    
    div#header{
    	background-color: #FFE8AA;
    	width: 100%;
    	height: 120px;
    	border: 1px solid grey;
    	border-radius: 15px;
    	-moz-border-radius: 15px;
    }
    
    div#hoznavigation{
    width: 100%
    height: 50px;
    }
    
    div#boxleft{
    background-color: #DEDBD7;
    float: left;
    width: 20%;
    height: 400px;
    border: 1px solid grey;
    border-radius: 15px;
    -moz-border-radius: 15px;
    }
    
    div#boxcenter{
    background-color: #DEDBD7;
    float: left;
    width: 55%;
    height: 400px;
    border: 1px solid grey;
    border-radius: 15px;
    -moz-border-radius: 15px;
    
    }
    
    div#boxright{
    background-color: #DEDBD7;
    float: right;
    width: 20%;
    height: 400px;
    border: 1px solid grey;
    border-radius: 15px;
    -moz-border-radius: 15px;
    } 
    
    div#footer{
    float: left;
    width: 100%;
    height: 20px;
    text-align: center;
    }
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
    </head>
    
    <body>
    <div id="main_container">
    
    <div id="header">beader</div>
    <div id="hoznavigation">hoznav</div>
    <div id="boxleft">boxleft</div>
    <div id="boxcenter">boxcenter</div>
    <div id="boxright">boxright</div>
    <div id="footer">footer</div>
    
    </div> 
    </body>
    </html>
    Linux
    no votes  

  2. #2
    SilverStarke's Avatar
    Registered
    22/08/09
    Location
    heestert
    Posts
    61
    iTrader
    0
    Mentioned
    0 Post(s)
    Hey,

    met de code margin-left: 16px; kan je hem een beetje opschuiven.
    www.Gaming-Solutions.com : Personal Service & Professional Quality
    EA/DICE Lisenced Provider, gamehosting available in 12 countries worldwide, TeamSpeak Authorised Provider
    Gaming-Solutions.com, a part of ViTi Network
    no votes  

  3. #3
    dask's Avatar
    Registered
    16/02/08
    Location
    Antwerpen City
    Posts
    630
    iTrader
    19 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/5
    Dit is inderdaad een manier.
    Nu ik de berekening maak: ((750*0,05)-6)/2= 15.75px

    Maar ik zoek eigenlijk een manier om de "width" van deze box automatisch te laten bepalen, als ik bv een margin-left en margin-right van 2.5% instel. Zodat ik in de toekomst, moest ik nog wat veranderingen aanbrengen, alles vanzelf een beetje aanpast. Een soort van adaptieve box.
    Linux
    no votes  

  4. #4
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144
    Ik begrijp de vraag niet zo goed. Je wil dus 3 divs naast mekaar hebben? boxleft met daarnaast boxcenter en dan boxright?

    Nu nemen alle divs de hele lengt van je parent in. In dit geval dus 750 px van de main div.
    Wil je ze alle 3 naast elkaar dan zal je ze een width moeten meegeven (vb llinks en rechts 150 en de center dan 450, waarschijnlijk nog iets minder omdat je een margin hebt ingesteld en, maar dat moet je dan maar testen.)een display inline-block
    no votes  

  5. #5
    dask's Avatar
    Registered
    16/02/08
    Location
    Antwerpen City
    Posts
    630
    iTrader
    19 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/5
    Mijn excuses voor het onduidelijk zijn, als rookie is het niet gemakkelijk om het uit te leggen.

    Ik wil dus inderdaad 3 divs (in %) met margin naast elkaar, waarvan de middelste automatisch aanpast wanneer ik de linkse of rechtse wat breder/smaller maak; ik zou daarbij het liefst in % werken (moest ik de main div in de toekomst nog aanpassen).
    Linux
    no votes  

  6. #6
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144
    Ja dat werkt ook met % e ipv pixels. Gewoon zien dat je niet met een totaal van over de 100% komt bij de drie divs.
    no votes  

Posting Permissions

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

Log in

Log in