Thread: plaatsing centrale box
-
05-10-2012, 21:12 #1Member
- 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>
Linuxno votes
-
-
05-10-2012, 22:35 #2
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 Networkno votes
-
05-10-2012, 23:27 #3Member
- 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.Linuxno votes
-
06-10-2012, 13:15 #4Member
- 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-blockno votes
-
06-10-2012, 20:22 #5Member
- 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).Linuxno votes
-
06-10-2012, 21:43 #6Member
- 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
