d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Student Needs Help With Html5 Forumlas > Padding Forumla, I Forgot It.
123Next
Add Reply New Topic New Poll
Views: 728Replies: 23Track Topic
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
#1
Feb 14 2013 11:31am
So here is what I have so far.

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 -->


My question is what are the formulas for finding out the exact distances needed when using the box model? I can play trial and error with the padding to center my content box but I'd rather know the formula and save time. I tried googling it but I got nothing but crap websites. Does anyone know a link or a location or even know the formulas I would need to know when doing HTML5?
Member
Posts: 11,610
Joined: Oct 28 2008
Gold: 1,795.00
#2
Feb 14 2013 03:59pm
Quote (NinjaSushi2 @ Feb 14 2013 12:31pm)
So here is what I have so far.

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 -->


My question is what are the formulas for finding out the exact distances needed when using the box model? I can play trial and error with the padding to center my content box but I'd rather know the formula and save time. I tried googling it but I got nothing but crap websites. Does anyone know a link or a location or even know the formulas I would need to know when doing HTML5?


There is no "formula" period
ever
never never ever


width: 500px;
margin:0 auto;
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
#3
Feb 14 2013 04:37pm
My professor told me of one but I forgot to write a it down.
Member
Posts: 14,687
Joined: Mar 7 2004
Gold: 1,833.00
#4
Feb 15 2013 01:35am
Quote (NinjaSushi2 @ Feb 14 2013 05:37pm)
My professor told me of one but I forgot to write a it down.


you heard incorrect or he is mis-informed.. or perhaps your wording to your question is unclear... javascript may do this but not html or css..

Quote (0n35 @ Feb 14 2013 04:59pm)
There is no "formula" period
ever
never never ever

width: 500px;
margin:0 auto;


i agree 100% with 0n35's statement.
if the forumla exists i would be curious to see it...
8 year web developer here..

you also have one error that i can spot.

class="large align="center"

close the class="" tag.

This post was edited by Ralphdp on Feb 15 2013 01:38am
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
#5
Feb 15 2013 01:39am
Quote (Ralphdp @ 15 Feb 2013 02:35)
you heard incorrect or he is mis-informed.. or perhaps your wording to your question is unclear... javascript may do this but not html or css..



i agree 100% with 0n35's statement.
if the forumla exists i would be curious to see it...
8 year web developer here..


Oh there is. It's a simple algebraic equation for finding out the difference you need. It's really simple but I just can't remember it! Grr!! I'll let you know Monday when I have night class. Might be in my book somewhere.
8 years is good no doubt but remember he is a college professor with a Master's Degree in this sort of field. Also he is about my dad's age so I'm guess he's in his late 50s no doubt. Probably been doing this since the internet became the internet officially around the 80ish. I'll ask.

Edit: lol yeah someone else pointed that out earlier on OCN. Duelly noted. haha

This post was edited by NinjaSushi2 on Feb 15 2013 01:40am
Member
Posts: 14,687
Joined: Mar 7 2004
Gold: 1,833.00
#6
Feb 15 2013 01:40am
and

hr
{
width:100%;
align:center noshade;

to

hr
{
width:100%;
text-align:center noshade;

is this what you are talking about?

In the W3C CSS box model a block level element’s total width is calculated using the following formula:
total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

im just curious now cause this "formula" that your professor knows could have come in handy...

This post was edited by Ralphdp on Feb 15 2013 01:46am
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
#7
Feb 15 2013 01:40am
Quote (Ralphdp @ 15 Feb 2013 02:40)
and

hr
{
width:100%;
align:center noshade;

to

hr
{
width:100%;
text-align:center noshade;


Oh thanks.
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
#8
Feb 15 2013 01:42am
Do you guys use the tool-box method?
Member
Posts: 14,687
Joined: Mar 7 2004
Gold: 1,833.00
#9
Feb 15 2013 01:45am
Quote (NinjaSushi2 @ Feb 15 2013 02:42am)
Do you guys use the tool-box method?


elaborate please.
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
#10
Feb 15 2013 01:48am
Quote (Ralphdp @ 15 Feb 2013 02:45)
elaborate please.


Well a text file. Whether you use Notepad, word pad, Notepad++, etc. It's a file you name toolBox.txt or whatever you like and you put all you code in there. Such as all your page setup code for index pages, href links, divs, etc. Instead of typing it out you can just copy paste it and it makes writing out the pages faster and safer considering you aren't typing so you have a less chance for error; typos.

Here is the start of my toolbox. Mind you I am only a student so it's not very well developed yet but my professor has strings and strings of coding he can call on.

Edit: I always put the last time I updated it at the very top. Month.Year

Code
<!-- Updated Feb.2013 -->

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

<!--

documentation segment
website:
web page:
author:
date created: month.year

-->

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

<title>title</title>

<style type="text/css">

#wrapper
{
wdith: 950;
margin: 0 auto;
}


#master
{
position: absolute;
padding: 0 em;
border: 1px solid #000;
background-color:#fff;
wdith: 950px;
height: 1000px;
top: 10px;
left: 10px;
}

<!-- The width of the wrapper and the width of the master HAVE to be the same!! -->

</style>

</head>

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

<!-- This is your langauge setting. <html lang="en"> says the language is English -->

<!-- em is a size of measurement. -->


<!-- This is how do do a comment. -->

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

<!-- meta charset="utf-8" is telling the browser you are using a keyboard. (English) -->

<title>title</title>

<head>
</head>


Hope this helps so I can give back to the community.

This post was edited by NinjaSushi2 on Feb 15 2013 01:49am
Go Back To Programming & Development Topic List
123Next
Add Reply New Topic New Poll

© 2003-2026 d2jsp  Contact