i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
آگهی
article

کاربرد ویژگی 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 زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت ثابت در یک قسمت از صفحه نمایش قرار گیرد و حتی با اسکرول نیز تغییری نکند، به عنوان مثال این شیوه ای است که برخی طراحان قالب از آن در کدنویسی های خود (معمولا بیشتر در قالب وبلاگ ها) برای ثابت کردن تصویر پس زمینه استفاده می کنند.
.fixed {
    position: fixed;
    width: 200px;
    height: 100px;
    background: #FF9A9B;
    border: 1px solid #999;
    top: 8px;
    left: 8px;
}
<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>
پیش نمایش آنلاین
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» کار با border و outline در CSS
» خاصیت Background و ویژگی های آن در CSS
» کاربرد خاصیت display در CSS
» نحوه تنظیم لینک (link) در استایل CSS
» سلکتور آی دی (ID) و کلاس (Class) در CSS
commentنظرات (۵۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: علی
زمان: ۰۱:۲۳:۲۱ - تاریخ: ۱۳۹۲/۰۶/۳۰
خسته نباشی
نویسنده: محمدرضا
زمان: ۲۰:۰۸:۵۴ - تاریخ: ۱۳۹۲/۰۷/۲۴
خسته نباشید
یه تگ div دارم که یه border داره و یه عکس پشت زمینه با پزیشنی که بهش دادم یه جایی تو صفحه قرارش دادم
قراره که تو این تگ div متن قرار بگیره ولی مشکل اینجاست که طول و عرضش ثابته یعنی اگر طول متن زیاد باشه از تگ div میزنه بیرون و هر دفعه مجبورم طول عرضش رو به صورت دستی تغییر بدم
میخوام بدونم چی کار باید بکنم که طول و عرض تگ به طور خودکار با توجه به محتوایی که توش قرار میگیره تغییر کنه
من width و height رو به هم به صورت % و هم به صورت auto گذاشتم ولی بازم نشد
background-repeat رو هم به رو حالت repeat گذاشتم ولی بازم نشد
البته از overflow هم که استفاده میکنم فقط رو یه حالتش جواب میده و اونم scroll هستش که تو این حالت هم رو تگ div یه حالت scroll ایجاد میکنه که ادامه مطلب میره زیرش .. ولی من نمیخوام اینطوری بشه
ممنون میشم کمکم کنید
پاسخ: 
اگر تگ div به صورت تو در تو نباشد، قاعدتا با مقدار auto باید اندازه آن متناسب با محتوا تغییر کند، به نظر تگ div مورد نظر در داخل تگ دیگری قرار دارد یا وابسته به تگ دیگری است، برای بررسی بیشتر کدها باید دیده شوند.
نویسنده: محمدرضا
زمان: ۰۰:۱۴:۱۸ - تاریخ: ۱۳۹۲/۰۷/۲۶
ممنون بابت پاسختون
بله تگ div به صورت تو در تو هست
ولی غیر از تو در تو هم چاره ای ندارم
چون یه تگ div برای پس زمینه سفید قرار گرفته و یک div داخلش برای کادر نوشته که اون کادر نوشته رو میخوام طولش متغیر باشه تقریبا میشه گفت مثل قالب سایت شما که یک بکگراند خاکستری داره که احتمالا باید بکگراند body باشه و احتمالا یک تگ div برای زمینه سفید اصلی که لینک های سایت روش قرار گرفته و یک تگ div دیگه با یه کادر داخلش که محل قرار گیری متن رو مشخص کرده
پاسخ: 
طراحی قالب نیاز به تجربه قبلی و آشنایی و تسلط نسبی بر CSS دارد، باید قبلا سورس چند قالب را بررسی و تمرین و تکرار داشته باشید تا به مشکل بر نخورید.
نویسنده: محمدرضا
زمان: ۱۶:۳۰:۲۲ - تاریخ: ۱۳۹۲/۰۷/۲۶
تشکر .. مثل اینکه باید خودم یکم کار کنم تا به جواب برسم
فقط یه سوال دیگه در مورد position که موضوع همین آموزشتون هم هست
من میخوام یه نوار داشته باشم که طولش 50 پیکسل باشه و position فیکس باشه
ولی مشکلم اینجاست که وقتی position رو فیکس میزارم تا وقتی محتوایی توی تگم قرار نگیره اون تگ رو نمایش نمیده و اگر هم محتوا قرار بگیره عرض تگ رو با توجه به محتوا تنظیم میکنه
در حالی که من میخوام بکگراندش در عرض تا بینهایت تکرار شه
میشه گفت یه چیزی مثل نوار آبی بالای فیسبوک
این هم کدی که نوشتم
<div class="block"></div>
.block{
position: fixed;
top:0;
left:0;
background: #00F repeat-x ;
height:50px
}
پاسخ: 
- خاصیت width برای کلاس CSS در نظر نگرفته اید.
- repeat-x برای رنگ معنی خاصی ندارد، این مقدار برای تصاویر استفاده می شود.
- برای این کار از دو تگ div به صورت نمونه زیر استفاده کنید:
.block-container{
width:100%;
height:30px;
background-color:#333;
top:0px;
}
.block{
width:960px;
height:30px;
background-color:#333;
margin-left:auto;
margin-right:auto;
}
<div class="block-container">
<div class="block">
</div>
</div>
نویسنده: محمدرضا
زمان: ۱۰:۲۱:۳۱ - تاریخ: ۱۳۹۲/۰۷/۲۷
خیلی ممنونم از جوابتون
سایتتون عالیه
من خیلی از جواب هام رو اینجا گرفتم
اینکه وقت میزارید و رایگان به مخاطباتون جواب میدین خیلی ارزش داره
ایشالا که موفق باشید
فقط یه سوال دیگه و یه پیشنهاد
سوال این که توی یک سایت صفحه های مختلفی وجود داره که یه سری کد های html توشون ثابته مثل لوگو سایت یا منو لینک ها یا ... میخواستم بدونم راهی هست که مثل css که لینک می کنیم تو همه صفحه ها و اگر تغییری بدیم تو همه صفحه ها اعمال میشه ، برای html هم به همین صورت باشه؟ یعنی اگر تغیری تو یه صفحه ایجاد کردیم توی همه صفحه ها اعمال بشه .
و اما پیشنهاد اینکه اگر یه مقاله در مورد مراحل طراحی یه سایت داینامیک بزارید خیلی خوب میشه . البته نه کد نویسیش .. فقط مراحلش به ترتیب اولویت. چون مثلا من با اکثر کد نویسی ها تا حدودی آشنایی دارم و برای اینکه مسلط بشم باید شروع کنم و چند تا سایت رو طراحی کنم ولی نمیدونم که برای طراحی یه سایت باید از کجا شروع کنم و به کجا برسم
یعنی نمیدونم کی باید قالب رو طراحی کنم یا کی دیتابیس رو بسازم و کی کدهای php رو بنویسم و چطوری یه جایی برای کنترول سایت ایجاد کنم و این مسائل.
پاسخ: 
نظر لطف شما است، در مورد سوال:
در HTML این کار تقریبا تنها از طریق استفاده از iframe امکانپذیر است که روش به روزی نیست، اینگونه موارد را باید با برنامه نویسی سمت سرور (PHP) طراحی کنید.
در مورد پیشنهاد:
سعی ما بر این است که اینچنین مقاله ای را تهیه کنیم، اما به توجه به حجم کاری، در کوتاه مدت امکانپذیر نیست.
نویسنده: محمدرضا
زمان: ۱۱:۵۷:۴۲ - تاریخ: ۱۳۹۲/۰۷/۲۸
سلام
خسته نباشید
ببخشید من چون در حال طراحی قالب هستم و خیلی تجربه ندارم هی برام سوال پیش میاد و مجبورم که مزاحمتون بشم
راستش 2 تا سوال داشم یک اینکه
رزولوشن تصویر تو مانیتور من 1280*960 هستش و در قالبی که طراحی می کنم با توجه به این سایز اندازه ها و مکان محتوا رو مشخص می کنم . قطعا اگر رزولوشن تغییر کنه سایز محتوای سایتم یا کوچکتر دیده میشه یا بزرگتر و احتمال داره حتی مکانشون هم تغییر کنه به عنوان مثال منوای که بالای صفحه گذاشتم وقتی رزولوشن کم میشه 2 تا از لینک ها یه خط میان پایین تر . میخواستم بدونم که باید چی کار کنم که با هر رزولشنی سایز صفحم تنظیم بشه
و اما سوال بعدی
که انگار یادم رفت
یه دفعه دیگه میپرسم !!!
باز هم تشکر
پاسخ: 
سلام
در طراحی قالب وب، معمولا از دو نوع مقداردهی استفاده می شود:
- ثابت و پیکسلی، به فرض 500px.
- داینامیک و درصدی، به فرض %100.
برای ایجاد قالب هایی که در تمام صفحه نمایش ها به یک اندازه دیده شوند، باید از مقدار دهی ثابت استفاده کنید.
نویسنده: محمدرضا
زمان: ۱۷:۱۳:۴۴ - تاریخ: ۱۳۹۲/۰۷/۲۸
ببخشید ولی مشکل من اینجاست که وقتی صفحه Browser رو Zoom out می کنم تمام عناصر صفحه من سمت چپ تصویر قرار میگیرن . البته اولش هر کدوم یک جا قرار می گرفتن اما با تلاشی که کردم موفق شدم همه رو یه جا بیارم
اما تو اکثر سایت ها از جمله سایت شما وقتی Zoom out می کنیم همه عناصر وسط قرار می گیرن
من align همه عناصر رو هم رو حالت center گذاشتم ولی فرقی نکرد
و مشکل اساسی تر وقتی که Zoom in می کنم تمام li هایی که float:right هست بجای اینکه پشت تصویر بمونن و با اسکرول دیده بشن به هم نزدیک میشن و میان خط های بعدی که نماش داده بشن!
پاسخ: 
دوست گرامی این موارد به تجربه کار با خاصیت های متفاوت CSS بر می گردد و مشکلی نیست که بتوان در اینجا آن را حل کرد، باید از پایه و آموزش های مقدماتی با طراحی قالب های کوچک کار کرده باشید و مشکلات این چنینی را به صورت موردی بر طرف کنید تا در هنگام طراحی قالب اصلی کار برایتان مبهم و پیچیده نباشد؛ بلاک ها و عناصر HTML متقابلا بر هم تاثیر می گذارند و اینکه چگونه آنها را مطابق نیازتان و به نحو دلخواه با CSS در کنار هم قرار دهید نیاز به تمرین زیاد دارد.
نویسنده: حمید
زمان: ۱۷:۳۶:۳۸ - تاریخ: ۱۳۹۲/۰۸/۰۱
ایا ممکنه برای یک تگ دو css ایجاد کنیم مثلا یکی واسه رویداد onclick و یکی برای رویداد onchange
پاسخ: 
در CSS رویداد یا selector برای onclick و onchange وجود ندارد، اما می توانید برای فرم ها از focus به جای onclick استفاده کنید:
<style type="text/css">
.input:focus{
background:#FFC;
}
</style>
<input class="input" type="text">
برای onchange هم یک تابع در جاوا اسکریپت اجرا کنید که بتواند کلاس css فیلد مورد نظر را تغییر دهد (به کلاسی تغییر کند که در حالت onchange مورد انتظار است):
<style type="text/css">
.changed{
background:#9C9;
}
</style>
<script type="text/javascript">
function ChangeIt(id){
document.getElementById(id).className = 'changed';
}
</script>
<input id="test-1" type="text" onchange="ChangeIt(this.id);">
نکته: رویداد onchange با خارج شدن از حالت focus رخ می دهد.
نویسنده: مجید
زمان: ۱۴:۰۸:۱۶ - تاریخ: ۱۳۹۲/۰۸/۰۴
من یه تگ div دارم با ابعاد 400 در 400 می خوام توش یه سری عناصر بذارم ولی طول عناصرم بیشتر از ابعاد تگ میشه چطور میتونم به تگ خاصیت اسکرول بدم تا عناصرش بالا پایین بشن
پاسخ: 
می توانید از نمونه استایل CSS زیر استفاده کنید:
<style type="text/css">
.main{
height:400px;
width:400px;
overflow:scroll;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid #999;
}
</style>
<div class="main"></div>
نویسنده: امیدی
زمان: ۱۲:۲۷:۳۶ - تاریخ: ۱۳۹۲/۰۸/۱۳
سلام
مطالب سایتتون جالب و آموزنده هست. یه سوال داشتم، من در سایت که طراحی می کنم یه منو باز شو و یه اسلاید شو دارم. وقتی منو رو باز می کنم زیر اسلاید شو باز می شه. یعنی حق تقدم با تصاویر اسلاید شو هستش. هر چقدر هم که بر position و display اون تغییرات ایجاد می کنم جواب نمی گیرم . فکر می کنم باید مشکل از اسلاید شو باشه . اگه کمکم کنید ممنون میشم. چون 2 هفته ای هست که واقعا درگیرم کرده و به جواب نمی رسم
پاسخ: 
سلام
برای تعیین حق تقدم در نمایش عناصر در صفحات وب، از خاصیت z-index در CSS استفاده می شود.
نویسنده: جلالی
زمان: ۱۱:۲۴:۰۱ - تاریخ: ۱۳۹۲/۰۸/۱۸
سلام. سوالی داشتم. من دو ستون دارم که با تگ div نوشته شده و در کنار هم هستند. یعنی یکی سایدبار هست و یکی هم مطالب صفحه. حالا به تگ sidebar خاصیت 1px solid #ccc دادم تا از متنم جدا بشه. اما اگه تگ متون عرضش بیشتر از سایدبارم بشه، خط ادامه پیدا نمی کنه.
در کل باید کاری کنم که در عین حال هر دو از خاصیت height:auto و overflow:hidden استفاده می کنند، عرض هاشون با هم برابر بشه تا خط جدا کننده هم امتداد پیدا کنه. می تونید کمکم کنید؟؟؟
پاسخ: 
سلام
سوالتان واضح نیست! برای حل اینگونه موارد قاعدتا باید نمونه کدی از صفحه و استایل CSS آن درج شود.
نویسنده: عباس برجی
زمان: ۱۶:۵۳:۳۰ - تاریخ: ۱۳۹۲/۱۱/۱۷
با سلام
یه سوال دارم
من دو تا div دارم که با خاصیت float در کنار هم قرا دادم یکی شون رو fixed کردم و میخوام محتوای div بعدی دقیقا وسط قرار بگیره.
margin=0 auto هم تاثیری نداره.
لطفا کمکم کنید.
پاسخ: 
سلام
لطفا نمونه کدتان را قرار دهید تا ویرایش شود!
نویسنده: مصطفی
زمان: ۱۸:۲۳:۱۱ - تاریخ: ۱۳۹۳/۰۱/۰۹
سلام میخواستم بدونم ایا با CSS میشه شکل scrollbar رو تغییر داد یا رنگش رو عوض کرد
پاسخ: 
سلام
بله، البته اینکه در همه مرورگرها عمل کند تضمینی نیست، در این خصوص آموزش و نرم افزارهایی در وب وجود دارد، لطفا جستجو کنید.
نویسنده: مهدی
زمان: ۱۴:۲۵:۲۷ - تاریخ: ۱۳۹۳/۰۲/۲۳
سلام من یه <div> دارم که توی اون دو تا <div> دیگه با ارتفاع متفاوت تعریف کردم خاصیت هر دوی اونا flot:left هست ولی در زمان اجرا <div> ای که ارتفاع بیشتری داره از <div> اصلی خارج میشه. من باید چکار کنم؟
پاسخ: 
سلام
لطفا یک نمونه کد قرار دهید، صرفا توضیح برای درک و حل مشکل کافی نیست.
نویسنده: مژگان
زمان: ۰۹:۵۶:۴۹ - تاریخ: ۱۳۹۳/۰۳/۲۸
سلام
ببخشید شما در پاسخ به یکی از دوستان گفتین که اگه ابعاد را پیکسلی بده در صفحه نمایش های مختلف تغییر مکان نمیده ولی من کل ابعاد صفحه رو پیکسلی دادم از متن ها گرفته تا هدر و کلیه بلوک ها من میخوام یه متن رو بذارم روی یه عکس میخوام راهنماییم کنین که چی کار کنم که تغییر مکان ندن؟
ممنون از لطفتون
پاسخ: 
سلام
سوال کاربر در رابطه با فرمت بندی صفحه است اما مشکل شما مربوط به نمایش یک پیام بر روی یک تصویر است، به هر صورت می توانید از نمونه زیر پیروی کنید:
<style type="text/css">
#container{
height:400px;
width:400px;
position:relative;
float:right;
}
#image{
position:absolute;
left:0;
top:0;
}
#text{
z-index:100;
position:absolute;
color:#F00;
font-size:24px;
font-weight:bold;
left:20px;
top:50px;
}
</style>
<div id="container">
<img id="image" src="image.jpg">
<p id="text">
Hello World!
</p>
</div>
paged صفحه 1 از 4
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




6 × 9
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
سفارش آگهی
Webgoo.ir

امکان بهره مندی از تخفیف