دوشنبه ۱۴ آذر ۱۴۰۱

Monday, December 5, 2022 GMT +3:30

کاربرد ویژگی position و float در CSS

css-position-float

از جمله مباحث پیشرفته در زمینه استایل نویسی وب با زبان CSS، بحث استفاده از ویژگی position و float برای شناور کردن عناصر مختلف در صفحات به نحو دلخواه و مورد انتظار است، آشنایی با این خاصیت ها را می توان نقطه آغاز استایل نویسی حرفه ای برشمرد چرا که معمولا در بسیاری از جلوه های ویژه و امکانات مورد نیاز برای ساخت واسط کاربری (UI یا User Interface) مناسب در صفحات وب این خواص استاندارد استفاده خواهند شد، به طور مثال منوهای طراحی شده با CSS، باکس های شناور و واکنش پذیر (Interactive)، افزونه ها و Widget ها و مواردی از این دست، لذا در ادامه آموزش های مقدماتی این بخش می خواهیم به توضیح در رابطه با کاربرد دو خاصیت position  و float در CSS بپردازیم.

خاصیت position


همان طور که پیش از این اشاره شد خاصیت position جزء خاصیت های کلیدی و حرفه ای در CSS محسوب می شود، این خاصیت امکان تعریف موقعیت و استقرار عناصر به صورت ثابت یا شناور در هر نقطه از صفحه نمایش کاربر را میسر می کند که در طراحی وب بسیار کاربرد دارد، ویژگی position مقادیر متعددی به شرح زیر می پذیرد:
- مقادیر static
مقادیر static یا ایستا حالت پیش فرض عناصر در صفحات وب است که در واقع با این خاصیت موقعیت یک عنصر در کنار سایر عناصر موجود در صفحات HTML پردازش و مشخص می شود.
- مقادیر relative
مقادیر relative یا نسبی به معنی تعیین موقعیت عنصر از محل قرارگیری معمول خود در صفحه وب است، در این حالت در نظر گرفتن مقدار برای خاصیت های top، right، bottom، left بر روی عنصر نسبت به محل قرارگیری نرمال آن اعمال می شود.
- مقادیر absolute
مقادیر absolute یا مطلق به معنی تعیین موقعیت عنصر از نزدیکترین تگ والد خود است که یکی از حالت های position (به غیر از static) را داشته باشد، اگر هیچ کدام از تگ های بالادستی با خاصیت position مقداردهی نشده باشند، در حالت پیش فرض عنصر absolute از تگ body یا سند HTML پیروی خواهد کرد، به طور مثال از این خاصیت می توانیم برای شناورسازی یک عنصر در بالاترین سطح صفحه وب استفاده کنیم.
- مقادیر fixed
مقادیر fixed یا تثبیت شده به معنی ثابت شدن موقعیت عنصر در محلی تعریف شده است که حتی با اسکرول نیز تغییر نخواهد کرد.
- مقادیر sticky
مقادیر sticky یا چسبنده موقعیت عنصر را با توجه به اسکرول بار صفحه مشخص می کند و در واقع ترکیبی از مقادیر relative و fixed است، موقعیت عنصر در این حالت در هنگام اسکرول نسبت به Viewport صفحه به صورت relative تعیین و در همان نقطه ثابت و fixed می شود.
در ادامه هر یک از مقادیر بالا را همراه با مثال بررسی خواهیم کرد.

خاصیت position با مقادیر static


از خاصیت position با مقادیر static زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت پیش فرض و نرمال در کنار سایر عناصر موجود در سند HTML پردازش شود، این مقدار چندان کاربردی نیست و کمتر استفاده می شود چرا که بدون استفاده از آن نیز عناصر صفحه وب به صورت Static پردازش می شوند، مگر اینکه بخواهیم خاصیتی که قبلا به یک عنصر داده شده است را دوباره نویسی و به حالت پیش فرض تغییر دهیم که به این حالت در اصطلاح برنامه نویسی Override می گویند.
<style>
.static {
    position: static;    
    width: 200px;
    height: 100px;
    background: #88C2FF;
}
</style>
<div class="static">بلاک با خاصیت position static</div>
برای بررسی مثال با پیش نمایش آنلاین، لطفا به انتهای این آموزش مراجعه کنید.

خاصیت position با مقادیر relative


از خاصیت position با مقادیر relative زمانی استفاده می کنیم که بخواهیم یک عنصر نسبت به محل قرارگیری نرمال خود در صفحه وب مقادیر مربوط به موقعیت را اعمال کند، به طور مثال اگر برای عنصر با خاصیت position و مقدار relative خاصیت top در نظر بگیریم، موقعیت عنصر از همان محلی که قرار دارد بر اساس مقدار top تغییر خواهد کرد.
<style>
.relative {
    position: relative;
    width: 200px;
    height: 100px;
    background: #F90;
    border: 1px solid #999;
    top: 40px;
}
</style>
<div class="relative">بلاک با خاصیت position relative</div>
برای بررسی مثال با پیش نمایش آنلاین، لطفا به انتهای این آموزش مراجعه کنید.
موقعیت قرارگیری عناصر دارای خاصیت position با مقادیر relative را می توانیم با خاصیت های top، right، bottom، left تغییر دهیم، همچنین امکان اعمال خاصیت z-index بر روی این عناصر وجود دارد.

خاصیت position با مقادیر absolute


از خاصیت position با مقادیر absolute زمانی استفاده می کنیم که بخواهیم یک عنصر (به فرض بلاک div) نسبت به تگ والد خود یا نسبت به کل صفحه وب به صورت شناور درآید، در این حالت عنصر به صورت پیش فرض به ابتدای موقعیت بلاک والد یا سند HTML (گوشه بالای پنجره مرورگر) منتقل می شود و برای اعمال تغییرات سفارشی بیشتر می توانیم از خاصیت های top، right، bottom، left استفاده کنیم.
<style>
.relative {
    position: relative;
    width: 200px;
    height: 100px;
    background: #F90;
    border: 1px solid #999;
}
.absolute {
    position: absolute;
    width: 220px;
    height: 50px;
    background: #F90;
    border: 1px solid #999;
    top: 30px;
    left: -30%;
}
</style>
<div class="relative">
بلاک والد با خاصیت position relative
<div class="absolute">
بلاک فرزند با خاصیت position absolute
</div>
</div>
برای بررسی مثال با پیش نمایش آنلاین، لطفا به انتهای این آموزش مراجعه کنید.
یکی از کاربردهای متداول خاصیت position با مقادیر absolute در صفحات وب ایجاد منوهای شناور است که معمولا ساختاری مشابه با نمونه کد بالا دارند، یعنی به تگ والد خاصیت position با مقادیر relative و به تگ فرزند خاصیت position با مقادیر absolute می دهیم.

خاصیت position با مقادیر fixed


از position با مقادیر fixed زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت ثابت در یک قسمت از صفحه نمایش قرار گیرد و حتی با اسکرول نیز تغییری نکند، به عنوان مثال این شیوه ای است که برخی طراحان قالب از آن در کدنویسی های خود (معمولا بیشتر در قالب وبلاگ ها) برای ثابت کردن تصویر پس زمینه استفاده می کنند.
<style>
.fixed {
    position: fixed;
    width: 200px;
    height: 100px;
    background: #FF9A9B;
    border: 1px solid #999;
    top: 8px;
    left: 8px;
}
</style>
<div class="fixed">بلاک با خاصیت position fixed</div>
برای بررسی مثال با پیش نمایش آنلاین، لطفا به انتهای این آموزش مراجعه کنید.

خاصیت float


در کنار خاصیت position که می توانیم با آن یک عنصر را در راستای محور Xها و Yها (کل صفحه) شناور کنیم، خاصیت دیگری به نام float وجود دارد که برای شناور کردن عنصر صرفا در راستای محور Xها (محور افقی) در دو سمت چپ (Left)  و راست (Right) در درون تگ والد خود به کار می رود، منظور از والد تگی است که عنصر شناور شده در درون آن قرار دارد و به اصطلاح Container یا ظرف آن است، به فرض اگر بخواهیم بلاک مربوط به نمایش تصویر بندانگشتی در یک مطلب به سمت چپ یا راست پاراگراف متمایل باشد از float با مقادیر left یا right استفاده می کنیم.
مثال:
<style>
.block {
    width: 220px;
    height: 220px;
    background: #9EBBFF;
    border: 1px solid #999;
    text-align: justify;
    padding: 4px;
    top: 8px;
    left: 8px;
}
.float {
    width: 100px;
    height: 100px;
    background: #424AE4;
    color: #FFFFFF;
    float: left;
    padding: 4px;
    margin: 4px;
    text-align: right;
}
.rtl {
    direction: rtl;
}
</style>
<div class="block rtl">
<div class="float">بلاک مربوط به نمایش تصویر بندانگشتی در مطلب با خاصیت float و مقدار left</div>
<p>تفاوت خاصیت float با خاصیت position و مقادیر absolute در این است که با float عنصر صرفا در سمت چپ یا راست تگ والد خود شناور می شود اما همچنان بر روی موقعیت سایر عناصر مجاور تاثیرگذار است اما در مورد خاصیت position با مقادیر absolute عنصر به صورت کامل در سند HTML شناور می شود و بر روی موقعیت عناصر مجاور خود تاثیری ندارد.</p>
</div>
در ادامه شرح مقادیری که float می پذیرد را بررسی می کنیم.
- مقادیر right
از float با مقادیر right زمانی استفاده می کنیم که بخواهیم عنصر به سمت راست تگ والد خود متمایل شود.
- مقادیر left
از float با مقادیر left زمانی استفاده می کنیم که بخواهیم عنصر به سمت چپ تگ والد خود متمایل شود.
- مقادیر none
از float با مقادیر none زمانی استفاده می کنیم که بخواهیم مقادیر پیشین مربوط به float را برای یک عنصر دوباره نویسی و خنثی کنیم، در واقع این حالت پیش فرض float است.
نکته 1: در استایل نویسی کاربردی معمولا مواردی پیش می آید که در کنار استفاده از خاصیت float ناچاریم از خاصیت clear با مقادیر both نیز برای همپوشانی بلاک های تو در تو استفاده کنیم.
نکته 2: برای چینش بلاک ها در کنار هم و در یک ردیف افقی معمولا از خاصیت display با مقادیر inline-block استفاده می کنیم، اما استفاده از خاصیت float نیز می تواند در مواردی با توجه به نیاز طراحی وب به کار گرفته شود.

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


برای آشنایی بیشتر با خاصیت های position و float در CSS، مثال و پیش نمایش آنلاین را با نمونه کد زیر بررسی می کنیم.
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title>وبگو | استفاده از خاصیت position و float در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    height: 1500px;
}
.static {
    position: static;    
    width: 200px;
    height: 100px;
    background: #88C2FF;
    margin: 4px;
}
.relative {
    position: relative;
    width: 200px;
    height: 100px;
    background: #F90;
    border: 1px solid #999;
    margin: 4px;
}
.absolute {
    position: absolute;
    width: 220px;
    height: 50px;
    background: #F90;
    border: 1px solid #999;
    top: 30px;
    left: -30%;
}
.fixed {
    position: fixed;
    width: 200px;
    height: 100px;
    background: #FF9A9B;
    border: 1px solid #999;
    top: 8px;
    left: 8px;
}
.block {
    width: 220px;
    height: 220px;
    background: #9EBBFF;
    border: 1px solid #999;
    text-align: justify;
    padding: 4px;
    top: 8px;
    left: 8px;
}
.float {
    width: 100px;
    height: 100px;
    background: #424AE4;
    color: #FFFFFF;
    float: left;
    padding: 4px;
    margin: 4px;
    text-align: right;
}
</style>
</head>
<body>
<div class="static">بلاک با خاصیت position static</div>
<div class="relative">
بلاک والد با خاصیت position relative
<div class="absolute">
بلاک فرزند با خاصیت position absolute
</div>
</div>
<div class="fixed">بلاک با خاصیت position fixed، برای بررسی بیشتر به پائین صفحه اسکرول کنید.</div>
<div class="block">
<div class="float">بلاک مربوط به نمایش تصویر بندانگشتی در مطلب با خاصیت float و مقدار left</div>
<p>تفاوت خاصیت float با خاصیت position و مقادیر absolute در این است که با float عنصر صرفا در سمت چپ یا راست تگ والد خود شناور می شود اما همچنان بر روی موقعیت سایر عناصر مجاور تاثیرگذار است اما در مورد خاصیت position با مقادیر absolute عنصر به صورت کامل در سند HTML شناور می شود و بر روی موقعیت عناصر مجاور خود تاثیری ندارد.</p>
</div>
</body>
</html>
پیش نمایش آنلاین
دسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
کار با ویژگی margin و padding در CSS
خاصیت Background و ویژگی های آن در CSS
سلکتور آی دی (ID) و کلاس (Class) در CSS
کاربرد خاصیت display در CSS
ویژگی های Font و Text در CSS
دیدگاه
more ۵۹ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
فرشید
۱۰:۳۳ ۱۳۹۵/۰۵/۰۳
با عرض سلام و خسته نباشید
من یه اسلاید شو دارم که وقتی width اش رو افزایش میدم height تغییر میکنه نمیدونم باید چکار کنم لطفا راهنمایی کنید.
درج آدرس صفحه جهت بررسی و تست اسلایدشو ضروری است!
saeed
۱۵:۰۴ ۱۳۹۵/۰۵/۲۵
با سلام و درود. خسته نباشید.
قربان سوالی داشتم نمی دونم جاش تو این پیج یا نه، با این حال پوزش می طلبم.
من می خوام navbar سایت وقتی سایت اسکرول می خوره میره پایین این نوارم بالای سایت نمایان باشه. یک هدره 150*960 دارم و بدش navbar سایت هستش، می خوام سایت که لود میشه سرجاش باشه و وقتی کاربر اسکرول می کنه navbar بره بالای سایت و نمایان باشه. لطفا راهنمایی کنید.
می توانید از نمونه کدهای لینک زیر استفاده کنید (به این قابلیت در اصطلاح sticky menu یا منوی چسبنده گفته می شود):
https://codepen.io/senff/pen/ayGvD

http://www.websitecodetutorials.com/code/jquery-plugins/sticky-js-position-fixed-at-certain-point-in-page-demo.php
محمدرضا
۱۵:۲۳ ۱۳۹۵/۱۱/۰۲
سلام خسته نباشید وقتی از relative استفاده میکنم تگ های a که بر روی اون عنصر قرار گرفتن عمل نمیکنند . لطفا راهنمایی کنید. سپاس
هرچند این مشکل نیازمند بررسی سورس کدها است و ممکن است یک ایراد جزئی یا همپوشانی وجود داشته باشد، اما معمولا باید مقدار width و height برای تگ a تعیین کنید و همچنین از خاصیت display با مقادیر block یا inline-block استفاده نمائید تا محدوده تگ a مشخص و قابل کلیک باشد!
سروش
۲۳:۰۳ ۱۳۹۵/۱۱/۰۴
سلام من میخام یه عکس کلی رو از داخلش چند قسمت با موقعیت های متفاوت از عکس اصلی برش بزنم و به صورت مجزا بزارم به طوری که با کوچک و بزرگ شدن سایز صفحه اون ها هم موقعیتشون عوض نشه هم سایزشون به تناسب عکس اصلی کوچک و بزرگ بشه، اینم کدی که من نوشتم با توجه به کد اول :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | استفاده از خاصیت position و float در CSS</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
direction: rtl;
height: 1500px;
margin-right: auto;
margin-left: auto;
}
.float-parent{
width: 300px;
height: 100px;
margin-right: auto;
margin-left: auto;
margin-top: 44%;
}
.float-right-1{
width: 25%;
height: 100px;
float: right;
background-image: url(file:///G|/zar%20bal/site/tt-menu/images/01.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: auto auto;
}
.float-right-2{
width: 25%;
height: 100px;
float: right;
background-image: url(file:///G|/zar%20bal/site/tt-menu/images/02.jpg);
background-repeat: no-repeat;
background-size: auto auto;
background-position: center center;
}
.float-right-3{
width: 25%;
height: 100px;
float: right;
background-image: url(file:///G|/zar%20bal/site/tt-menu/images/01.jpg);
background-size: auto auto;
background-repeat: no-repeat;
background-position: center center;
}
.float-clear{
clear:both;
}

.main {
position: absolute;
width: 100%;
background-repeat: no-repeat;
background-image: url(file:///G|/zar%20bal/site/tt-menu/images/Safhe-asli.png);
/* [disabled]-webkit-background-size: cover; */
/* [disabled]-moz-background-size: cover; */
-o-background-size: cover;
background-size: 90% auto;
padding-top: 5%;
background-position: center 5%;
/* [disabled]max-height: 915px; */
}
</style>
</head>

<body>
<!-- position absolute -->
<!-- position relative -->
<!-- position fixed --><!-- float -->
<div/ class="main" style="font-size: 100px; font-family: BTraffic;" >
<p><a href=""/></p>
<div class="float-parent">
<div class="float-right-1"></div>
<div class="float-right-2"></div>
<div class="float-right-3"></div>
<div class="float-clear"></div>
</div>
</div>
</body>
</html>
لطفا دقیقا توضیح دهید که مشکل در کدام بخش است؟ کدهای شما تست شدند و ظاهرا بلاک ها مشکلی ندارد؟! در صورت امکان یک اسکرین شات از مشکلتان تهیه و ارسال کنید.
۱۴:۵۹ ۱۳۹۶/۰۴/۱۳
مقاله خوبی بود و کمک خوبی به من کرد
با تشکر
احمد
۰۰:۲۴ ۱۳۹۷/۰۸/۳۰
سلام من میخوام سه تا دایره درست کنم که یکیشون زیر اون یکی باشه ولی هرکاری میکنم کنار هم میان میتونید کمکم کنید کدی که نوشتم به این صورته :
حذف شد
برای ایجاد دایره با قابلیت همپوشانی می توانید از نمونه کد زیر پیروی کنید:
<style>
.circle-wrapper {
width: 200px;
height:200px;
border: 1px solid #666;
}
.circle-1 {
position: relative;
width: 100px;
height: 100px;
margin:0 auto;
border: 1px solid #599738;
border-radius: 100px;
}
.circle-2 {
position: absolute;
width: 100px;
height: 100px;
margin:0 auto;
border: 1px solid #C51B1E;
border-radius: 100px;
top: 0;
left: 0;
}
</style>
<div class="circle-wrapper">
<div class="circle-1">
<div class="circle-2">
</div>
</div>
</div>
ابتدا یک بلاک پوشش ایجاد نمائید، داخل بلاک پوشش دو بلاک div به صورت تو در تو ایجاد کرده و به بلاک اول (والد) خاصیت position با مقادیر relative بدهید، به بلاک div دوم (فرزند) نیز خاصیت position با مقادیر absolute بدهید و مقادیر top و left آن را برابر با 0 یا مقادیر مورد نیاز تنظیم کنید.
mohammad
۱۸:۲۹ ۱۳۹۷/۱۰/۱۲
سلام من برای چسبندگی عکس هام از float استفاده کردم و الان به یک مشکلی بر خوردم که footer به اون میچسبه float رو برداشتم ولی طراحی کلا به هم می خوره می خواستم بدونم کدی هست که چسبندگی رو از یک قسمت برداره
باید دید عناصر مجاور چه خاصیت هایی دارند، به طور کلی خاصیت هایی مانند margin، top، bottom و مواردی از این دست برای ایجاد فاصله می توانند استفاده شوند که با بررسی سورس کد صفحه می توان نظر قطعی داد.
۲۳:۴۲ ۱۳۹۹/۰۸/۱۷
سلام خسته نباشید من واقعا از وبگو ممنونم که این آموزش های ارزشمند رو در اختیار کاربران قرار میده راستش من هرکاری می کنم پوزیشن سایتم درست نمیشه می تونید یه لطف کنید و یه نگاه به سایت من بندازید و ببینید خطاش چیه خیلی ممنون آدرس سایت من :
intal.ir
لطفا یک اسکرین شات از بخشی که دچار اشکال است تهیه کنید و شکل درست مد نظرتان را هم توضیح دهید تا امکان راهنمایی وجود داشته باشد.
۲۳:۱۴ ۱۳۹۹/۰۸/۲۰
سلام مطلب خیلی مفید و کاملی بود.
خسته نباشید
rofa
۱۶:۳۲ ۱۳۹۹/۱۱/۰۵
سلام خسته نباشید خیلی ممنونم از مطالب خوبتون.. ببخشید علامتی که در سمت راست همین سایت هستش چجوری تغییر جهت میده با اسکرول کردن و هم اینکه وقتی اسکرول میشه فقط ظاهر میشه من خیلی خوشم اومد میخام همچین چیزی کار کنم میشه راهنمایی کنید لطفا
مبنای این ابزارک خاصیت های CSS است اما ویژگی های تعاملی آن با برنامه نویسی جاوا اسکریپت کنترل می شود که متاسفانه توضیح کوتاهی ندارد، در حال حاضر این ابزارک انتشار عمومی نشده (در آینده نسخه ای از آن جهت استفاده عموم در سایت قرار می گیرد) اما کدها (به صورت مبهم شده) در سورس HTML همین صفحه قابل دسترسی هستند (دو فایل با نام tb_style.css و tb_script.js)، همچنین از انیمیشن fadein و fadeout که در فایل style.css تعریف کرده ایم نیز استفاده می شود.
Benedikt Krainer
۱۰:۴۶ ۱۴۰۰/۰۶/۰۷
سلام ، fixed رو برای یک منو عمودی در سمت راست درنظر گرفتم ، اما روی مرورگر نسخه موبایل نشون داده نمیشه، چیکارش کنم؟
متاسفانه مرورگرهای قدیمی تر از ویژگی position fixed به درستی پشتیبانی نمی کتند و برای موبایل بهتر است از این خاصیت استفاده نکنید، اگر مشکل به قدیمی بودن نسخه مرورگر مربوط نیست راه حل های زیر را امتحان کنید.
minimum-scale -1 را به متاتگ viewport اضافه کنید:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
2- backface-visibility: hidden را به استایل اضافه کنید:
.fixed {
position: fixed;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
در صورت تمایل نمونه آدرس یک صفحه را جهت تست قرار دهید تا بررسی کنیم.
۲۱:۰۲ ۱۴۰۰/۰۷/۰۶
با سلام
از اینکه این مطالب رو به صورت رایگان در اختیار دیگران قرار میدهید بسیار سپاسگزارم سوالی داشتم می خواستم یه دکمه شبیه همین دکمه انتقال به بالا و پایین و به این صورتی که شما طراحی کردید داخل سایتم داشته باشم اگر امکان داره راهنمایی بفرمایید ممنون
برای این امکان آموزش جداگانه ای در سایت منتشر شده است، لطفا عبارت "دکمه رفتن به بالا" را در قسمت جستجوی سایت وارد کنید.
مجید
۰۷:۵۱ ۱۴۰۰/۰۹/۲۵
سلام . وقت بخیر
میخواستم یه نوار شبیه باکس مستطیل شکل در بالا و پایین صفحه درست کنم به طوری که به بالا و پایین صفحه بچسبن و فاصله نداشته باشن . آیا میتونم از مقدار دهی padding و یک رنگ استفاده کنم یا باید باکس ایجاد کنم؟ و اینکه برای چسبیدن نوار به بالا و پایین صفحه باید از کد position absolute استفاده کنم؟ با تشکر
بهتر است بلاک div شناور ایجاد کنید، برای شناورسازی هم همان طور که اشاره کرده اید از خاصیت position با مقادیر absolute استفاده می کنیم، در این حالت با در نظر گرفتن مقدار برای خاصیت های مرتبط با جهت یعنی top, right, bottom, left می توانیم عنصر را در هر کجای صفحه که خواستیم تثبیت کنیم (به فرض برای نمایش در بالای صفحه top را با مقدار 0 یا در صورت نیاز مقدار منفی تنظیم و همین طور left یا right را با مقدار دلخواه پیکسلی یا درصدی تنظیم می کنیم)، padding میزان حاشیه محتوای داخلی عنصر را مشخص می کند و برای هدف شما کاربرد ندارد‌.
شبنم
۱۵:۵۳ ۱۴۰۱/۰۸/۱۸
سلام وقت خیر، من برای وب سایتم اسلایدر ایجاد کردم از طریق سایت owl carousel و اوکی هست مشکلی از این بابت ندارم، مشکل اینجاست عکسی که داخل اسلایدر قرار میدم تمام صفحه رو نمیگیره و می‌بینید از nav های پایین که اسلایدر رو پس و پیش میکنن خیلی فاصله داره عکس بزرگم میزارم کیفیت میاد پایین راه حل تنظیم کردن عکس ها چیه که فیت بشه
لطفا کدها را در یک نمونه صفحه آنلاین استفاده و آدرس URL را درج کنید تا امکان بررسی و راهنمایی وجود داشته باشد.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
5 × 9
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
میثم
سلام وقت بخیر. من برای نمایش دادن و مخفی کردن div با اسکرول کردن صفحه از کد زیر استفاده می کنم. با...
۱۴۰۱/۰۹/۱۲

پـــــرتو
سلام جناب خسته نباشید شرمنده مزاحم میشم درسته گفتم قالبم درست شده ولی درست نشده یعنی اینک از کد جدیدی دارم استفاده می کنم ولی...
۱۴۰۱/۰۹/۰۸

حسین ناصری
سلام من از نمونه کد برای نمایش قسمتی از سایت دیگه استفاده میکنم مشکلم اینه بعضی از سایت ها برداشت مطلب با این...
۱۴۰۱/۰۸/۳۰

مهدی
سلام خسته نباشید میخواهم تابع ای بنویسم که توان ۲ یک عدد را فراخوانی با ارجاع انجام دهد ؟ میشه بهم بگید...
۱۴۰۱/۰۸/۲۸

اروین
من یک بلاک html رو از یک بخشی از سایت با روش display:none برداشتم. من میخوام این بخشی که برداشتم توی...
۱۴۰۱/۰۸/۲۶

پـــــرتو
سلام جناب خسته نباشید ببخشید جناب هعی مزاحم میشم توی همین قالبی که دارم بردراش صاف و مساوی نمیشه نمی دونم مشکل از منه یا...
۱۴۰۱/۰۸/۲۳

پرتو
عه من کد رو براتون اپلود کردم توی ایمیل خالی اومده؟ مگه میشه؟ خودم اپلودش کردم توی ایمیل...! عجیبه لطفا یه چک بکنید شاید مشکل...
۱۴۰۱/۰۸/۱۹

شبنم
سلام وقت خیر، من برای وب سایتم اسلایدر ایجاد کردم از طریق سایت owl carousel و اوکی هست مشکلی از این بابت ندارم، مشکل اینجاست...
۱۴۰۱/۰۸/۱۸

پــــرتو
سلام جناب خسته نباشید من کد رو براتون ارسال کردم و دیگه اینکه یه سوال کامپیوتری داشتم من هر دفعه که لپتاپ رو خاموش روشن...
۱۴۰۱/۰۸/۱۸

پرتو
باشه فعلا لپتاپم در دسترسم نیست تا آخر هفته میفرستم
۱۴۰۱/۰۸/۰۷

پرتو
سلام خسته نباشید شرمنده مزاحم میشم اوکی ممنونم از جوابتون یه چیز میتونم بگم میخاستم بگم که برای منوی سمت راست اگر یه بردر برای...
۱۴۰۱/۰۸/۰۵

عباس
سلام خوبید جدید یک هفته ای هست تعداد آنلاین ها را فقط عدد یک نشون میده بی زحمت یه بررسی کنید البته سی‌دی‌ان سایت تغییر...
۱۴۰۱/۰۸/۰۱

پرتو
سلام جناب خسته نباشید عه بازم منظورمو متوجه نشدین اینایی که گفتینو میدونم منظورم اینک کدهایی که توی سایت شما هست همون ادرسی که بهم...
۱۴۰۱/۰۷/۲۹

پرتو
اوکی ممنونم از توضیحاتتون فقط در مورد کد یه چیز بگم من منظورم اینک کجا کدها رو قرار بدم منظورم کدوم قسمت یا اینک کدوم...
۱۴۰۱/۰۷/۲۶

sara24
سلام خسته نباشید کدی رو تو جاوا اسکریپت با if else نوشتم که وقتی روی دکمه (like) کلیک شه اون صفحه رو به لیست...
۱۴۰۱/۰۷/۲۳

پرتو
سلام جناب خسته نباشید جناب الان اون لینکی که فرستادین خوندم فقط نفهمیدم باید چیکار کنم دقیقا یعنی متوجه شدم ولی متوجه نشدم باید دقیقا...
۱۴۰۱/۰۷/۲۲

Zeinab
سلام من میخواستم بدونم که چرا توی اکثر سایت ها اول با universal selector (که با * در css انتخاب میشه) میان padding و margin...
۱۴۰۱/۰۷/۲۱

آیدا
در صفت face در تگ font کاری کنیم که فاصله رو بپذیره؟
۱۴۰۱/۰۷/۱۹

سپهر
سلام خسته نباشید من یک وبلاگ داخل بلاگ بیان دارم ،‌ فاو ایکون هم ساختم ولی نمیدونم چه جوری اپلودش کنم هاست هم ندارم خیلی...
۱۴۰۱/۰۷/۱۵

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم ببخشید اینستاگرام قطعه کلا؟ می دونم قطعه و باید با فیلترشکن رفت منظورم اینک من با فیلترشکن هم نمی...
۱۴۰۱/۰۷/۱۵
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.