Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML5 Formulas. (Is there a website for the different formulas?)
New Posts  All Forums:Forum Nav:

HTML5 Formulas. (Is there a website for the different formulas?)

post #1 of 4
Thread Starter 
I was wondering if anyone knew off the top of their head the formula for finding the padding required to make everything even when using the box model. I can't seem to get my #content lined up with my #master.

Code:
<!DOCTYPE html>
<html lang="en">

<!--
        documentation segment
        website: Kelly's Island
        web page: index.htm
        author: manderson
        date created: feb.2013
-->

<head>
<meta charset="utf-8">

<title>Kelly's Island</title>

<style type="text/css">

#wrapper
{
        width: 1000px;
        margin: 0 auto;
}

#master
{
        position: absolute;
        padding: 0px;
        border: 1px solid #000;
        background-color:#fff;
        width: 1000px;
        height: 1100px;
        top: 10px;
}

#header
{
        position: absolute;
        padding: 13px;
        border: 1px solid transparent;
        background-color:#fff;
        width: 950px;
        height: 60px;
        top: 10px;
        left: 10px;
}

#navigation
{
        position: absolute;
        padding: 13px;
        border: 2px solid transparent;
        background-color:#fff;
        width: 950px;
        height: 25px;
        top: 85px;
        left: 10px;
}

#content
{
        position: absolute;
        padding: 13px;
        border: 1px solid #000;
        background-color:#fff;
        width: 950px;
        height: 800px;
        top: 140px;
        left: 10px;
}

#footer_left
{
        position: absolute;
        padding: 13px;
        border: 2px solid #606060;
        background-color:#606060;
        width: 610px;
        height: 100px;
        top: 965px;
        left: 10px;
}

/*

#footer_right
{
        position: absolute;
        padding: 10px;
        border: 1px solid #606060;
        background-color:#606060;
        width: 300px;
        height: 80px;
        top: 965px;
        left: 620px;
}

*/

a
{
        font-family:Trebuchet MS;
        font-size:1em;
        margin:1em;
        font-weight:900;
        text-decoration:none;
}

a:link, a:visited, a:active
{
        color:#000;
}

a:hover
{
        color:#c0c0c0;
}

.large
{
        font-family:Trebuchet MS, Helvetica, sans-serif;
        font-size:2em;
        font-style:normal;
        font-weight:900;
        text-align:center;
        background:#fff;
        color:#000;
}       

hr
{
        width:100%;
        align:center noshade;
        border-bottom:2px solid #000;
}


</style>

</head>

</body>


<div id="wrapper" align="center"><!-- begin wrapper -->

<div id="master" align="center"><!-- begin master -->

<div id="header" class="large align="center"><!-- begin header -->

Kelly's Island

<hr />

</div><!-- end header -->

<div id="navigation" align="center"><!-- begin navigation -->

<!-- <a href="#">History</a> -->

<a href="index_files/history.htm">History</a>

<hr />

</div><!-- end navigation -->

<div id="content" align="center"><!-- begin content -->

</div><!-- end content -->
Project DayZ
(20 items)
 
   
MotherboardGraphicsGraphicsGraphics
G1.Sniper 3 AMD Radeon HD 7900 Series AMD Radeon HD 7900 Series AMD Radeon HD 7900 Series 
RAMMonitorKeyboardPower
Trident X Catleap Q270 Ducky Shine II Brown MX / Orange LED 1000W Seasonic Platinum 
CaseOtherOtherOther
NZXT Switch 810 Mayhem's DT5Noz CPU Block Alphacool 480x86mm NexXxos Monsta Radiator Alphacool Full VPP655 Pump 
OtherOtherOtherOther
Scythe Kaze Master Pro Fan Controller MDPC-X Sleeving Kit. (Green and Black sleeving) Custom Parts Everywhere Other - Tons of misc items. 
OtherOtherOtherOther
AKG Q701 3x7970 Swiftech Komodo GPU Blocks Customer Made FrozenQ Reservoir Hardware Labs 420 GT Stealth Radiator 
CPUMotherboardGraphicsGraphics
i5-2550k z77 mpower msi 770 lightning msi 770 lightning 
RAMHard DriveHard DriveHard Drive
Mushkin Radioactive 8GB (2 x 4GB) DDR3-1600 Memory Western Digital Caviar Black Western Digital VelociRaptor Samsung 830 
Optical DriveCoolingCoolingCooling
LG UH12nS29 Blu-Ray Reader Alphacool NexXxoS UT60 Full Copper 360mm Alphacool NexXxoS UT60 Full Copper 240mm Alphacool NexXxoS XP³ Light - Acetal Edition - ... 
CoolingCoolingCoolingCooling
Bitspower Water Tank Z-Multi 250 - Full Clear A... Alphacool VPP655 (Laing D5) - With D5 High Flow... EK-FC680 GTX Lightning - Acetal + Nickel EK-FC680 GTX Lightning - Acetal + Nickel 
PowerCaseAudioOther
Silverstone Strider Gold Evolution 750W Silverstone TJ07 ASUS Xonar Essence STX Cougar Vortex 
OtherOtherOtherOther
Cougar Vortex Cougar Vortex Cougar Vortex Cougar Vortex 
  hide details  
Reply
Project DayZ
(20 items)
 
   
MotherboardGraphicsGraphicsGraphics
G1.Sniper 3 AMD Radeon HD 7900 Series AMD Radeon HD 7900 Series AMD Radeon HD 7900 Series 
RAMMonitorKeyboardPower
Trident X Catleap Q270 Ducky Shine II Brown MX / Orange LED 1000W Seasonic Platinum 
CaseOtherOtherOther
NZXT Switch 810 Mayhem's DT5Noz CPU Block Alphacool 480x86mm NexXxos Monsta Radiator Alphacool Full VPP655 Pump 
OtherOtherOtherOther
Scythe Kaze Master Pro Fan Controller MDPC-X Sleeving Kit. (Green and Black sleeving) Custom Parts Everywhere Other - Tons of misc items. 
OtherOtherOtherOther
AKG Q701 3x7970 Swiftech Komodo GPU Blocks Customer Made FrozenQ Reservoir Hardware Labs 420 GT Stealth Radiator 
CPUMotherboardGraphicsGraphics
i5-2550k z77 mpower msi 770 lightning msi 770 lightning 
RAMHard DriveHard DriveHard Drive
Mushkin Radioactive 8GB (2 x 4GB) DDR3-1600 Memory Western Digital Caviar Black Western Digital VelociRaptor Samsung 830 
Optical DriveCoolingCoolingCooling
LG UH12nS29 Blu-Ray Reader Alphacool NexXxoS UT60 Full Copper 360mm Alphacool NexXxoS UT60 Full Copper 240mm Alphacool NexXxoS XP³ Light - Acetal Edition - ... 
CoolingCoolingCoolingCooling
Bitspower Water Tank Z-Multi 250 - Full Clear A... Alphacool VPP655 (Laing D5) - With D5 High Flow... EK-FC680 GTX Lightning - Acetal + Nickel EK-FC680 GTX Lightning - Acetal + Nickel 
PowerCaseAudioOther
Silverstone Strider Gold Evolution 750W Silverstone TJ07 ASUS Xonar Essence STX Cougar Vortex 
OtherOtherOtherOther
Cougar Vortex Cougar Vortex Cougar Vortex Cougar Vortex 
  hide details  
Reply
post #2 of 4
Try W3Schools

Have you tried putting something in the content section then seeing how it looked?

This a school assignment?
Jango (Main Rig)
(23 items)
 
Edward (HTPC)
(16 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7-4790 MSI ATX LGA 1150 Z97 PC MATE mobo MSI GeForce GTX 560 Ti 448 Twin Frozr III PE/OC 16GB 
Hard DriveHard DriveHard DriveHard Drive
OCZ Agility 4 (OS) 1TB Hitachi (Data & Apps) 1TB Hitachi (Movies & other Multimedia) 750GB 
Optical DriveCoolingCoolingCooling
DVD±RW / ASUS USB 2.0 8x Slim external DVD Burner Cooler Master Hyper T4 NZXT Sentry Mix COOLER MASTER SickleFlow 120mm x2 
OSMonitorMonitorMonitor
Windows 10 Pro 64bit ASUS VS247H-P 23.6"  ASUS VH236H 23"  HP 27" 2560x1440 
KeyboardPowerCaseMouse
Logitech Illuminated Keyboard Corsair Professional Series HX850W CM Storm Trooper Razer Tron 
Mouse PadOtherOther
XTRAC Pads Ripper XL Rosewill Red USB 2.0 7 Port Hub With Power Adapter Creative HS-1000 Fatal1ty Gaming Headset 
CPUMotherboardGraphicsRAM
AMD Phenom II X4 920 2.8GHz Socket AM2+ 125W Qu... ASRock A780GXE/128M AM2+/AM2 AMD 780G ATX ATI Radeon HD 4670 G.SKILL 4GB (2 x 2GB) 240-Pin DDR2 SDRAM DDR2 1... 
RAMHard DriveHard DriveCooling
G.SKILL 4GB (2 x 2GB) 240-Pin DDR2 SDRAM DDR2 1... Hitachi 1TB 7200 RPM SATAII 3.0Gb/s Samsung 250GB 7200 RPM Enermax ETS T-40 T.B. SILENCE 
OSMonitorPowerCase
Windows 8.1 Pro 64 bit 47" Sony TV RAIDMAX HYBRID 2 530W Custom Wood Table 
  hide details  
Reply
Jango (Main Rig)
(23 items)
 
Edward (HTPC)
(16 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7-4790 MSI ATX LGA 1150 Z97 PC MATE mobo MSI GeForce GTX 560 Ti 448 Twin Frozr III PE/OC 16GB 
Hard DriveHard DriveHard DriveHard Drive
OCZ Agility 4 (OS) 1TB Hitachi (Data & Apps) 1TB Hitachi (Movies & other Multimedia) 750GB 
Optical DriveCoolingCoolingCooling
DVD±RW / ASUS USB 2.0 8x Slim external DVD Burner Cooler Master Hyper T4 NZXT Sentry Mix COOLER MASTER SickleFlow 120mm x2 
OSMonitorMonitorMonitor
Windows 10 Pro 64bit ASUS VS247H-P 23.6"  ASUS VH236H 23"  HP 27" 2560x1440 
KeyboardPowerCaseMouse
Logitech Illuminated Keyboard Corsair Professional Series HX850W CM Storm Trooper Razer Tron 
Mouse PadOtherOther
XTRAC Pads Ripper XL Rosewill Red USB 2.0 7 Port Hub With Power Adapter Creative HS-1000 Fatal1ty Gaming Headset 
CPUMotherboardGraphicsRAM
AMD Phenom II X4 920 2.8GHz Socket AM2+ 125W Qu... ASRock A780GXE/128M AM2+/AM2 AMD 780G ATX ATI Radeon HD 4670 G.SKILL 4GB (2 x 2GB) 240-Pin DDR2 SDRAM DDR2 1... 
RAMHard DriveHard DriveCooling
G.SKILL 4GB (2 x 2GB) 240-Pin DDR2 SDRAM DDR2 1... Hitachi 1TB 7200 RPM SATAII 3.0Gb/s Samsung 250GB 7200 RPM Enermax ETS T-40 T.B. SILENCE 
OSMonitorPowerCase
Windows 8.1 Pro 64 bit 47" Sony TV RAIDMAX HYBRID 2 530W Custom Wood Table 
  hide details  
Reply
post #3 of 4
What do you mean by I can't seem to get my #content lined up with my #master. Everything looks fine to me. Also you forgot a closing quote on your class for class="large". Also don't forget to close your master and wrapper divs, and you body tag is wrong, you have a closing tag at the top.
Edited by the_dude - 2/14/13 at 12:10pm
My System
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 920 @ Stock Asus P6T ATI HD5870 OCZ 6GB 1333mhz 
Hard DriveHard DriveOptical DriveCooling
Samsung 840 Evo Caviar Black 640GB LG DVD Drive Cm Hyper 212+ 
CoolingOSMonitorPower
Arctic Cooling Accelero Twin Turbo II Windows 7 64bit ASUS VW246H Corsair HX850 
Case
CM 690 II Adavanced 
  hide details  
Reply
My System
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 920 @ Stock Asus P6T ATI HD5870 OCZ 6GB 1333mhz 
Hard DriveHard DriveOptical DriveCooling
Samsung 840 Evo Caviar Black 640GB LG DVD Drive Cm Hyper 212+ 
CoolingOSMonitorPower
Arctic Cooling Accelero Twin Turbo II Windows 7 64bit ASUS VW246H Corsair HX850 
Case
CM 690 II Adavanced 
  hide details  
Reply
post #4 of 4
Thread Starter 
Quote:
Originally Posted by newbrevolution View Post

Try W3Schools

Have you tried putting something in the content section then seeing how it looked?

This a school assignment?

Yes. There was a formula to figure out how much padding you needed when using the box model but I forgot it.
Quote:
Originally Posted by the_dude View Post

What do you mean by I can't seem to get my #content lined up with my #master. Everything looks fine to me. Also you forgot a closing quote on your class for class="large". Also don't forget to close your master and wrapper divs, and you body tag is wrong, you have a closing tag at the top.

Goodness gracious! biggrin.gif My add must have gotten the best of me and I missed it. Thanks.
Project DayZ
(20 items)
 
   
MotherboardGraphicsGraphicsGraphics
G1.Sniper 3 AMD Radeon HD 7900 Series AMD Radeon HD 7900 Series AMD Radeon HD 7900 Series 
RAMMonitorKeyboardPower
Trident X Catleap Q270 Ducky Shine II Brown MX / Orange LED 1000W Seasonic Platinum 
CaseOtherOtherOther
NZXT Switch 810 Mayhem's DT5Noz CPU Block Alphacool 480x86mm NexXxos Monsta Radiator Alphacool Full VPP655 Pump 
OtherOtherOtherOther
Scythe Kaze Master Pro Fan Controller MDPC-X Sleeving Kit. (Green and Black sleeving) Custom Parts Everywhere Other - Tons of misc items. 
OtherOtherOtherOther
AKG Q701 3x7970 Swiftech Komodo GPU Blocks Customer Made FrozenQ Reservoir Hardware Labs 420 GT Stealth Radiator 
CPUMotherboardGraphicsGraphics
i5-2550k z77 mpower msi 770 lightning msi 770 lightning 
RAMHard DriveHard DriveHard Drive
Mushkin Radioactive 8GB (2 x 4GB) DDR3-1600 Memory Western Digital Caviar Black Western Digital VelociRaptor Samsung 830 
Optical DriveCoolingCoolingCooling
LG UH12nS29 Blu-Ray Reader Alphacool NexXxoS UT60 Full Copper 360mm Alphacool NexXxoS UT60 Full Copper 240mm Alphacool NexXxoS XP³ Light - Acetal Edition - ... 
CoolingCoolingCoolingCooling
Bitspower Water Tank Z-Multi 250 - Full Clear A... Alphacool VPP655 (Laing D5) - With D5 High Flow... EK-FC680 GTX Lightning - Acetal + Nickel EK-FC680 GTX Lightning - Acetal + Nickel 
PowerCaseAudioOther
Silverstone Strider Gold Evolution 750W Silverstone TJ07 ASUS Xonar Essence STX Cougar Vortex 
OtherOtherOtherOther
Cougar Vortex Cougar Vortex Cougar Vortex Cougar Vortex 
  hide details  
Reply
Project DayZ
(20 items)
 
   
MotherboardGraphicsGraphicsGraphics
G1.Sniper 3 AMD Radeon HD 7900 Series AMD Radeon HD 7900 Series AMD Radeon HD 7900 Series 
RAMMonitorKeyboardPower
Trident X Catleap Q270 Ducky Shine II Brown MX / Orange LED 1000W Seasonic Platinum 
CaseOtherOtherOther
NZXT Switch 810 Mayhem's DT5Noz CPU Block Alphacool 480x86mm NexXxos Monsta Radiator Alphacool Full VPP655 Pump 
OtherOtherOtherOther
Scythe Kaze Master Pro Fan Controller MDPC-X Sleeving Kit. (Green and Black sleeving) Custom Parts Everywhere Other - Tons of misc items. 
OtherOtherOtherOther
AKG Q701 3x7970 Swiftech Komodo GPU Blocks Customer Made FrozenQ Reservoir Hardware Labs 420 GT Stealth Radiator 
CPUMotherboardGraphicsGraphics
i5-2550k z77 mpower msi 770 lightning msi 770 lightning 
RAMHard DriveHard DriveHard Drive
Mushkin Radioactive 8GB (2 x 4GB) DDR3-1600 Memory Western Digital Caviar Black Western Digital VelociRaptor Samsung 830 
Optical DriveCoolingCoolingCooling
LG UH12nS29 Blu-Ray Reader Alphacool NexXxoS UT60 Full Copper 360mm Alphacool NexXxoS UT60 Full Copper 240mm Alphacool NexXxoS XP³ Light - Acetal Edition - ... 
CoolingCoolingCoolingCooling
Bitspower Water Tank Z-Multi 250 - Full Clear A... Alphacool VPP655 (Laing D5) - With D5 High Flow... EK-FC680 GTX Lightning - Acetal + Nickel EK-FC680 GTX Lightning - Acetal + Nickel 
PowerCaseAudioOther
Silverstone Strider Gold Evolution 750W Silverstone TJ07 ASUS Xonar Essence STX Cougar Vortex 
OtherOtherOtherOther
Cougar Vortex Cougar Vortex Cougar Vortex Cougar Vortex 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML5 Formulas. (Is there a website for the different formulas?)