repeat نشدن عکس داخل div

Printable View

13-09-2008, 01:05
David.Jn

repeat نشدن عکس داخل div

سلام به همه
آقا من یه div زدم که یه عکس توش به صورت عمودی repeat میشه.
این repeat شدن تا وقتی که ارتفاع div رو تعیین میکنی جواب میده.
حالا مشکل از کجا شروع میشه:
من اومدم بغل این div یهdiv دیگه زدم که محتواش text ه حالا وقتی متن از ارتفاع div بغلی بیشتر میشه div بغلی جا میمونه و اینم منطقیه چون ارتفاعش تا اونجا قد میده.
اومدم ارتفاعش را auto تنظیم کردم ولی این دفعه اصلآ repeat نشد.
حالا من میخوام ارتفاع این div (اونی که توش عکس قرار داره) رو طوری تنظیم کنم که همراه با اون div(اونی که متن توشه ) repeat بشه.

فقط خواهشآ دنبال نخود سیاه نفرستید.
13-09-2008, 09:14
as13851365

شما دو تا Div دارید که می خواهید با هم به صورت موازی حرکت کنند !
چرا از یک DIV استفاده نمی کنید ؟

شما می تونید در یک قسمت DIV عکس رو نشون بدی و در قسمت دیگه متن رو ! این جوری خیلی ساده است !
فکر کنم اینجوری مشکل شما حل می شه ! ( هم متن و هم عکس رو با هم نشون بده )
13-09-2008, 10:29
David.Jn

نقل قول:

شما می تونید در یک قسمت DIV عکس رو نشون بدی و در قسمت دیگه متن رو ! این جوری خیلی ساده است !
فکر کنم اینجوری مشکل شما حل می شه ! ( هم متن و هم عکس رو با هم نشون بده )

آره دیشب خودم همین روش به فکرم رسید ولی این تا زمانی جواب میده که یدونه عکس بخواد نمایش داده بشه .
من میخوام اینجوری بشه که سمت چپ متن یه عکس repeat بشه و سمت راست هم یکی دیگه.
13-09-2008, 17:17
mohan21

از repeat-y بعد از آدرس تصویر استفاده کنید باید جواب بده ....

-----------------------------------
محان
13-09-2008, 18:09
neopersia

نقل قول:

نوشته شده توسط zibatarin nam [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

آره دیشب خودم همین روش به فکرم رسید ولی این تا زمانی جواب میده که یدونه عکس بخواد نمایش داده بشه .
من میخوام اینجوری بشه که سمت چپ متن یه عکس repeat بشه و سمت راست هم یکی دیگه.

ببین این مدلی به کارت میاد:
[html]
<div style="background:#FFFF99 url(bg.png) top right repeat; border:1px red solid">
<div style="float:right; width:199px;">
<p>محتویات قسمت کناری</p>
</div>
<div style="margin-right:200px; background:#f0f0f0 url(bg2.png) top right repeat; border:1px blue dashed">
<p>محتویات قسمت اصلی</p>
</div>
</div>

[/html]
13-09-2008, 19:09
David.Jn

نقل قول:

ببین این مدلی به کارت میاد:

ممنون
ولی نه به کارم نیومد.

انگار درست متوجه نشدید یه توضیح کامل میدم ه متوجه بشید من دنبال چی هستم.

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

دفعه دوم اومدم div وسطی را گزاشتم داخل همون div سمت راستی این روش خوب بود درست به اندازه متنrepeat میشد ولی دیگه سمت چپ دیگه border نداشتم .
یعنی اومدم اون div سمت چپی را هم گزاشتم داخلش و اونو هم repeat کردم ولی هیچی نماش داده نشد .
اینطور که معلوم شد تو یه div فقط یه div میتونه repeat بشه.

فقط جان من زودتر جواب بدید ه بدجور گیرم.
13-09-2008, 20:25
ali00h

خوب دو تا عکسی که میخوای چپ و راست به عنوان border باشه و تکرار بشه رو یه تصویرش کن و تکرارش کن ( این وقتی میشه که طول div مشخص باشه)

عرض div که متغیر ، نکنه طولشم میخوای متغیر باشه؟
13-09-2008, 21:08
milky way

میخوای از سایه استفاده بکنی ؟
14-09-2008, 00:08
neopersia

اینو تست کن:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.right-bg {
background:url(right-border.png) top right repeat-y;
}
.left-bg {
background:url(left-border.png) top left repeat-y;
}
.center-div {
margin:0 10px; /* به اندازه عرض بوردر فاصله قرار بده */
background-color:#fff; /* برای اطمینان از اینکه تصویر بوردر زیر متن اصلی نمایش داده نشه */
}
</style>
</head>
<body>
<div class="right-bg">
<div class="left-bg">
<div class="center-div">
<p>متن اصلی</p>
</div>
</div>
</div>
</body>
</html>
[/html]
14-09-2008, 00:40
pezhman32

اگه خودت نمونه ی کدت رو بزاری بهتره تا بفهمیم دقیقا" چیه (البته من که زیاد وارد نیستم ولی کلا" میگم)
ولی در این مواقع بد نیست از table استفاده کنی, چون از طرفی خیلی دقیق تره نسبت به div و از طرفی هم div ها ممکنه در مرورگرهای مختلف 1 جواب ندن (حتما" کدت رو تو چندتا مرورگر تست کن)
14-09-2008, 01:31
David.Jn

نقل قول:

نوشته شده توسط neopersia [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

اینو تست کن:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.right-bg {
background:url(right-border.png) top right repeat-y;
}
.left-bg {
background:url(left-border.png) top left repeat-y;
}
.center-div {
margin:0 10px; /* به اندازه عرض بوردر فاصله قرار بده */
background-color:#fff; /* برای اطمینان از اینکه تصویر بوردر زیر متن اصلی نمایش داده نشه */
}
</style>
</head>
<body>
<div class="right-bg">
<div class="left-bg">
<div class="center-div">
<p>متن اصلی</p>
</div>
</div>
</div>
</body>
</html>
[/html]

آخیش بالاخره یکی فهمید من دنبال چیم.

ممنون
این کد شبیه به اونچیزیه که خودم دفعه دوم نوشتم.
شما خودت تست کردی جواب گرفتی؟
من تست کردم همون مشکل قبلی را دارم یعنی div چپی (بوردر چپی) اصلآ نمایش داده نمیشه تا چه برسه به تکرار شدنش .
ولی یه چیزی تو خود dreamweaver نمایش میده یعنی هم بوردر چپی هم راستی نمایش داده میشه
ضمنآ این دو تایی که نمایش داده میشه از هم خیلی فاصله دارن
من به margin دست نزدم ولی paddin-right شو 10px دادم

نقل قول:

اگه خودت نمونه ی کدت رو بزاری بهتره تا بفهمیم دقیقا" چیه (البته من که زیاد وارد نیستم ولی کلا" میگم)
ولی در این مواقع بد نیست از table استفاده کنی, چون از طرفی خیلی دقیق تره نسبت به div و از طرفی هم div ها ممکنه در مرورگرهای مختلف 1 جواب ندن (حتما" کدت رو تو چندتا مرورگر تست کن)

کد همون چیزیه که neopersia گراشتن.
آره تیبل ها دقیق هستند ولی تو دیر لود شدن صفحه تاثیر بسزایی دارن اما div برعکس.
خداییش کار کردن با div یه مزه دیگه ای داره. خیلی حال میده .
تا حالا که صفحه رو با div نوشتم و تو 3 تا مرورگر تست کردم حله حل بوده.
14-09-2008, 01:42
pezhman32

نقل قول:

نوشته شده توسط zibatarin nam [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

آخیش بالاخره یکی فهمید من دنبال چیم.

ممنون
این کد شبیه به اونچیزیه که خودم دفعه دوم نوشتم.
شما خودت تست کردی جواب گرفتی؟
من تست کردم همون مشکل قبلی را دارم یعنی div چپی (بوردر چپی) اصلآ نمایش داده نمیشه تا چه برسه به تکرار شدنش .
ولی یه چیزی تو خود dreamweaver نمایش میده یعنی هم بوردر چپی هم راستی نمایش داده میشه
ضمنآ این دو تایی که نمایش داده میشه از هم خیلی فاصله دارن
من به margin دست نزدم ولی paddin-right شو 10px دادم

کد همون چیزیه که neopersia گراشتن.
آره تیبل ها دقیق هستند ولی تو دیر لود شدن صفحه تاثیر بسزایی دارن اما div برعکس.
خداییش کار کردن با div یه مزه دیگه ای داره. خیلی حال میده .
تا حالا که صفحه رو با div نوشتم و تو 3 تا مرورگر تست کردم حله حل بوده.

در مورد اینکه کارکردن با دیو یه مزه دیگه میده موافقم (!) اما چون محتوای داخلش رو کامل پوشش نمیده یکمی سخت میشه
14-09-2008, 02:12
neopersia

نقل قول:

نوشته شده توسط zibatarin nam [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

آخیش بالاخره یکی فهمید من دنبال چیم.

ممنون
این کد شبیه به اونچیزیه که خودم دفعه دوم نوشتم.
شما خودت تست کردی جواب گرفتی؟
من تست کردم همون مشکل قبلی را دارم یعنی div چپی (بوردر چپی) اصلآ نمایش داده نمیشه تا چه برسه به تکرار شدنش .
ولی یه چیزی تو خود dreamweaver نمایش میده یعنی هم بوردر چپی هم راستی نمایش داده میشه
ضمنآ این دو تایی که نمایش داده میشه از هم خیلی فاصله دارن
من به margin دست نزدم ولی paddin-right شو 10px دادم

کد همون چیزیه که neopersia گراشتن.
آره تیبل ها دقیق هستند ولی تو دیر لود شدن صفحه تاثیر بسزایی دارن اما div برعکس.
خداییش کار کردن با div یه مزه دیگه ای داره. خیلی حال میده .
تا حالا که صفحه رو با div نوشتم و تو 3 تا مرورگر تست کردم حله حل بوده.

من دقیقاً از همین روش تو این استفاده کردم:

کد:

http://neopersia.isgreat.org/

اگه همه چیز درست باشه مشکلی نداره. احتمالاً یه جا width یا padding دادی که تداخل پیدا کرده
14-09-2008, 12:40
David.Jn

ببینید دوستان این اون چیزیه که تو dreamwever تو قسمت design ش نمایش داده میشه من دقیقآ همینو میخوام.

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

ولی تو مرورگر ها اون border آبی نمایش داده نمیشه.
کد هم همون کدیه که neopersia زحمتشو کشیدن ولی به خاطر فاصله ای که میفتاد خودم یه تغییر دادم.
کد به این صورت شد:
[HTML]
<html>
<style type="text/css">
.right-bg {
float:right;
background:url(right_border.gif) top right repeat-y;
}
.left-bg {
float:left;
background:url(left_border.gif)) top left repeat-y;
}
.center-div {
margin:0 10px 0px 10px;
background-color:#fff;
width:50px;
}
</style>
</head>
<body>
<div>
<div class="right-bg">
<div class="left-bg">
<div class="center-div">
<p>Helo world</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/HTML]
مشکل کجاست.؟
زدم به سیم آخر شیطونه میگه برو دنبال table .
میترسم برم دنبال اونم بازم همون آش و همون کاسه.
14-09-2008, 20:37
neopersia

اینو تست کردم کار میکنه:
[html]
<style type="text/css">
.right-bg {
background:url(right_border.gif) top right repeat-y;
width:100px;
}
.left-bg {
background:url(left_border.gif)) top left repeat-y;
}
.center-div {
margin:0 10px 0px 10px;
background-color:#fff;
}
</style>
[/html]
اگر برای div وسط بخوای عرض مشخص کنی میتونی اینجوری بهش margin بدی:
[html]
width:50px;
margin:0 auto
[/html]

استفاده از float هم درست نبود!