دو تا سوال css. قرار دادن 2 تصویر در یک دایو. قرار دادن یک تصویر در کنار تمام li ها

[sylverstar]

سلام دوستان
2 تا مشکل در css دارم.
اول:
یک دایو هست. قصد دارم 2 تا عکس داخل این دایو بندازم. بدون اینکه دایو دیگری داخلش ایجاد کنم.
یک عکس 900x300 پیکسل که بالا قرار میگیره به صورت no-repeat
یک عکس 45x45 پیکسل که مابقی دایو را به صورت repeat پرکنه.
دوم:
چطوری میشه تو استایل شیت یک کلاس یا آی دی برای تمام تگهای li بنویسم که یک عکس کوچیک رو در کار هر آیتم ه li قرار بده. شدنیست؟

[Saber Mogaddas]

سلام
اگه می خواهید برای درج عکس داخل دیو از تگ img استفاده کنید کافیه که به عکس کلاس بدید و با استایل های float و margin جابجاش کنید..
برای تگ li ها می تونید یک کلاس یکسان به تک تک li ها بدید .. ولی روش راحتر هم اینه که مثلا اگه این ul li داخل یه دیو به ایدی wraper باشه.. برای select li ها کافیه به این صورت بنویسید : Wraper ul li#
موفق باشی..

[cyrusthegreat]

سلام دوستان
2 تا مشکل در css دارم.
اول:
یک دایو هست. قصد دارم 2 تا عکس داخل این دایو بندازم. بدون اینکه دایو دیگری داخلش ایجاد کنم.
یک عکس 900x300 پیکسل که بالا قرار میگیره به صورت no-repeat
یک عکس 45x45 پیکسل که مابقی دایو را به صورت repeat پرکنه.
دوم:
چطوری میشه تو استایل شیت یک کلاس یا آی دی برای تمام تگهای li بنویسم که یک عکس کوچیک رو در کار هر آیتم ه li قرار بده. شدنیست؟

دوست عزیز
برای مورد اول، شما باید اون عکس بزرگ رو از طریق تگ img در داخل div قرار بدید. و اون عکس که می خوایید تکرار بشه رو به خصوصیت background در CSS مربوط به اون div اختصاص بدید.

برای مورد دوم، چرا دوست عزیز. شدنی هست. شما با استفاده از این مقادیر می تونید، اون bullet کنار li رو به عکس تغییر بدید.
background-image: url("URL TO IMAGE");
background-repeat: no-repeat;
background-position: VALUE IN PX OR EM;

[Saber Mogaddas]

سلام


برای مورد دوم، چرا دوست عزیز. شدنی هست. شما با استفاده از این مقادیر می تونید، اون bullet کنار li رو به عکس تغییر بدید.
1
2
3
background-image: url("URL TO IMAGE");
background-repeat: no-repeat;
background-position: VALUE IN PX OR EM;



فکر نکنم این روش درست باشه ..چون list-style-image برای همین کار هست..و نیازی به background-image نیست..


برای گذاشتن عکس کنار li ها کافی بعد از این select تو تاپیک پایین گفتم..
دستور زیر رو وارد کنید..

list-style-image: url("Images/leftarrow.png");
list-style-position: inside;


موفق باشی..

[cyrusthegreat]

سلام

فکر نکنم این روش درست باشه ..چون list-style-image برای همین کار هست..و نیازی به background-image نیست..


برای گذاشتن عکس کنار li ها کافی بعد از این select تو تاپیک پایین گفتم..
دستور زیر رو وارد کنید..

list-style-image: url("Images/leftarrow.png");
list-style-position: inside;


موفق باشی..

دوست عزیز

استفاده از background-image کنترل بیشتری روی محل قرارگیری بک گراند به ما می ده. ولی استفاده از list-style-image، برای قرارگیری یک مقدار اذیت می کنه.

[sylverstar]

با تشکر از دوستان که لطف کردند و راهنمایی کردند.
در مورد دو پس زمینه در یک دایو من طبق نسخه دوستان یکی را از طریق تک <img> درون سورس صفحه وارد کردم و دومی را استایل خارجی دادم. مشکل اینجاست که دایو مورد نظر دارای محتویات است و اضافه کردن عکس از طریق تگ <img> کل محتویات دایو را به پایی حرکت میده و صفحه رو به هم می ریزه. فکر کنم آخر باید دایو فرزند درست کنم و بگراند دوم را توی اون بزارم :متفکر:

در مورد li ها هم هر دو روش بالا کار داد.
تفاوتش در اینه که استفاده از روش background-image: باعث میشه که علامت بوت ها باقی بمونه ولی در روش list-style-image: بولت ها ناپدید میشند.

[cyrusthegreat]

دوست عزیز

من اون کد رو برای زمانی خدمت شما دادم که از CSS Reset استفاده می کردید. اگر استفاده نمی کنید کافیه قبل از بک گراند اینرو اضافه کنید:

list-style: none


برای مورد دوم

شما به div والدت این مقدار رو بده:

position: relative;
z-index: 1000;


بعدش هم به عکست این مقادیر رو بده:

position: absolute;
top: 0;
left: 0;
z-index: -1000;