تبلیغات
تبلیغات متنی
پرچم تشریفات با کیفیت بالا و قیمت ارزان
پرواز از نگاه دکتر ماکان آریا پارسا
دکتر علی پرند فوق تخصص جراحی پلاستیک
تجهیزات و دستگاه های کلینیک زیبایی
محبوبترینها
سررسید تبلیغاتی 1404 چگونه می‌تواند برندینگ کسب‌وکارتان را تقویت کند؟
چگونه با ثبت آگهی رایگان در سایت های نیازمندیها، کسب و کارتان را به دیگران معرفی کنید؟
بهترین لوله برای لوله کشی آب ساختمان
دانلود آهنگ های برتر ایرانی و خارجی 2024
ماندگاری بیشتر محصولات باغ شما با این روش ساده!
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1848567478
قرار گرفتن دو div در داخل یک div -
واضح آرشیو وب فارسی:سایت ریسک: قرار گرفتن دو div در داخل یک div Helen_Farhani 26 اسفند 1386, 20:29من میخوام که 2 تا div را در داخل یک div قرار بدم به این شکل که هر کدام از این 2 تا در گوشه پایین DIV اصلی قرار بگیره. اما هر چی سعی کردم یکی از این دو تا در بالا قرار میگرفت. ممنون میشم راهنمایی کنید. marSoul 26 اسفند 1386, 23:49اگه ممکنه شکل اینها رو بکشید، من درست متوجه نشدم echessdesign 27 اسفند 1386, 13:23درود بر شما اگر درست متوجه منظور شما شده باشم، راه حل این است که: به div مادر ، Padding-top دهید... Helen_Farhani 03 فروردين 1387, 16:24 marSoul 03 فروردين 1387, 17:35از این کد استفاده کنید : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <html> <head> <meta "Content-Type" content="text/html; charset=utf-8"> <title>Test Document</title> <style type="text/css"> <!-- * { margin:0; padding:0; } #div1 { border:1px solid #FF0000; width:800px; height:600px; } #div2 { border:1px solid #0000FF; width:300px; height:200px; position:absolute; margin:390px 0 0 0; left: 0px; top: 0px; } #div3 { border:1px solid #66FF00; width:200px; height:200px; float:right; margin:370px 0 0 0; } --> </style> </head> <body> <div id="div1">DIV 1 <div id="div2">DIV 2</div> <div id="div3">DIV 3</div> </div> </body> </html> Helen_Farhani 06 فروردين 1387, 18:29میبخشید که یک سوال دیگه میپرسم برای اجرای طرح زیر باید چکار کنم ( با توجه به اینکه میخوام DIV 2 و DIV 3 دارای پس زمینه باشند و تا لبه های پنجره مرورگر ادامه داشته باشند. ) marSoul 06 فروردين 1387, 21:02کد : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <html> <head> <meta "Content-Type" content="text/html; charset=utf-8"> <title>Test Page</title> <style type="text/css"> <!-- * { margin:0; padding:0; } #div1 { width:20%; float:left; background:#999999; text-align:center; height:600px; } #div2 { width:60%; float:left; background: #CCFF00; text-align:center; height:600px; } #div3 { width:20%; float:left; background:#999999; text-align:center; height:600px; } --> </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </body> </html> Helen_Farhani 11 فروردين 1387, 15:05از این کد استفاده کنید : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <html> <head> <meta "Content-Type" content="text/html; charset=utf-8"> <title>Test Document</title> <style type="text/css"> <!-- * { margin:0; padding:0; } #div1 { border:1px solid #FF0000; width:800px; height:600px; } #div2 { border:1px solid #0000FF; width:300px; height:200px; position:absolute; margin:390px 0 0 0; left: 0px; top: 0px; } #div3 { border:1px solid #66FF00; width:200px; height:200px; float:right; margin:370px 0 0 0; } --> </style> </head> <body> <div id="div1">DIV 1 <div id="div2">DIV 2</div> <div id="div3">DIV 3</div> </div> </body> </html> تنها راه برای اینکه div سمت راست (div 3) را در گوشه پایین div 1 قرار دهیم، استفاده از margin میباشد یا اینکه راه دیگری هم وجود دارد؟ echessdesign 11 فروردين 1387, 21:17ارادتمندم هلن جان کافیه که شما اطراف div3 رو خالی کنید: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <html> <head> <meta "Content-Type" content="text/html; charset=utf-8"> <title>Test Page</title> <style type="text/css"> <!-- * { margin:0; padding:0; } #div1, #div2, #div3 { width:20%; float:left; background:#999; text-align:center; height:600px; } #div2 { width:60%; background: #CCFF00; } #div3 { background:red; clear:both; } --> </style> </head> <body> <div id="div1">111</div> <div id="div2">222</div> <div id="div3">333</div> </body> </html> Helen_Farhani 12 فروردين 1387, 06:54فکر میکنم که منظورم را بد بیان کردم. چون خروجی این چیزی که شما فرمودید مد نظر من نیست. چیزی که میخوام دقیقا مانند تصویر زیر است. اما با این تفاوت که از margin برای فاصله div 3 از بالای div 1 استفاده نکنیم. یک چیزی شبیه valign و bottom echessdesign 12 فروردين 1387, 10:21بدین شکل () منظور شماست؟ Helen_Farhani 15 فروردين 1387, 11:52خیر. در مثال قبل برای اینکه div 3 در پایین و در گوشه راست صفحه قرار بگیره ما از margin-top استفاده کردیم. اما اگر ارتفاع div 1 بخاطر محتوای زیاد تغییر کرد، div 3 در گوشه پایین قرار نمیگیره و در وسطهای صفحه قرار میگیرد. Helen_Farhani 15 فروردين 1387, 20:44من میخواهم div 2 که مقدار پهنای آن 800 پیکسل است در وسط صفحه قرار بگیرد و div 2 , 3 هر کدام در راست و چپ قرار بگیرند. و در سایزهای مختلف پنجره مرورگر تغییر سایز داشته باشند ( به سمت راست و چپ پنجره مرورگر بچسبند ) . در کلیه tatorial هایی که در net پیدا کردم عکس این عمل اتفاق افتاده بود که نمی توانستند نیاز من را برآورده کنند (پهنای ستون وسط تغییر میکند و پهنای دو ستون کناری ثابت میماند). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <html> <head> <meta "Content-Type" content="text/html; charset=utf-8"> <title>Test Page</title> <style type="text/css"> <!-- * { margin:0; padding:0; } #div1 { width:50%; float:left; background:#999999; text-align:center; height:600px; } #div2 { width:800px; float:left; background: #CCFF00; text-align:center; height:600px; } #div3 { width:50%; float:left; background:#999999; text-align:center; height:600px; } --> </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </body> </html> آرایش مورد نظر من: amirabbas_p30magazine 15 فروردين 1387, 23:04اون مشکل 3 تا div که می خواستید دو تاش در گوشه های پایین div اصلی قرار بگیره با این کد به راحتی قابل درست کردنه #div1 { border:1px solid #FF0000; width:800px; height:600px; position: relative } #div2 { border:1px solid #0000FF; width:300px; height:200px; position:absolute; left: 0px; bottom: 0px; } #div3 { border:1px solid #66FF00; width:200px; height:200px; position: absolute; bottom: 0; right: 0; } مشکل دوم رو دارم فکر میکنم فکر نکنم به این راحتی ها بشه اون طرح رو به اون شکلی که شما می خوای پیاده کرد Helen_Farhani 16 فروردين 1387, 00:09راستش میدونید چرا درگیر این موضوع شدم؟! در template که طراحی کردم در سمت راست و سمت چپ ستون اصلی دو ستون با پهنای 30 پیکسل دارم که یک سایه ایجاد میکند و از آنجا که مجبور شدم بجای استفاده از فرمت GIF از فرمت PNG استفاده کنم و با توجه به اینکه فرمت فوق در نسخه هایی از IE به درستی نمایش داده نمیشود مجبور شدم که 2 تصویر با فرمت JPG و با عرض زیاد (500 پیسکل) برای هر دو طرف ستون اصلی ( ستونی که در وسط پنجره مرورگر قرار دارد) تهیه کنم و در دو ستونی کناری پنجره مرورگر بصورت background نمایش بدهم. به همین دلیل دو ستون کناری باید تا کناره پنجره مرورگر امتداد داشته باشد تا علاوه بر نمایش سایه ها بتوانم background اصلی صفحه را هم نمایش بدهم. امیدوارم که توانسته باشم منظورم را به درستی منتقل کرده باشم. amirabbas_p30magazine 16 فروردين 1387, 09:12اگر اون چیزی که می خوای رو با عکس نشون بدی شاید بشه از طریق دیگه درستش کرد. این شیوه برای اون کار مناسب نیست Helen_Farhani 16 فروردين 1387, 11:58تصویر زیر را ببینید: () من برای bavkgroaund صفحه (ستون سمت راست و سمت چپ) دو فایل تهیه کردم ( فایلها به این پست attach شده اند) عرض این دو فایل زیاد هست ( حدود 1000 پیکس برای هر کدام از این فایلها ). وقتی این template را با table پیاده سازی کرده بودم یک جدول با 3 ستون داشتم که ستون وسطی محتوای اصلی سایت در آن قرار میگرفت و پهنای ثابتی داشت و هرکدام از تصاویر پس زمینه در دو ستون کناری قرار داشتند که در resoletion های مختلف تغییر سایز پیدا میکردند و پس زمینه به درستی نمایش داده میشد. متاسفانه این template را نمیتونم با div اجرا کنم. amirabbas_p30magazine 16 فروردين 1387, 12:54خوب این مثل آب خوردنه شما باید دو تا div تو هم داشته باشید. div داخلی در اصل همون div هست که پس زمینه سفید رو داره. اون div والد باید یه تصویر تو پس زمینش باشه من فایل رو درست کردم و پیوست کردم. باز کنید و فایل رو ببینید. فکر نم کاملا واضح باشه. اگر سوالی بود بپرسید Helen_Farhani 16 فروردين 1387, 13:10یک مشکل کوچولو وجود داره. پس زمینه ای که در template من هست یک تصویر است که به شکل pattern هست و اون تصویر در پس زمینه تکرار میشه ( کنار هم چیده میشه). برای اون راه حلی دارید؟ چیزی که به ذهن من رسید همون تکنیک دست و پا شکسته قبلی بود که شما اونو بهینه کردین. amirabbas_p30magazine 16 فروردين 1387, 13:26خوب یه خورده کار سخت میشه اگر بخواید از pattern استفاده کنید با این pattern رو در پس زمینه body قرار بدید و برای اون سایه های دو سمت ستون کناری هم باید سایه مثلا 15 پیکسلی رو در زمینه شفاف ایجاد کنید و با فرمت png ذخیره کنید. دقیقا همون تصویری که من برای پس زمینه ساختم رو باید بسازید ولی اون دو سایه چپ و راست باید transparency داشته باشن متاسفانه IE از شفافیت فایل های png ساپورت نمی کنه و مجبورید از جاوا اسکریپت هم برای حل مشکل استفاده کنید Helen_Farhani 16 فروردين 1387, 13:39در صورت استفاده از جاوا اسکریپت، مشکلی در هیچ یک از نسخه های IE بوجود نمیاد؟ و آیا این روش، روش استانداردی است؟ یادم میاد که قبلا از همچین چیز مشابهی اسفاده کردم. اما هنگام لود شدن صفحه یک پیام مبنی بر نصب یک activex در IE نمایش میداد که بنظرم از نظر کاربر آنچنان پسندیده نبود. amirabbas_p30magazine 16 فروردين 1387, 15:52روی IE 6 به بعد جواب میده و هیچ چیز اضافی هم لازم نداره. منتها همونطور که گفتم روی IE نسخه قبل از 6 کار نمی کنه. البته اینی که من میگم با فریم ورک جاوا اسکریپته jQuery امتحان کردم. با شیوه های دیگه نمیدونم. البته یه راه دیگه هم هست. شما میتونید یه فایل فوق العاده عریض درست کنید. مثلا 2048 پیکسل عرض و فقط 30 پیکسل ارتفاع. بعد اون pattern رو تو این تصویر تکرار کنید. درست وسط این فایل تصویر عریض، اون فضای سفید مثلا 700 پیکسلی رو ایحاد کنید و سایه ها رو هم ایجاد کنید بعد اینو ذخیره کنید و در پس زمینه اون div با آیدی wrapper قرارش بدید و به شکل عمودی هم تکرارش کنید. منتها باید عرض اون wrapper رو نا محدود بذارید که با بزرگتر شدن صفحه کش بیاد. Helen_Farhani 16 فروردين 1387, 16:10بله حق با شماست. تنها راه حل همین هست. منتها باید عرض اون wrapper رو نا محدود بذارید که با بزرگتر شدن صفحه کش بیاد. منظورتون این هست که مقدار width اون را برابر 100% قرار بدهم؟ amirabbas_p30magazine 18 فروردين 1387, 11:53فکر کنم این بهتر باشه که width رو معادل auto قرار بدید.
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 2487]
-
گوناگون
پربازدیدترینها