padding و margin

[dr_csharp]

سلام
ممنون میشم کاربرد padding و margin رو شرح بدین !
یک جایی نوشته بود :
margins set the outwards spacing, and padding the inwards

مثلا :

p {width: 600px; padding: 5px; }

پاراگراف فوق 610 پیکسل جا میگیره ! آیا به height پاراگراف هم 10 پیکسل اضافه میشه ؟

و برای margin :
اگه margin=20px در اینصورت تمام عناصر از تمام جهت های عنصری که این margin براش ست شده باندازه ی 20 پیکسل ازش فاصله دارن !
ولی من تست کردم اینطور نبود !؟

[raravaice]

سلام

padding فاصله ای به سمت داخل ایجاد میکنه
margin فاصله ای به سمت خارج ایجاد میکنه

شما میتونی از :
padding-left
padding-right
padding-top
padding-bottom
و همین موارد برای margin استفاده کنی تا کنترل بیشتری داشته باشی و یا به صورت زیر مقادیر رو بدی :

padding: top right bottom left
و همینطور برای margin و به جای مقادیر top right bottom left فاصله رو بر حسب هر واحدی مشخص کنی.مثلا
padding : 10px 0px 20px 5px

و وقتی که به صورت تکی میگی : padding : 5px یعنی کل اطراف شئی 5px فاصله ایجاد بشه که در اصل برابر است با
padding : 5px 5px 5px 5px

به این نکته هم دقت کن که وقتی از margin استفاده کنی به طول یا عرض المان اضافه میشه ولی padding چون به سمت داخل هست تاثیری بر طول و عرض نمیزاره.

پ.و: استایلهای فوق مقادیر منفی رو نیز پشتیبانی میکنن.

موفق باشید

[dr_csharp]

ممنون ولی من هنوز کامل متوجه نشدم !
سوال من دو قسمت داشت .. اگر ممکنه بیشتر توضیح بدین

مثلا :

<divid="Header"class="header">

here is header</div>

<divid="Body"class="body">

<divid="Menu"class="menu">

here is Menu</div>

<divid="Main"class="main">

here is Main</div>

</div>

<divid="Footer"class="footer">

here is footer

</div>

, اینهم CSS مربوطه :

.body

{

background-color: #cc3300;

position: absolute;

margin:50px;

width: 100px;

height: 200px;

}

.header

{

background-color: #292929;

color: Red;

position: absolute;

top: 10px;

left: 10px;

height: 20px;

width: 100px;

padding: 10px;

padding-right: 20px;

}

.menu

{

color: #0099CC;

float: right;

}

.main

{

float: right;

}

.footer

{

background-color: Orange;

color: Green;

position: absolute;

bottom: 10px;

left: 10px;

height: 20px;

width: 100px;

padding: 10px;

padding-right: 20px;

}

الان margin در style مربوط به body چه نقشی داره ؟
چون مطابق تعریف باید باعث بشه که 50پیکسل از عناصر دیگه ( مثل header و .. ) فاصله داشته باشه ! ولی اینجوری نیست و انگار که top:50px دادیم !!

[raravaice]

با این عوضش کن.

        body

        {

            margin: 0px;

        }

        .body

        {

            background-color: #cc3300; /*position: absolute;*/

            /*margin: 50px;*/

            width: 100%;

            height: 200px;

        }

        .header

        {

            background-color: #292929;

            color: Red; /*position: absolute;*/ /*top: 10px;*/ /*left: 10px;*/

            height: 20px;

            width: 100%;

            padding: 10px; /*padding-right: 20px;*/

        }

        .menu

        {

            color: #0099CC;

            float: right;

            width:30%;

            height:100%;

        }

        .main

        {

            float: right;

            width:70%;

            height:100%;

        }

        .footer

        {

            clear: right;

            background-color: Orange;

            color: Green; /*position: absolute;*/ /*bottom: 10px;*/ /*left: 10px;*/

            height: 20px;

            width: 100%;

            padding: 10px; /*padding-right: 20px;*/

        }

[raravaice]

این یکی بهتره : من هدف شما رو از به کار بردن padding نفهمیدم؟!

body

        {

            margin: 0px;

        }

        .body

        {

            background-color: #cc3300; /*position: absolute;*/

            /*margin: 50px;*/

            width: 100%;

            height: 200px;

        }

        .header

        {

            background-color: #292929;

            color: Red; /*position: absolute;*/ /*top: 10px;*/ /*left: 10px;*/

            height: 100px;

            width: 100%;

            /*padding: 10px;*/ /*padding-right: 20px;*/

        }

        .menu

        {

            color: #0099CC;

            float: right;

            width:30%;

            height:100%;

        }

        .main

        {

            float: right;

            width:70%;

            height:100%;

        }

        .footer

        {

            clear: right;

            background-color: Orange;

            color: Green; /*position: absolute;*/ /*bottom: 10px;*/ /*left: 10px;*/

            height: 100px;

            width: 100%;

            /*padding: 10px;*/ /*padding-right: 20px;*/

        }

[dr_csharp]

دوست عزیز الان صحبت روی Margin هست ولی شما margin رو حذف کردین ! هدف اصلی من margin هست و اینکه چرا با تکه کد من بنابر خاصیت margin که باید منجر به ایجاد فاصله از دیگر عناصر بشه چنین اتفاقی رخ نمیده !؟
ظاهرا position:absolute هم یه تاثیرایی میذاره ! ممنون میشم اگه راجع به این قضیه هم شرح بدین !

[raravaice]

ببینید دوست من شما وقتی از position:absolute استفاده میکنی یعنی داری میگی المان شما یه المان مطلق توی صفحه هست که جاش رو با top left right bottom مشخص میکنی توی صفحه پس عملا تاثیر margin از بین میره چون دیگه این المان توی اون لایه ای نیست که بخواد از المان های کناری فاصله بگیره.

موفق باشید

[dr_csharp]

وقتی position:absolute هست عملا نمیشه از margin استفاده کرد ! در اینصورت چطور میشه Div رو در وسط صفحه قرار داد ؟
Left و right رو auto کردم ولی تو اینحالت جوابگو نیست !؟
( منظورم اینه که وقتی position:absolute نیست با auto کردن margin چپ و راست ،div وسط صفحه قرار میگیره ولی الان راهکار چیه ! )

[raravaice]

اگر شما می خواهید که المانهای شما تمام صفحه نباشن و وسط صفحه قرار بگیرن کافیه کل سورس رو بین دو تگ <center></center> قرار بدی ولی اگر منظورت چیزه دیگست برام یه sample site معرفی کن تا ببینم بهت بگم.

موفق باشید

[dr_csharp]

برام یه sample site معرفی کن تا ببینم بهت بگم.

من میخوام footer در وسط Page قرار بگیره :

<divid="Header"class="header">

here is header</div>

<divid="Body"class="body">

<divid="Menu"class="menu">

here is Menu and we place menu here</div>

<divid="Main"class="main">

here is Main.here we place main part of the site! here the float is right and it

mean ..</div>

</div>

<divid="Footer"class="footer">

here is footer

</div>

و CSS لینک شده :

body

{

padding: 0px;

margin: 0px;

}

.header

{

background-color: #292929;

color: Red; /*position: absolute; top: 10px; left: 10px;*/

width: 850px;

padding: 10px;

text-align: center;

margin-left: auto;

margin-right: auto;

margin-top: 10px;

}

.body

{

background-color: #cc3300; /*position: absolute; margin: 50px; width: 100px;*/

height: 200px;

}

.menu

{

color: #0099CC;

float: right;

width: 150px;

margin-right: 5px;

}

.main

{

background-color: Blue; /*float: right;*/

width: 350px;

margin-left: 5px;

}

.footer

{

background-color: Orange;

color: Green;

position: absolute;

bottom: 10px;

left: 10px;

width: 850px;

padding: 10px;

text-align: center;

}

همچنین ممنون میشم بگین که نحوه ی تقسیم بندی Main و Menu به این صورت خوبه یا بهتر روش دیگه ای استفاده بشه !

[raravaice]

شما چرا مسر هستید که از position: absolute استفاده کنید؟ علت چیه؟

position: absolute رو بردارید و center رو برای footer به شکل زیر اعمال کنید.

<center><div id="Footer" class="footer">

here is footer

</div></center>

اگر بتونید تصویری از طرحتون ارائه بدید که چی تو فکرتونه بهتر میشه کمک کرد.!

موفق باشید

[dr_csharp]

position: absolute رو بردارید و center رو برای footer به شکل زیر اعمال کنید.

پس اگه position از نوع absolute باشه راهکاری نداره ؟

اگر بتونید تصویری از طرحتون ارائه بدید که چی تو فکرتونه بهتر میشه کمک کرد.!

یه page ساده که سه قسمت Header و Body و Footer داره و خود Body به دو قسمت Main و Menu تقسیم میشه !

یه سوال دیگه :
من وقتی Page رو بصورت دستی resize میکنم Menu و Main به هم میریزه ! راه حل چیه ! منظورم اینه که بشه Menu رو سمت راست صفحه و Main رو سمت چپ صفحه fix کرد ؟

میبخشید اینقدر سوال میپرسم ولی علتش اینه که تا الان همش با Table کار میکردم !

[raravaice]

اینو ببین

<center>

        <div style="width: 80%;">

            <div id="Header" style="background-color: #292929; height: 100px">

                here is header</div>

            <div id="Body" style="background-color: #cc3300;">

                <div id="Menu" style="background-color: #ffffff; float: right;width:30%">

                    here is Menu and we place menu here<br />

                    here is Menu and we place menu here<br />

                    here is Menu and we place menu here<br />

                    here is Menu and we place menu here<br />

                    here is Menu and we place menu here<br />

                    here is Menu and we place menu here<br />

                    here is Menu and we place menu here<br />

                    here is Menu and we place menu here<br />

                    here is Menu and we place menu here<br />

                </div>

                <div id="Main" style="background-color: Blue; float: right;width:70%">

                    here is Main.sahere we place main part of the site! here the float is right and

                    it mean ..<br />

                    here is Main.sahere we place main part of the site! here the float is right and

                    it mean ..<br />

                    here is Main.sahere we place main part of the site! here the float is right and

                    it mean ..<br />

                    here is Main.sahere we place main part of the site! here the float is right and

                    it mean ..<br />

                    here is Main.sahere we place main part of the site! here the float is right and

                    it mean ..<br />

                    here is Main.sahere we place main part of the site! here the float is right and

                    it mean ..<br />

                    here is Main.sahere we place main part of the site! here the float is right and

                    it mean ..<br />

                    here is Main.sahere we place main part of the site! here the float is right and

                    it mean ..<br />

                    here is Main.sahere we place main part of the site! here the float is right and

                    it mean ..<br />

                </div>

            </div>

            <div id="Footer" style="background-color: Orange; height: 100px;clear:right">

                here is footer

            </div>

        </div>

    </center>

[dr_csharp]

position: absolute رو بردارید و center رو برای footer به شکل زیر اعمال کنید

پس اگه position از نوع absolute باشه راهکاری نداره ؟

[raravaice]

پس اگه position از نوع absolute باشه راهکاری نداره ؟

position: absolute رو به همراه z-index زمانی به کار میبرن که مثلا میخوان یه پیام اختصاصی به شخص نشون بدن یا اگر مثلا سایتهایی مثل meebo.com رو دیده باشی که شما میتونی پنجره ها رو تکون بدی و هر جای صفحه بزاری همه از این خاصیت استفاده کردن.
شما کل صفحه رو یه لایه در نظر بگیر .
حالا وقتی به یه المان این خاصیت رو میدی با z-index براش شماره لایه رو تعریف میکنی که 0 پایین ترین لایه حساب میشه به بعد.

مثلا اگر شما یه div داشته باشی با z-index :0 این بالاتر از تمام صفحه قرار میگیره حالا اگر یکی دیگه هم داشته باشی با z-index:1 این یکی هم بالاتر از 0 هست هم بالاتر از صفحه در اصل حرکت روی محور z ایجاد میشه به سمت بالا.

و محل این نوع المانها رو همانطور که میدونی با top left right bottom مشخص میکنن.

موفق باشید

[dr_csharp]

position: absolute رو به همراه z-index زمانی به کار میبرن که مثلا میخوان یه پیام اختصاصی به شخص نشون بدن یا اگر مثلا سایتهایی مثل meebo.com رو دیده باشی که شما میتونی پنجره ها رو تکون بدی و هر جای صفحه بزاری همه از این خاصیت استفاده کردن.

آیا برای داشتن پنجره متحرک ابزار html کافیه و چیزی مشابه meebo داشت ؟
من خودم قبلا برای این کار از Animated Panel های Ajax استفاده میکردم ! اگه جواب مثبته ممنون میشم یه مثال بیارین !

[raravaice]

آیا برای داشتن پنجره متحرک ابزار html کافیه و چیزی مشابه meebo داشت ؟

HTML ادغام با javascript.

بگرد دنبال Drag Drop برای javascript.

موفق باشید

[dr_csharp]

یه مثال از Image متحرک برای دوستان علاقمند :

<

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

<style>

<!--

.dragme{

position:relative;

background-color:red;

}

-->

</style>

<scriptlanguage="JavaScript1.2">

<!--

var ie=document.all;

var nn6=document.getElementById&&!document.all;

var isdrag=false;

var x,y;

var dobj;

function movemouse(e)

{

if (isdrag)

{

dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;

dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;

returnfalse;

}

}

function selectmouse(e) 

{

var fobj = nn6 ? e.target : event.srcElement;

var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")

{

fobj = nn6 ? fobj.parentNode : fobj.parentElement;

}

if (fobj.className=="dragme")

{

isdrag = true;

dobj = fobj;

tx = parseInt(dobj.style.left+0);

ty = parseInt(dobj.style.top+0);

x = nn6 ? e.clientX : event.clientX;

y = nn6 ? e.clientY : event.clientY;

document.onmousemove=movemouse;

returnfalse;

}

}

document.onmousedown=selectmouse;

document.onmouseup=new Function("isdrag=false");

//-->

</script>

</head>

<body>

<formid="form1"runat="server">

<imgsrc="1.jpg"alt="test"class="dragme"/>

</form>

</body>

</html>

[prazvin]

سلام
من در مورد تگ <div > یک کمی اطلاعات می خواستم
اگه میشه کمکم کنین
چطوری میشه هیچ table در صفحه تعریف نکرد.