تبلیغات
تبلیغات متنی
محبوبترینها
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
پروازهای مشهد به دبی چه زمانی ارزان می‌شوند؟
تجربه غذاهای فرانسوی در قلب پاریس بهترین رستوران‌ها و کافه‌ها
دلایل زنگ زدن فلزات و روش های جلوگیری از آن
خرید بلیط چارتر هواپیمایی ماهان _ ماهان گشت
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1835147372
تفاوت اساسی بین div و table -
واضح آرشیو وب فارسی:سایت ریسک: تفاوت اساسی بین div و table Mohammadreza 07 دي 1387, 13:42با سلام خدمت اساتید گرامی من می خوام یه سایت بزنم که سه ستونه هست ... هر سه طرف باید از backgroung-color استفاده کنم و هم اندازه هم پایین و بالا بشه ... برای این کار از table راحت می شه استفاده کرد ... ولی مشکله من اینه که می خوام با استفاده از div و float این کار رو انجام بدم ! با div می شه راحت سه ستونه درست کرد اما مشکل div اینه که نمی شه هر سه تا ستون با هم پایین بیان ... لطفا اگه راهی برای این مشکل هست راهنمایی بفرمایید بنده رو ! یه عکس رو هم atach کردم که توضیحم کامل بشه با تشکر از همگی ... shnoit 07 دي 1387, 16:13میدوتی اول بکگراند یه div با عرض مورد نظرت که سه تا divدیگر درش جای میگیرند و رو بزاری بعد 3تا div رو در اون جای بدی، در این صورت رنگ ها کلا" چون تو div اصلی هستن به یک اندازه کشیده میشن پایین. شاید راه دیگه ای هم باشه، ولی این آسون ترینش بود که به نظرم رسید.:wink: Mohammadreza 07 دي 1387, 17:44نه عزیز نمی خوام با images کار کنم ! با bgcolor می خوام بکشم ! Mohammadreza 07 دي 1387, 18:28خوب ، اولا یه معذرت خواهی بکنم بابت تاپیک تکراری ... ( سرچ نکردم دیگه :D ) طبق جستجویی که کردم و تاپیک هایی که اساتید مثل آقایون Ali_ix , echedesign , nabi , amirabbas و ... رو دیدم متوجه شدم که راهی برای ان کاری که من می خوام بکنم نیست الا استفاده از یه background-image برای کل صفحه که سه ستون رو پوشش بده ... ! و این که یه div تو در تو بزنم ! که البته اونم باهاش فقط دوستونی می شه زد ! فک کنم یه جمع بندی از نتایج راه خل های پیدا شده برای این مشکل تا اینجا نوشتم حالا اگه اساتید راهی پیدا کردن ما رو بی خبر نزارن ! فعلا :) echessdesign 11 دي 1387, 21:50درود بر شما 2 روش به شما معرفی می کنم، امیدوارم مشکل رو حل کنه: 1- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <html lang="en"> <head> <meta "Content-Type" content="text/html; charset=utf-8"> <title>Equal Height Columns</title> <style type="text/css"> #container { float: left; background: url(images/example-6.gif) bottom center no-repeat; padding-bottom: 1px; } #inner { float: left; overflow: hidden; } #inner div { float: left; background: #ccc; border: 1px solid #000; width: 200px; margin-right: 5px; margin-bottom: -1000px; padding-bottom: 1000px; } #inner .col2 { background: #eee; } #inner .col3 { margin-right: 0; } .clear { clear: both; padding-top: 10px; } </style> </head> <body> <div id="container"> <div id="inner"> <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. Aliquam iaculis nonummy libero. Nulla nisi libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget metus. Aliquam non quam. Integer sit amet pede eu est gravida fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate tempus felis. Vestibulum tincidunt elit sit amet est. Sed ultricies tempus enim. Curabitur quam augue, fringilla ac, imperdiet et, dignissim sit amet, erat. Aenean ornare. Quisque turpis neque, suscipit pretium, aliquet sed, eleifend vitae, elit. Ut velit neque, venenatis non, convallis at, nonummy tincidunt, nisl. Morbi sapien.</p> </div> <div class="col2"> <p>Praesent mauris. Proin arcu. Maecenas elementum. Curabitur congue, ante ut pretium suscipit, lectus elit porttitor arcu, ac porta magna ante sit amet nulla. Suspendisse sed tellus. In eget mi in risus adipiscing lobortis. Nam lobortis ipsum quis nibh. Donec odio. Nullam fermentum, leo id condimentum viverra, augue nibh viverra dui, in placerat arcu sapien nec velit. Nunc tincidunt molestie elit. Sed est mi, posuere vitae, congue vitae, pulvinar vel, enim. Morbi vestibulum erat sed risus. Nulla facilisi.</p> <p>Integer nec neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dictum venenatis velit. Morbi interdum eleifend sapien. Morbi a mauris. Nulla auctor varius elit. Mauris id nibh ac orci egestas gravida. Nam orci. Fusce dui. Nulla interdum pharetra mauris. Sed fermentum purus ac lectus. Vivamus et dui ac quam vehicula tristique. Cras sem. Integer non nisi commodo elit sagittis interdum.</p> </div> <div class="col3"> <p>Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus a sapien. Donec porttitor tincidunt velit. Pellentesque eget sem. Duis ac sem ac sapien euismod consequat. Ut tortor urna, bibendum sed, fringilla sit amet, tempor quis, ipsum. Sed vehicula tempor nibh. Aliquam et nunc.</p> <p>Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, cursus vel, faucibus vel, euismod in, sem. Sed vitae quam a dolor pulvinar cursus. Pellentesque molestie, libero sit amet auctor venenatis, velit odio condimentum elit, eu rhoncus justo risus a justo. Sed quis pede. Aliquam erat volutpat. Sed diam est, imperdiet at, convallis et, congue vel, ante.</p> </div> </div> </div> <p class="clear">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. Aliquam iaculis nonummy libero. Nulla nisi libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget metus. Aliquam non quam. Integer sit amet pede eu est gravida fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate tempus felis. Vestibulum tincidunt elit sit amet est. Sed ultricies tempus enim. Curabitur quam augue, fringilla ac, imperdiet et, dignissim sit amet, erat. Aenean ornare. Quisque turpis neque, suscipit pretium, aliquet sed, eleifend vitae, elit. Ut velit neque, venenatis non, convallis at, nonummy tincidunt, nisl. Morbi sapien.</p> </body> </html> 2- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <html lang="en"> <head> <meta "Content-Type" content="text/html; charset=utf-8"> <title>Equal Height Columns</title> <style type="text/css"> #container { float: left; overflow: hidden; } #container div { float: left; background: #ccc; border: 1px solid #000; width: 200px; margin-right: 5px; margin-bottom: -2000px; padding-bottom: 2000px; } #container .col2 { background: #eee; } #container .col3 { margin-right: 0; } </style> </head> <body> <div id="container"> <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. Aliquam iaculis nonummy libero. Nulla nisi libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget metus. Aliquam non quam. Integer sit amet pede eu est gravida fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate tempus felis. Vestibulum tincidunt elit sit amet est. Sed ultricies tempus enim. Curabitur quam augue, fringilla ac, imperdiet et, dignissim sit amet, erat. Aenean ornare. Quisque turpis neque, suscipit pretium, aliquet sed, eleifend vitae, elit. Ut velit neque, venenatis non, convallis at, nonummy tincidunt, nisl. Morbi sapien.</p> </div> <div class="col2"> <p>Praesent mauris. Proin arcu. Maecenas elementum. Curabitur congue, ante ut pretium suscipit, lectus elit porttitor arcu, ac porta magna ante sit amet nulla. Suspendisse sed tellus. In eget mi in risus adipiscing lobortis. Nam lobortis ipsum quis nibh. Donec odio. Nullam fermentum, leo id condimentum viverra, augue nibh viverra dui, in placerat arcu sapien nec velit. Nunc tincidunt molestie elit. Sed est mi, posuere vitae, congue vitae, pulvinar vel, enim. Morbi vestibulum erat sed risus. Nulla facilisi.</p> <p>Integer nec neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dictum venenatis velit. Morbi interdum eleifend sapien. Morbi a mauris. Nulla auctor varius elit. Mauris id nibh ac orci egestas gravida. Nam orci. Fusce dui. Nulla interdum pharetra mauris. Sed fermentum purus ac lectus. Vivamus et dui ac quam vehicula tristique. Cras sem. Integer non nisi commodo elit sagittis interdum.</p> </div> <div class="col3"> <p>Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus a sapien. Donec porttitor tincidunt velit. Pellentesque eget sem. Duis ac sem ac sapien euismod consequat. Ut tortor urna, bibendum sed, fringilla sit amet, tempor quis, ipsum. Sed vehicula tempor nibh. Aliquam et nunc.</p> <p>Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, cursus vel, faucibus vel, euismod in, sem. Sed vitae quam a dolor pulvinar cursus. Pellentesque molestie, libero sit amet auctor venenatis, velit odio condimentum elit, eu rhoncus justo risus a justo. Sed quis pede. Aliquam erat volutpat. Sed diam est, imperdiet at, convallis et, congue vel, ante.</p> </div> </div> </body> </html> اگر به هر 2 مثال توجه کنید، به div که ستون ها را در بر می گیرد، مقدار overflow را برابر hidden داده بدین معنی که عناصری که داخل آن هستند، در صورتی که اندازه آن ها بیش از div در بر گیرنده باشد، مقدار اضافی، مخفی شود. سپس به اولین div ، مقدار margin از پایین را برابر مقدار منفی است، سپس padding از همان جهت را، با همان مقدار، برابر همان مقدار عددی margin داد. کار تمام شد. اگر سوالی داشتید من در خدمتم.
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 524]
-
گوناگون
پربازدیدترینها