d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Question On Padding Vs. Left > Same Thing?
123Next
Add Reply New Topic New Poll
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
Feb 16 2013 10:52pm
So here is my code.

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


So is where I have left the same ad padding? Because if I put left 25 pixels, it will center my content. The master width is 1000px and the content being 950px leaves me with a push of 25px left and a remainder of 25 on the right. So when would one use padding as padding only seems to effect the left side of my boarder/content box?

Thanks.

Edit: Wait.. It would be 950+2 border so my left would have to be 24px correct?

This post was edited by NinjaSushi2 on Feb 16 2013 10:57pm
Member
Posts: 11,610
Joined: Oct 28 2008
Gold: 1,795.00
Feb 17 2013 12:18am
Not too hard to get the gist of things from trying them out...
If you choose the padding or margin property, whatever item you're using the left property on will push the content to the left of it to the right side of it, making it all the way to the left
when you use just the left property then the content will go through normally as if not affected by the left property


now do as I said in the last post on your topic and don't do what you're doing here...while trying to find the exact values of things there will be cross-browser compatibility issues
simply do

Code
#content
{
border: 1px solid #000;
background-color:#fff;
width: 950px;
height: 800px;
top: 140px;
margin:0 auto;
}
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
Feb 17 2013 12:55am
Quote (0n35 @ 17 Feb 2013 01:18)
Not too hard to get the gist of things from trying them out...
If you choose the padding or margin property, whatever item you're using the left property on will push the content to the left of it to the right side of it, making it all the way to the left
when you use just the left property then the content will go through normally as if not affected by the left property


now do as I said in the last post on your topic and don't do what you're doing here...while trying to find the exact values of things there will be cross-browser compatibility issues
simply do

Code
#content
{
border: 1px solid #000;
background-color:#fff;
width: 950px;
height: 800px;
top: 140px;
margin:0 auto;
}


I tried what you said but it moved my entire content to the top of the wrapper.

Code
#content
{
position: absolute;
padding: 0px;
border: 1px solid #000;
background-color:#fff;
width: 950px;
height: 800px;
top: 115px;
left: 24px;
}


Now this on the other hand worked for me. The 24px left pushed my content right and left an even margin to the right of the content.
Member
Posts: 13,425
Joined: Sep 29 2007
Gold: 0.00
Warn: 20%
Feb 17 2013 01:11am
time to learn about liquid designs imo
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
Feb 17 2013 01:34am
Quote (AbDuCt @ 17 Feb 2013 02:11)
time to learn about liquid designs imo


I am restricted at what I can use by the instructor though. I have to build my pages off the lessons being taught so I have to prove I can do A before I'm allowed to do B. If you get my drift.

Edit: Besides this is only my first real web development course and I'm only a few weeks into it.

This post was edited by NinjaSushi2 on Feb 17 2013 01:40am
Member
Posts: 11,610
Joined: Oct 28 2008
Gold: 1,795.00
Feb 17 2013 09:25am
Quote (NinjaSushi2 @ Feb 17 2013 01:55am)
I tried what you said but it moved my entire content to the top of the wrapper.

Code
#content
{
position: absolute;
padding: 0px;
border: 1px solid #000;
background-color:#fff;
width: 950px;
height: 800px;
top: 115px;
left: 24px;
}


Now this on the other hand worked for me. The 24px left pushed my content right and left an even margin to the right of the content.


I'd have to see your entire code
Member
Posts: 14,687
Joined: Mar 7 2004
Gold: 1,833.00
Feb 19 2013 03:19pm
i think your confusing a few fundamentals here or your wording is still off...

the method you are trying to use is outdated and non cross browser compliant... (whether your professor with 50 years experience wants to admit that or not.. there are ways to avoid using this outdated method..) I have to agree with On35 on this one..

your professor needs to teach you how the browsers also render the code..
right now your jogging before you can walk..

http://en.wikipedia.org/wiki/Trident_(layout_engine) (Internet Explorer, their standards are shit and they needed to overhaul their engine since day one, even today they still have issues...)
http://en.wikipedia.org/wiki/Gecko_(layout_engine) (Firefox and a few others, they used high standard rendering engine.. code rendering is flawless)
http://en.wikipedia.org/wiki/WebKit (Safari, Opera, Chrome, code rendering is near flawless)

And please for the love of God if your using Internet Explorer to do your projects and development UPGRADE to the latest version or use Chrome/Firefox ... (your professor should also teach you about the headaches of Internet Explorer and how it renders code different from all the other web browsers)

http://www.sitesketch101.com/i-hate-internet-explorer/
http://edition.cnn.com/2009/TECH/08/06/internet.explorer.six/ (many of the same issues persist till today in Ie9 - Ie10... ie6 was the bottom of the iceberg)

Also learning to reset default browser css rendering..
http://meyerweb.com/eric/tools/css/reset/


This is how I would write this code.. (forgetting old outdated techniques)

Code
<style>
#master{
width: 1000px;
margin:0 auto;
}

#content
{
margin:140px 0 auto;
padding: 0px;
border: 1px solid #000;
background-color:#fff;
width: 950px;
height: 800px;
margin:0 auto;
}
</style>

<div id="master">
<div id="content">
</div>
</div>


You really don't need a master container.
In fact you can remove all traces of it.. Unless you need that there for some other reason that I don't see..

If indeed this is the effect you are trying to get...

This is what I am understanding from your question.

Why don't you post your ENTIRE code..

I hope this made sense...
He is unfortunately teaching you a programming lesson that is outdated and that needs to be scrapped.

This post was edited by Ralphdp on Feb 19 2013 03:21pm
Member
Posts: 11,610
Joined: Oct 28 2008
Gold: 1,795.00
Feb 19 2013 04:49pm
Quote (Ralphdp @ Feb 19 2013 04:19pm)

He is unfortunately teaching you a programming lesson that is outdated and that needs to be scrapped.


OP is a little ignorant in this area.
Member
Posts: 35,456
Joined: Jan 25 2009
Gold: 1,173.00
Feb 19 2013 10:38pm
Quote (0n35 @ 19 Feb 2013 17:49)
OP is a little ignorant in this area.


OP made an A on his assignment. All that matters. Still learning.

Quote (Ralphdp @ 19 Feb 2013 16:19)
i think your confusing a few fundamentals here or your wording is still off...

the method you are trying to use is outdated and non cross browser compliant... (whether your professor with 50 years experience wants to admit that or not..  there are ways to avoid using this outdated method..) I have to agree with On35 on this one..

your professor needs to teach you how the browsers also render the code..
right now your jogging before you can walk..

http://en.wikipedia.org/wiki/Trident%5F(layout%5Fengine) (Internet Explorer, their standards are shit and they needed to overhaul their engine since day one, even today they still have issues...)
http://en.wikipedia.org/wiki/Gecko%5F(layout%5Fengine) (Firefox and a few others, they used high standard rendering engine.. code rendering is flawless)
http://en.wikipedia.org/wiki/WebKit (Safari, Opera, Chrome, code rendering is near flawless)

And please for the love of God if your using Internet Explorer to do your projects and development UPGRADE to the latest version or use Chrome/Firefox ... (your professor should also teach you about the headaches of Internet Explorer and how it renders code different from all the other web browsers)

http://www.sitesketch101.com/i-hate-internet-explorer/
http://edition.cnn.com/2009/TECH/08/06/internet.explorer.six/ (many of the same issues persist till today in Ie9 - Ie10... ie6 was the bottom of the iceberg)

Also learning to reset default browser css rendering..
http://meyerweb.com/eric/tools/css/reset/


This is how I would write this code.. (forgetting old outdated techniques)

Code
<style>
#master{
width: 1000px;
margin:0 auto;
}

#content
{
margin:140px 0 auto;
padding: 0px;
border: 1px solid #000;
background-color:#fff;
width: 950px;
height: 800px;
margin:0 auto;
}
</style>

<div id="master">
<div id="content">
</div>
</div>


You really don't need a master container.
In fact you can remove all traces of it.. Unless you need that there for some other reason that I don't see..

If indeed this is the effect you are trying to get...

This is what I am understanding from your question.

Why don't you post your ENTIRE code..

I hope this made sense...
He is unfortunately teaching you a programming lesson that is outdated and that needs to be scrapped.


This is a basic class that I need for my programming degree. We learned html and now progressing to css and might touch on php later. Who knows.
Member
Posts: 13,425
Joined: Sep 29 2007
Gold: 0.00
Warn: 20%
Feb 19 2013 10:42pm
Quote (NinjaSushi2 @ Feb 20 2013 12:38am)
OP made an A on his assignment. All that matters. Still learning.



This is a basic class that I need for my programming degree. We learned html and now progressing to css and might touch on php later. Who knows.


that must be a pretty useless programming degree
Go Back To Programming & Development Topic List
123Next
Add Reply New Topic New Poll