گرد کردن لبه DIV و قرار دادنش در وسط صفحه.

[neo1989021]

دوستان دو تا سوال کوچیک در مورد DIV دارم.
1) به چه شکل یک DIV رو با اندازه 600 در 380 پیکسل در وسط صفحه قرار بدم. بطوری که در همه ی رزولیشنها در وسط قرار بگیره.
2) می خواهم لبه های همون DIV به حالت گرد در بیاد و تو اولویت اول در IE خوب اجرا بشه و در صورت امکان در تمام مرورگرها اجرا بشه.

[hesamy2004]

div.name{
width: 600;
height: 380
margin-top: 5px;
border-color: #666600;
border-style: outset;
border-width: 8px;
padding: 5px 15px;
clear: both;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}

[neo1989021]

وسط صفحه قرار نگرفت !! لبش هم به شکل بدی گرد شده بود

[neo1989021]

دوستان یکی کمک کنه، هر چی سرچ می کنم چیزی دستگیرم نمیشه

[alibabaei2]

1) به چه شکل یک DIV رو با اندازه 600 در 380 پیکسل در وسط صفحه قرار بدم. بطوری که در همه ی رزولیشنها در وسط قرار بگیره.
2) می خواهم لبه های همون DIV به حالت گرد در بیاد و تو اولویت اول در IE خوب اجرا بشه و در صورت امکان در تمام مرورگرها اجرا بشه.


برای این که المنتی بیاد وسط باید بهش margin بدی به این صورت
margin:0 auto;

من برای گرد کردن دیو از css3 استفاده می کنم اما همه مرور گر ها پشتیبانی اش نمی کنند

[colors]

درود

دوست عزیز برای گرد کردن دیوی که تو همه مرورگرها یکسان نمایش داده بشه، بهتره از تصویر استفاده کنی.

برای اینکه بتونی دیورو دقیقا وسط صفحه قرار بدی اینجا (http://barnamenevis.org/showthread.php?281737-%D9%82%D8%B1%D8%A7%D8%B1-%DA%AF%D8%B1%D9%81%D8%AA%D9%86-div-%D8%A7%D8%B5%D9%84%DB%8C-%D8%B5%D9%81%D8%AD%D9%87-%D8%AF%D8%B1-%D9%88%D8%B3%D8%B7-%D8%B5%D9%81%D8%AD%D9%87) کلیک کن

[hamiii]

برای وسط چین شدن هر باکسی می تونی از تگ center هم استفاده کنی. البته استفاده از margin:0 auto متداولتره.

[neo1989021]

دوستان مثل اینکه منظورم و درک نکردید.
من منظورم این بود که وسط صفحه قرار بگیره اون DIV (راست، چپ، بالا، پایین)
نه فقط وسط چین کردن.
لطفا راهنمایی کنید.

[colors]

درود

دوست عزیز برای گرد کردن دیوی که تو همه مرورگرها یکسان نمایش داده بشه، بهتره از تصویر استفاده کنی.

برای اینکه بتونی دیورو دقیقا وسط صفحه قرار بدی اینجا (http://barnamenevis.org/showthread.php?281737-%D9%82%D8%B1%D8%A7%D8%B1-%DA%AF%D8%B1%D9%81%D8%AA%D9%86-div-%D8%A7%D8%B5%D9%84%DB%8C-%D8%B5%D9%81%D8%AD%D9%87-%D8%AF%D8%B1-%D9%88%D8%B3%D8%B7-%D8%B5%D9%81%D8%AD%D9%87) کلیک کن

دوست من شما ابنجارو ( تو پاراگراف بالا ) کلیک کن تو پستی که من آخر تایپک دادم آموزش قرار دادن کامل وسط صفحه ارائه شده .

[neo1989021]

من کاملا گیچ شدم. چون احساس می کنم منظور منو نمیفهمید!
دوستان من با وسط صفحه گذاشتن DIV مشکلی ندارم بلکه می خواهم علاوه بر وسط بودن از بالا و پایین هم وسط قرار بگیره تو همه ی رزولیشنها.
فکر می کنم کد پیچیده ای داره که این تاپیک اینقدر به درازا کشیده شده.

منظـــورم اینه که در مرکز صفحه قرار بگیره !!

[azaditafakor]

margin-top بده میاد پایین .

[neo1989021]

میشه کدش و بنویسی و بیشتر توضیح بدی؟

[colors]

عجب!!!

دوست عزیز شما که اینجارو کلیک نکردی پس خودم محتویات اون پست رو براتون اینجا میزارم.

دیوی که میخوای در وسط صفحه قرار بگیره رو یه آیدی بهش بده


<div id="pagecenter"> </div>

بعد توسط CSS باید بقیه کارهارو انجام بدی .

اول این کدهارو برای reset کردن مرورگرت به اول کدهای CSS اضافه کن

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}



بعد کد زیرو برای دیوت به کدهای CSS اضافه کن

div#pagecenter { position:absolute; z-index:1; width:700px; height:500px; background:#232323; left:50%; top:50%; margin-top:-250px; margin-left:-350px}


توجه اگر سایز دیوت رو تغییر دادی باید مارجین هارو هم تغییر بدی

مثلا اگه width:1000px و height:500px باشه margin-top:-250 و margin-left:-500px

برای margin-left نصفه width منفی میدی --> width:200px --> margin-left:-100px
و برای margin-top نصفه height منفی میدی --> height:300px --> margin-top:-150px

موفق باشی

[azaditafakor]

اینو امتحان کن


<html>
<head>
<style type="text/css">
#msgbox
{
position: absolute;
left: 50%;
top: 50%;
border:1px black solid;
}
</style>
</head>
<body>
<div id="msgbox">This is a test</div>
</body>
</html>
همین کار میکنه. به همین سادگی

برای اون اندازه اینم بهش اضافه کن . تقرییا درست میشه.
margin:-230px 0px 0px -350px;

[neo1989021]

کار میکنه اما تو سایز مثلا 720 در 462 بهم می خوره. باید چیکار کنم که تو این سایز ثابت وسط بمونه.

[azaditafakor]

برای اون اندازه اینم بهش اضافه کن . تقرییا درست میشه.
margin:-230px 0px 0px -350px;

[neo1989021]

عجب!!!

دوست عزیز شما که اینجارو کلیک نکردی پس خودم محتویات اون پست رو براتون اینجا میزارم.

دیوی که میخوای در وسط صفحه قرار بگیره رو یه آیدی بهش بده


<div id="pagecenter"> </div>

بعد توسط CSS باید بقیه کارهارو انجام بدی .

اول این کدهارو برای reset کردن مرورگرت به اول کدهای CSS اضافه کن

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}



بعد کد زیرو برای دیوت به کدهای CSS اضافه کن

div#pagecenter { position:absolute; z-index:1; width:700px; height:500px; background:#232323; left:50%; top:50%; margin-top:-250px; margin-left:-350px}


توجه اگر سایز دیوت رو تغییر دادی باید مارجین هارو هم تغییر بدی

مثلا اگه width:1000px و height:500px باشه margin-top:-250 و margin-left:-500px

برای margin-left نصفه width منفی میدی --> width:200px --> margin-left:-100px
و برای margin-top نصفه height منفی میدی --> height:300px --> margin-top:-150px

موفق باشی

دوست عزیز من فقط از قسمت دوم کدهات استفاده کردم کار کرد.

[colors]

دوست عزیز من فقط از قسمت دوم کدهات استفاده کردم کار کرد.

بله کار میکنه - ولی توصیه میکنم بخش اول کدهای ریسیت مرورگرو هم بکارببری تا طراحی سالم تری داشته باشی.

موفق باشی

[freddy]

فکر کنم نیاز شمارو رفع کنه <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}

* {
margin:0px auto;
padding:0;
}

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}

div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
}
</style>
</head>


بخش کلاس دیو رو فراموش نکنی
<div id="shim"></div>
<div id="wrapper">
Content
</div>