• پایان فعالیت بخشهای انجمن: امکان ایجاد موضوع یا نوشته جدید برای عموم کاربران غیرفعال شده است

استفاده از ۲ DIV در داخل ( بالا و پائین ) DIV دیگر

شايان

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,814
لایک‌ها
9
ديديد گاهي وقتا يه چيزي هست ... كه فكر ميكنيد خيلي ساده ست و ممكنه پرسيدنش خنده دار باشه !

مشكل منم از هموناس !

نميدونم اصلا ميشه يا نه ... سخت يا آسون ! ولي من ميخوام اين كار رو با DIV بكنم ... نميشه !!!!

با Table تقريبا تو 1 دقيقه انجام ميشه ! :D ولي با DIV نشد كه نشد !!!

اينو ببينيد :

div7ty.jpg



اون 2 تا مستطيل آبي و قرمز ... 2 تا DIV هست ... و كل عكس هم يه DIV !

چطوري ميشه بدون توجه به ارتفاع DIV اصلي ( بزرگه ) ... اين 2 تا اينجا قرار بگيرن ؟! يعني با بزرگ و كوچيك كردن DIV اصلي ( از طول ) اون 2 تا همچنان يكيش بالا و اونيكي پائين باشه !
 
thomson762

thomson762

مدیر بازنشسته
کاربر فعال
تاریخ عضویت
19 اکتبر 2003
نوشته‌ها
2,082
لایک‌ها
11
من که درست نفهمیدم چی می خواین ولی فکر کنم تا حدودی فهمیدم !
از css باید استفاده کنید !
 
شايان

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,814
لایک‌ها
9
:D

منظورت چيه بايد ازCSS استفاده كني ؟!؟!؟ :D :D

خب منم همينو پرسيدم ديگه !!!!
 
A

artin

کاربر تازه وارد
تاریخ عضویت
19 می 2004
نوشته‌ها
2,114
لایک‌ها
2
حالا بی کاری می خوای این کارو با دی ای وی انجام بدی
 
ei_baba_bi_khial

ei_baba_bi_khial

Registered User
تاریخ عضویت
25 اکتبر 2003
نوشته‌ها
702
لایک‌ها
20
محل سکونت
Esfahan
شايان جان فرزندم! :p يكم بيشتر توضيح ميدادي آخه.
من درست متوجه نشدم مثلا يه همچين چيزي؟ :
HTML: 
<HTML>
<body>

<div style="width:100%; height:100%; direction:ltr">

  <div style="width:50px; height:20px; background:red ">
  </div>

  <div style="width:100%; height:80%; background:#ffffff">
  </div>

  <div style="width:50px; height:20px; background:blue">
  </div>

</div>

</body>
</HTML>
كه از يه div اضافی وسط اون دو تا کوچیکا استفاده شده که با توجه به سایز اون دو تا کوچیکای آبی و قرمز! :wacko: اگه اون ارتفاع 80 درصده رو تغییر بدی یه جورایی درست میشه.
ببخشید اگه منظورت این نیست باز توضیح بده ;)
 
ehsan

ehsan

Administrator
مدیر انجمن
Administrator
تاریخ عضویت
5 دسامبر 2002
نوشته‌ها
7,949
لایک‌ها
3,918
محل سکونت
Internet
من یه کم فکر کردم... یه راه حل نسبتا کار راه بنداز ولی بد:

HTML: 
<html>
<head>
<title>test</title>
<style>
html,body {
height:100%;
margin: 0;
}
#outer {
height:100%;
min-height:100%;
}
#top {
background-color: #336600;
width: 100px;
}
#bottom {
background-color: #ff6600;
width: 100px;
}
#main {
height: 90%;
}
</style>
</head>
<body>
<div id="outer">
 <div id="top">&nbsp;</div>
 <div id="main">&nbsp;</div>
 <div id="bottom">&nbsp;</div>
</div>

</body>
</html>

به نظر من طرح مساله غلطه... چون اگه قراره مطلب بیاد توش که خب با توجه به حجم مطلب ارتفاع عوش میشه ولی اگه مطلب نمیاد توش پس قاعدتا باید اندازه نسبتا فیکسی داشته باشه.

راستی با این یه کم بازی کن:
HTML: 
#main {
height: 90%;
}
 
شايان

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,814
لایک‌ها
9
بچه ها اولا دمتون گرم كه جواب داديد ! ( لطفا تا مشكلم حل بشه بازم جواب بديد )

در مورد Table ... نميدونم چه تعصب خاصي رو استفاده نكردن از Table دارم !!! يعني ترجيم ميدم طرح رو عوض كنم ... ولي از Table استفاده نكنم !

در مورد اين مشكل !

راهحل ها خوب بود ولي كار من راه نميفته !!!

الان با عكس توضيح ميدم .

div22kb.jpg


همونطور كه ميبينيد ... 2 تا DIV آبي و قرمز من هم طول ثابت داره ... هم عرض ثابت ! حالا عرضش كه مهم نيست ... ولي طولش مشخصه ! براي همين نميتونم از " % " استفاده كنم !!!

ببينيد ... من ميخوام وقتي اون DIV بيروني ( مستطيل مشكي ) طولش ( كه با " ؟؟؟ " مشخص كردم ... يعني مشخص نيست ) تغيير كرد ، اون 2 تا DIV آبي و قرمز همچنان بالا و پائين اين كادر باشن !

در اصل بايد طوري تنظيم بشه كه همه تغيرات طول روي DIV اصلي ، فقط روي مقدار " L " تاثير داشته باشه !

حالا نميدونم متوجه شديد يا نه ... ديگه نميدونم چطوري توضيح بدم .
 
nendoke

nendoke

کاربر تازه وارد
تاریخ عضویت
31 آگوست 2003
نوشته‌ها
425
لایک‌ها
9
سن
39
محل سکونت
Some Where in Moon !
بیا فکر کنم همین باشه عزیزم :

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test , three layer nested top + bottom , by Nendoke</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
@charset "utf-8";
/* CSS Document */

.main {
	margin: 0px;
	padding: 0px;
	width: 200px;
	text-align: center;
	border: 1px solid #000000;
}
.top{
	padding: 0px;
	height: 20px;
	width: 50px;
	margin-top: 0px;
	background-color: #FF0000;
}
.bottom{
	height: 20px;
	width: 50px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	background-color: #0066CC;
}
</style>
<body>
<div class="main"> 
  <div class="top"></div>
  <p>this</p>
  <p> is </p>
  <p>  A</p>
  <p> Sample</p>
  <p> Input </p>
  <div class="bottom"></div>
</div>
</body>
</html>
 
ehsan

ehsan

Administrator
مدیر انجمن
Administrator
تاریخ عضویت
5 دسامبر 2002
نوشته‌ها
7,949
لایک‌ها
3,918
محل سکونت
Internet
به نقل از ei_baba_bi_khial :
بابا استاندارد! خب همونه دیگه! :blink: :)
کلیک کنید تا بازشود...
شرمنده من بعد از اینکه نوشتم مطلبتو دیدم... خواستم مطلب خودمو حذف کنم یه کم زور به فشارم اومد این همه تایپ کرده بودم! ;) :blink: :D
 
ei_baba_bi_khial

ei_baba_bi_khial

Registered User
تاریخ عضویت
25 اکتبر 2003
نوشته‌ها
702
لایک‌ها
20
محل سکونت
Esfahan
به نقل از ehsan :
شرمنده من بعد از اینکه نوشتم مطلبتو دیدم... خواستم مطلب خودمو حذف کنم یه کم زور به فشارم اومد این همه تایپ کرده بودم! ;) :blink: :D
کلیک کنید تا بازشود...
;) :D

شایان عامو! میگی اون div اصلی ارتفاعش مشخص نیست یعنی چی آخه؟! بالاخره یا باید ارتفاه بهش بدی یا با درصد ارتفاعشو تعیین کنی دیگه!
بعدش با این همه توضیح که باز دادی همین مثالی که احسان زد همین کارو میکنه دیگه :wacko:.اون آبی و قرمزه سر جاشون میمونن دیگه.
میگماا اینا چند تاس!!!! ؟! :p ;)
 
شايان

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,814
لایک‌ها
9
ببين ! اينكه ميگم مشخص نيست ! خب مشخص نيست ديگه ! :D

چون بستگي به متني داره كه توش قرار ميكيره ! و مثل وبلاگ متغير هست !

من هنورز ايني كه نندوك داده رو تست نكردم ... الان نگاه ميكنم .

راستي ... من با table ساختم تموم شد ! با اينكه خيلي خيلي بدم مياد !

ولي اگر نتونم با DIV حل كنم ... همون رو ميذارم .

مشكل فقط اينه كه VAlign تو CSS نداريم !!!

يعني يه Vertical-Align هست ( كه خودم هم تاپيكش رو زدم ) ولي 99% موارد كار راه نميندازه !
 
شايان

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,814
لایک‌ها
9
اينم نشد ! يعني اين چيزي كه نندوك درت كرده كاملا درت و حرفه ايه ! ولي به درد من نخورد ... بيخيال شدم !

دارم به خودم ميقبولونم كه Table اون قدرا هم بد نيست ! :D

حالا فردا پس فردا كه Upload كردم ميبينيد ماجرا چي بود . ( اون موقع اگه كسي تونست درست كنه كه ممنون ميشم . )
 
شايان

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,814
لایک‌ها
9
اينطوري توضيح دادن سخته !

وايسا تا 1كي 2 روز ديگه با Table ميذارم ببينيد .... بعد در موردش صحبت كنيم .

مرسي كه پيگيري ميكني . :*
 
شايان

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,814
لایک‌ها
9
آقا همسر عزيزم رو نميتونم :* كنم ؟!؟! :D :D

مثل اينكه ما اينجا عروسي گرفتيما ! يه شام به همه داديم كه اين مشكلات نباشه ! :D :D
 
Ali_ix

Ali_ix

Registered User
تاریخ عضویت
16 دسامبر 2003
نوشته‌ها
612
لایک‌ها
5
سن
40
محل سکونت
Tehran
سلام
من تاپیکو کامل نتونستم بخونم شاید حرفام تکراری باشه ....
شایان بین اون دوتا Box آبی و قرمز چیزی گذاشتی ؟! یعنی اونجا هم DIV هست ؟!
اگر اشتباه نکنم شما باید اون DIV اصلیه که همه اینا توشن رو با درصد اندازه بدی ! یا حداقل Min-Height بدی ...
و بین اون دوتا باکس آبی و قرمز هم بیای یک DIV با اندازه درصدی یا Min-Height بذاری ...
که اگر نوشته یا محتوایی تویه اون وسطیه و ... باشه که به تناسب طولش زیادتر میشه و اگرم نباشه اون min-height نمیزاره از یک اندازه خاصی کوچیکتر بشه و فاصله اون دوتا آبی و قرمز درست میمونه !
راستی یکی دوتا Clearer div بینشون بذار یه وقت به هم نریزه !

میبخشید اگر نامربوط بود یا قبلا گفته بودن ....
موفق باشید...
 
شايان

شايان

مدیران قدیمی
تاریخ عضویت
2 سپتامبر 2003
نوشته‌ها
4,814
لایک‌ها
9
بچه ها اولا از همتون ممنون .

دوما چون مشكلم حل نشد ، صورت مسئله رو عوض كردم ... يعني دارم از يه راه ديگه ميرم حالا يه مشكل ديگه دارم !


اين كد رو ببينيد :

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIV Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<STYLE type=text/css>

BODY {
  MARGIN: 50px;
  Text-Align: center;
}

#main {
   WIDTH: 300px;
   Text-Align: left;
   border : 1px solid black;
 }

#left {
    min-height : 100%;
    height : 100%;
    float : left;
	margin: 5px;
	width: 50px;
	text-align: center;
	border: 1px solid #000000;
}

#right {
    float : left;
	margin: 5px;
	width: 200 px;
	text-align: center;
	border: 1px solid #000000;
}

</style>
</head>

<body>


<div id="main">

<div id="left">
test
</div>

<div id="right">

<br>Persiantools
<br>forum
<br>is
<br>a
<br>place
<br>for
<br>iranian
<br>and 
<br>persian 
<br>users
<br>to 
<br>find
<br>the
<br>answer
<br>to 
<br>their 
<br>technical 
<br>questions
<br>about 
<br>persian 
<br>content 
<br>making 
<br>on 
<br>internet. 

</div>

</div>


</body>
</html>

اين هم خروجي :

divtest9oz.jpg


حالا مشكل كجاست ؟!

DIV سمت چپ با اينكه مقدارش 100% هست ولي ميبينيد كه ... قدش كوتاس ! :D

DIV سمت راست Height مشخصي نداره و طولش بستگي يه چيزاي توش داره ... من ميخوام DIV سمت چپ ، يا اندازه ي سمت راستي باشه ... يا بشه با " % " كنترلش كرد !
 
Ali_ix

Ali_ix

Registered User
تاریخ عضویت
16 دسامبر 2003
نوشته‌ها
612
لایک‌ها
5
سن
40
محل سکونت
Tehran
1. برای body هم height رو مشخص کن و رویه 100% بزار ...
2. margin bottom هم بزار رویه auto
3. اگر نشد برای اون دوتا min-height رو با اندازه مشخص کن یعنی 100 px مثلا !

فقط یه چیزی من موندم چرا با اینکه اون دوتا div رو clear نکردی اونی که کلی متن توشه از main نزده بیرون ! :blink: عکسو با IE گرفتی ؟!
 
You must log in or register to reply here.

بک‌لینک


بالا