parsgreen.com
article

کاربرد خاصیت display در CSS

css-display

همان طور که تا این قسمت از آموزش های مقدماتی استایل نویسی با css ملاحظه کردید، این زبان کمکی برای ایجاد جلوه های ظاهری و فرمت بندی کدها و عناصر html از خاصیت های ویژه خود استفاده می کند که هر کدام از آنها کاربرد خاصی دارند و بر روی عناصر به خصوصی تاثیرگذار هستند، یکی دیگر از این خاصیت ها display نام دارد که تعیین کننده نحوه نمایش یک عنصر (به صورت بلاک، جدول، لایه مخفی و...) در صفحات وب است،  display با مقادیر متفاوت، تنظیمات متفاوتی نیز در اختیار طراحان وب قرار می دهد، در ادامه آموزش با کاربرد این خاصیت در css بیشتر آشنا خواهیم شد.

ویژگی display


همان طور که پیش از این اشاره شد، ویژگی display برای تنظیم نحوه نمایش عناصر در صفحات وب به کار می رود و بدین منظور مقادیر متفاوتی می پذیرد که هر کدام از آنها کاربرد خاصی دارند، از جمله این مقادیر می توان block، table ، inline-block، none، list-item و... را نام برد، در زیر به تفصیل به این موارد اشاره می کنیم.

display block


از display با مقادیر block برای ایجاد لایه های معمولی و پرکاربرد وب (به شکل مربع یا مستطیل) به صورت غیر هم سطح استفاده می شود، یعنی یک بلاک اگر در کنار سایر عناصر وب قرار گیرد (به طور مثال اگر بلاک div در بین دو بلاک div دیگر قرار گیرد)، موارد بعد از خود را به پائین هدایت کرده و خود در زیر عناصر سطح بالاتر قرار می گیرد (یک لایه از نوع block در حالت پیش فرض، امتداد عرض خود را پوشش می دهد)، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی display block در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:block;
    height:200px;
    width:200px;
    border:1px solid #999;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:block;
    height:200px;
    width:200px;
    border:1px solid #999;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:block;
    height:200px;
    width:200px;
    border:1px solid #999;
    background:#FC0;
    margin-bottom:8px;    
}
</style>
</head>
<body>
<div class="block-1">
display:block 1
</div>
<div class="block-2">
display:block 2
</div>
<div class="block-3">
display:block 3
</div>
</body>
</html>
برای دیدن پیش نمایش آنلاین، به انتهای مطلب مراجعه کنید.
نکته 1: لایه های از نوع display block با استفاده از خاصیت float می توانند در کنار هم و به صورت هم سطح قرار گیرند.
نکته 2: در فرمت بندی قالب های وب و طراحی کاربردی، به طور معمول از بلاک هایی با پس زمینه transparent یا شفاف نیز استفاده می شود، لذا یک بلاک ممکن است از لحاظ بصری هیچ نمودی نداشته باشد، ولی در اسکلت بندی کار موثر باشد.

display table


از display با مقادیر table برای ایجاد جداول، بدون استفاده از تگ table استفاده می شود، در واقع یک عنصر با خاصیت display table به صورت یک جدول نشان داده می شود و بلاک های درونی آن به عنوان سلول ها و ستون های جدول (با توجه به تنظیمات) پردازش می شوند، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی display table در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:table;
    height:200px;
    width:600px;
    border:1px solid #999;
    background:#F60;
    padding:4px;
    margin-bottom:8px;
}
.block-2{
    display:table-cell;
    height:200px;
    width:200px;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:table-cell;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:table
<div class="block-2">
display:table-cell
</div>
<div class="block-3">
display:table-cell
</div>
</div>
</body>
</html>
نکته: خاصیت های زیرمجموعه display table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group که می توانید از آنها برای لایه های درونی استفاده کنید.

display inline


از display با مقادیر inline برای ایجاد عناصر هم سطح استفاده می شود، یعنی لایه هایی که به صورت display inline هستند، در صورتی که فضای کافی برای آنها وجود داشته باشد، در یک خط و در کنار هم نشان داده می شوند، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی display inline در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:inline;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:inline;
    height:200px;
    width:200px;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:inline;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:inline
</div>
<div class="block-2">
display:inline
</div>
<div class="block-3">
display:inline
</div>
</body>
</html>
نکته 1: اگر مثال بالا را در یک فایل html  ذخیره کرده و در مرورگر اجرا کنید، خواهید دید که سه لایه از نوع display inline در کنار هم در یک سطح قرار گرفته اند، لذا عناصر inline رفتاری مشابه تگ span در html دارند.
نکته 2: فرمت بندی با display inline معمولا تنها برای محتوای خاصی که به صورت عادی باید در یک خط باشند (مانند متن، تصاویر و...) صورت می گیرد، چرا که خاصیت هایی مانند height، width و... در لایه های inline نادیده گرفته می شوند و لذا این مقادیر در طراحی، برای ایجاد بلاک ها یا باکس ها مناسب نیست.

display inline-block


از display با مقادیر inline-block برای ایجاد بلاک های هم سطح و از نوع block استفاده می شود، یعنی یک لایه inline-block با اینکه یک بلاک است، اما به صورت هم سطح پردازش می شود، به این ترتیب می توان در عین استفاده از ویژگی های عناصر block، آنها را به صورت inline نیز نمایش داد، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی inline-block در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:inline-block;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:inline-block;
    height:200px;
    width:200px;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:inline-block;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:inline-block
</div>
<div class="block-2">
display:inline-block
</div>
<div class="block-3">
display:inline-block
</div>
</body>
</html>
نکته: برای سازگاری با تمام مرورگرها، بهتر است در کنار استفاده از inline-block از خاصیت float با مقادیر left یا right نیز استفاده شود.

display inline-table


از display با مقادیر inline-table برای ایجاد لایه های از نوع جدول اما به صورت هم سطح استفاده می شود، در واقع یک عنصر inline-table مشابه table بوده و در عین حال به صورت هم سطح پردازش می شود، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی inline-block در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:inline-table;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:inline-table;
    height:200px;
    width:200px;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:inline-table;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:inline-table
</div>
<div class="block-2">
display:inline-table
</div>
<div class="block-3">
display:inline-table
</div>
</body>
</html>
نکته: خاصیت های زیرمجموعه display inline-table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group.

display list-item


از display با مقادیر list-item برای ایجاد بلاک هایی به شکل آیتم های یک لیست در وب استفاده می شود، هرچند این ویژگی چندان پرکاربرد نیست (و بیشتر از تگ های ul و li استفاده می شود)، اما قابلیتی است که در css وجود دارد، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی inline-block در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:list-item;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;
}
.block-2{
    display:list-item;
    height:200px;
    width:200px;;
    background:#39C;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;        
}
.block-3{
    display:list-item;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;    
}
</style>
</head>
<body>
<div class="block-1">
display:list-item
</div>
<div class="block-2">
display:list-item
</div>
<div class="block-3">
display:list-item
</div>
</body>
</html>
نکته: برای اینکه علامت های مربوط به آیتم های لیست به درستی نمایش داده شوند، لازم است که بلاک ها از اطراف صفحه، به اندازه مقادیری فاصله داشته باشند (لذا باید از margin استفاده کنید).

display none


از display با مقادیر none برای ایجاد لایه های مخفی در صفحات وب استفاده می شود، بدین معنی که لایه و محتوای درون آن از دید کاربران مخفی می شود، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی inline-block در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:block;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;
}
.block-2{
    display:none;
    height:200px;
    width:200px;;
    background:#39C;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;        
}
.block-3{
    display:block;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;    
}
</style>
</head>
<body>
<div class="block-1">
display:block
</div>
<div class="block-2">
display:none
</div>
<div class="block-3">
display:block
</div>
</body>
</html>
نکته: استفاده از display none با استفاده از خاصیت visibility hidden متفاوت است، در هنگام استفاده از display none، لایه به کلی از صفحه حذف می شود (عرض و ارتفاع آن صفر در نظر گرفته می شود)، اما با استفاده از visibility hidden، اگرچه لایه و محتوای آن مخفی می شود، اما جای آن در صفحه باقی می ماند (عرض و ارتفاع آن در صفحه وجود دارد).

مثال و پیش نمایش آنلاین


در نمونه کد زیر ترکیبی از مقادیر پر کاربرد مربوط به خاصیت display و پیش نمایش آنلاین آن را ملاحظه می کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی display در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    line-height:20px;
}
.block-1{
    display:block;
    height:100px;
    width:100px;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:block;
    height:100px;
    width:100px;;
    background:#39C;
    margin-bottom:8px;
}
.block-3{
    display:block;
    height:100px;
    width:100px;
    background:#FC0;
    margin-bottom:8px;    
}
.block-4{
    display:table;
    height:100px;
    width:300px;
    background:#F60;
    padding:4px;
}
.block-5{
    display:table-cell;
    height:100px;
    width:100px;;
    background:#39C;
}
.block-6{
    display:table-cell;
    height:100px;
    width:100px;
    background:#FC0;
}
.block-7{
    display:inline-block;
    height:100px;
    width:100px;
    background:#F60;
}
.block-8{
    display:inline-block;
    height:100px;
    width:100px;;
    background:#39C;
}
.block-9{
    display:inline-block;
    height:100px;
    width:100px;
    background:#FC0;
}
</style>
</head>
<body>
&laquo; استفاده از display:block &raquo;<br />
<div class="block-1">
display:block
</div>
<div class="block-2">
display:block
</div>
<div class="block-3">
display:block
</div>
<hr />
&laquo; استفاده از display:table &raquo;<br />
<div class="block-4">
display:table
<div class="block-5">
display:table-cell
</div>
<div class="block-6">
display:table-cell
</div>
</div>
<hr />
&laquo; استفاده از display:inline-block &raquo;<br />
<div class="block-7">
display:inline-block
</div>
<div class="block-8">
display:inline-block
</div>
<div class="block-9">
display:inline-block
</div>
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» کار با ویژگی margin و padding در css
» کاربرد خاصیت height و width در css
» کار با ویژگی position و float در CSS
» آشنایی با کلاس (class) و آی دی (id) در css
» کار با border و outline در css
commentنظرات (۲۹ یادداشت برای این مطلب ارسال شده است)
نویسنده: TiNa
زمان: ۰۲:۳۱:۰۴ - تاریخ: ۱۳۹۱/۱۰/۲۶
سلام
خسته نباشید
می خواستم بدونم چه طوری میشه جدول لیگ های مختلف فوتبال رو به صورت آنلاین در یک پست وبلاگ قرارداد ؟
نمی خوام این بخش در امکانات وب باشه.
یه سوال دیگه : من یه سایت رو در قسمت درج مطلب لینک کردم. آدرس آن وب سایت هم در درج لینک وارد کردم اما وقتی در صفحه وبم نمایش داده میشه و روی اون کلیک می کنم به سایت مورد نظر نمیره و ‏Error‏ میده. مشکل چیه؟!
ممنون میشم پاسخ بدید
پاسخ: 
سلام
برای درج کد در مطالب وبلاگ، هنگام ارسال مطلب در ویرایشگر، نمایش به صورت کد html را انتخاب کنید و سپس کد مورد نظر را اضافه نمائید.
در مورد اینکه چرا لینک خطا می دهد، ابتدا یک بار لینک را به صورت مستقیم در نوار آدرس مرورگر امتحان کنید، اگر Error دریافت کردید، مشکل از وبلاگ نیست، اما اگر مشکلی نداشت، باید ببینید چه کاراکتر اضافه یا کم و یا اشتباهی در آدرس لینک وجود دارد، لینک را با و بدون www و http نیز امتحان کنید.
نویسنده: TiNa
زمان: ۱۹:۴۶:۴۰ - تاریخ: ۱۳۹۱/۱۰/۲۶
سلام
ممنون بابت راهنماییتون
درقسمت ویرایش مطلب کد را به صورت html وارد کردم ... خطا می دهد: " امکان درج فریم واسکریپیت در درج مطلب وجود ندارد."
نمیشه کاری کرد؟!!
پاسخ: 
سلام
اگر کد را خودتان آپلود کرده اید می توانید در میزبان فایل دیگری نیز امتحان کنید (آدرس برخی سایت ها در برخی سرویس دهنده ها قابل پذیرش نیستند!)، در غیر این صورت متاسفانه کار خاصی نمی توان کرد چون این موضوع به مدیریت سرویس دهنده وبلاگ ارتباط دارد.
نویسنده: CSS
زمان: ۱۸:۰۳:۲۸ - تاریخ: ۱۳۹۱/۱۰/۲۷
سلام
من میخوام هفت هشت تا تصویر کوچک رو کنار هم در دو سطر قرار بدم از چه کدی باید استفاده کنم که تصاویر کنار هم قرار بگیرند.
پاسخ: 
سلام
به چند روش می توانید این کار را انجام دهید، یک روش استفاده از float برای تصاویر است، به فرض یک کلاس برای آنها تعریف کنید و در کلاس بنویسید:
.img{
float:right;
}
بین دو ردیف از تگ br استفاده کنید.
روش دیگر استفاده از بلاک های div و خاصیت display با مقادیر inline-block است که نمونه آن در آموزش وجود دارد، در هر بلاک یک تصویر را قرار دهید.
نویسنده: Mahan
زمان: ۰۸:۵۵:۵۴ - تاریخ: ۱۳۹۱/۱۱/۰۹
سلام
می خواستم یه متن کوتاه رو به شکل زیرنویس های تلویزیون در مطالب ویلاگم داشته باشم. امکانش هست؟ اگه میشه راهنماییم کنید.
پاسخ: 
سلام
بله این امکان وجود دارد، لطفا به آموزش زیر مراجعه کنید.
نحوه متحرک ساختن متن با تگ marquee در HTML
نویسنده: الهه
زمان: ۲۱:۳۶:۴۷ - تاریخ: ۱۳۹۲/۰۶/۳۱
سلام
یک سوال داشتم
میخواستم بدونم اگه بخوام سه پست رو در یک ردیف افقی قرار بدم باید چیکار کنم ؟
مثل این وبلاگ :
templateworld.blogfa.com
ممنون میشم اگه توضیح بدین
پاسخ: 
سلام
بدین منظور باید با CSS آشنا باشید و از خاصیت display با مقادیر inline-block و float استفاده کنید.
نویسنده: مسعود
زمان: ۱۴:۲۸:۵۵ - تاریخ: ۱۳۹۲/۰۷/۲۵
عالی بود
نویسنده: رضا
زمان: ۱۲:۵۵:۰۸ - تاریخ: ۱۳۹۲/۰۸/۰۱
ببخشید من چند تا تگ span دارم که همدیگر رو همپوشانی می کنن ولی اندازهاشون متفاوته چطور می تونم مشخص کنم کدوم تگ رو و کدوم تگ زیر قرار بگیره
پاسخ: 
برای این کار می توانید از خاصیت z-index در CSS استفاده کنید، هر چه مقدار z-index برای یک عنصر بیشتر باشد، آن عنصر در سطح بالاتری نمایش داده می شود، مثال:
<style type="text/css">
.leve1-1{
z-index:999;
}
.level-2{
z-index:998;
}
</style>
نویسنده: رضا
زمان: ۱۶:۱۴:۴۴ - تاریخ: ۱۳۹۲/۰۸/۰۲
ممنون خدا خیرتون بده خیلی تو این مسئله گیر کرده بودم
یه سوال دیگه داشتم می خواستم بدونم وقتی ما اندازه ی یه تگ span رو با px تعریف می کنیم ایا در مانیتورهای مختلف به یک شکل نمایش داده میشه چون ممکنه با مانیتور دیگه ست نشه و عناصر صفحه بهم بریزن ایا چنین اتفاقی ممکنه بیفته و راه حلش چیه؟
پاسخ: 
مقداردهی پیکسلی اگر برای همه عناصر رعایت شده باشد، نتیجه در همه مانیتورها به یک اندازه خواهد بود هرچند ممکن است در مانیتورهای کم عرض، اسکرول افقی داشته باشید و در مانیتورهای عریض، حاشیه های بیشتر، اما به این دلیل به هم ریختگی در ساختار قالب نخواهید داشت.
نویسنده: میلاد
زمان: ۱۰:۳۳:۵۶ - تاریخ: ۱۳۹۲/۱۱/۲۵
در سایت mrled.cn یک عکس در سمت چپ سایت برای چت وجود دارد که با پایین آمدن در سایت آن هم پایین می آید.
چطور باید به عکس کد بدم که به این شکل در آید؟
با تشکر
پاسخ: 
این یک کد جاوا اسکریپتی آماده است و باید در وب به دنبال آن باشید (عبارت "کد منوی متحرک" را جستجو کنید).
نویسنده: مهسا
زمان: ۱۱:۵۰:۴۳ - تاریخ: ۱۳۹۲/۱۲/۲۳
سلام. من چندین div دارم که روی هر کدام از div ها که کلیک کنم باید به صفحه ای دیگر برود. تا اینجاش که بلدم اما یه مشکلی هست استادم گفته باید از روش display استفاده بشه بطوریکه هرقسمت از div که کلیک کنم لینک بشه به صفحه ای دیگه راهنمایی میخوام.
با تشکر
پاسخ: 
سلام
سوالتان واضح نیست!
اگر می خواهید چند div در کنار هم یا درون div دیگری باشند، از diplay با مقادیر inline-block استفاده کنید، اگر می خواهید درون div لینک داشته باشید، به تگ a درون بلاک div خاصیت display با مقادیر block و ارتفاع و عرض اختصاص دهید.
نویسنده: سعید
زمان: ۰۰:۱۶:۵۷ - تاریخ: ۱۳۹۲/۱۲/۲۴
سلام
خسته نباشید!!!
واقعا نسبت به مطالب بقیه وبسایت ها کامل و دقیق بود تشکر
و با اجازه ادمین:
فکر کنم کد زیر به کار مهسا خانوم بیاد...
<div class="division" style="background-color:red;">
<a href="http://www.bing.com" class="link"></a>
</div>
<div class="division" style="background-color:blue;">
<a href="http://www.yahoo.com" class="link"></a>
</div>
<div class="division" style="background-color:green;">
<a href="http://www.googl.com" class="link"></a>
</div>
/*-------------------------------css-----------------------*/
.division{width:100px ; height:100px;float:left;margin:5px}
.link {display:block ; width:100% ; height:100%}
پاسخ: 
سلام
تشکر از مشارکت و یاری شما.
نویسنده: sina
زمان: ۱۸:۱۴:۰۳ - تاریخ: ۱۳۹۳/۰۲/۱۴
سلام من یه عکس به اندازه ی 50px در 50px دارم حالا میخوام این عکسو grid بندی کنم مثل جدول مختصات طوری که هر پیکسل عکس یه خونه بشه میشه کمکم کنید.
پاسخ: 
سلام
این کار به نوشتن کد جاوا اسکریپت + CSS و محاسبات نیاز دارد که کار زمانبری است.
نویسنده: مژگان
زمان: ۱۲:۱۶:۵۹ - تاریخ: ۱۳۹۳/۰۴/۰۶
سلام
لیست تگهایی که اینلاین هستند و لیست تگهایی که بلاک هستند رو میخوام.
مثلا میدونم که تگ p بلاک هست و تگ span اینلاین. میشه پر کاربرد هاش رو برام بذارید؟
پاسخ: 
سلام
لیست خاصی وجود ندارد!، عملا چند تگ div، span و p هستند که بیشترین کاربرد را در فرمت بندی و نمایش متن دارند، ضمن اینکه خصوصیات اولیه این تگ ها با استفاده از CSS قابل تعییر است.
نویسنده: مژگان
زمان: ۱۰:۴۰:۰۴ - تاریخ: ۱۳۹۳/۰۴/۰۷
سلام
ببخشید میدونم برای مطرح کردن این سوال جای مناسبی انتخاب نکردم آخه سرچ کردم صفحه ای در این رابطه نبود.
من هرچی گشتم مطلبی راجع به پاسخگو و مدیا کوئری پیدا نکردم. من میخوام که صفحه سایتم responsive باشه میشه راهنماییم کنین. ممنون
پاسخ: 
سلام
Responsive یک شیوه نوین طراحی قالب در وب، بیشتر با هدف سازگاری نحوه نمایش سایت با دستگاه های تلفن همراه، تبلت ها و... است، در این شیوه از قابلیت media screen در CSS3 استفاده می کنیم که برای کار با آن داشتن حداقل تجربه در طراحی قالب های عادی ضروری است، متاسفانه این شیوه خیلی مورد استقبال طراحان حرفه ای قرار نگرفته، مواردی از قبیل بحث سازگاری با مرورگرهای مختلف، بحث محدودیت های این سبک طراحی در ایجاد رابط کاربری مناسب، زمانبر بودن این شیوه، عدم نیاز و الزام واقعی به استفاده از این شیوه (سایت های معمولی نیز با کمی تفاوت در تلفن های همراه، تبلت ها و... قابل مشاهده و استفاده هستند) و... باعث می شود طراحی قالب های Responsive خیلی توجیه منطقی نداشته باشد و در عمل بیشتر سلیقه ای و شاید برای جلوه جالب آن استفاده شود!
در هر صورت این موضوع نیاز به ارائه آموزش های مفصل و جداگانه دارد که شاید با جستجو (انگلیسی یا فارسی) در وب به مطالبی دست پیدا کنید.
نویسنده: حسین
زمان: ۰۹:۱۴:۴۹ - تاریخ: ۱۳۹۳/۱۲/۱۴
با عرض سلام و خسته نباشید بنده میخوام یک عنصر رو مخفی کنم ولی در این عنصر یک div دیگر هست که میخوام اون بیاد پایین تر و در هیدر قالبم جای بگیره چیکار باید بکنم؟؟
پاسخ: 
سلام
حل اینگونه مشکلات نیازمند آشنایی شما با CSS و ویرایش کدهای HTML قالب وبلاگ است، متاسفانه راه حل کوتاهی وجود ندارد!
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 8
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...