استایل چینش موقعیت های جدید در قالب

[samiraaaa 3]

[align=right]دوستان خوب و همراه جومینا سلام.

اول تشکر می کنم از دوستان که خیلی از مشکلات و سوالاتی که داشته ام با طرح توی این انجمن به خوبی و استادانه با راهنمایی دوستان رفع شده!

یه سوالی داشتم. من توی قالبم 4 تا موقعیت جدید میخام ایجاد کنم به شکلی که توی تصویر زیر هست:

[align=center]

[align=right]میخام یک بک گراند بذارم که واسه هر سه تاش باشه!

سایز تصویر بکگراندم 660 در 138 پیکسل هست.

position1: 193*75 pixel

position2: 193*75 pixel

position3: 193*75 pixel

position4: 633*10 pixel

کسی میدونه کدهایی که واسه افزودنه موقعیت ها به این ترتیبی که تو شکل آورده ام چجوری باید باشه!؟

و اینکه کدهای استایلش باید به چه شکل باهشه!؟

ممنونم.

[/align][/align] [/align]

[sonic69 279]

با سلام

واقعیت نمیشه اینجا گفت که دقیقا باید این کد رو استفاده کنید.چون اکثر اینها بر میگریده به قالب شما

برای فایل ایندکس :

برای فایل سی اس اس

#box{
width:;
height:;
background-image:;
background-position:top right;
background-repeat:no-repeat;
}
#box1{
width:;
height:;
background-image:;
background-position:top right;
background-repeat:no-repeat;
}
#box2{
width:;
height:;
background-image:;
background-position:top right;
background-repeat:no-repeat;
}
#box3{
width:;
height:;
background-image:;
background-position:top right;
background-repeat:no-repeat;
}
#footer{
width:;
height:;
background-image:;
background-position:top right;
background-repeat:no-repeat;
}

BOX:همون موقعیتی هست که 3 موقعیت BOX1,BOX2,BOX3 داخل اون هستند

Foote:موقعیت زیر سه باکس

البته کدهایی که قرار دادم یه چیزه کلی هست.برای اینکه بخواید یه عکس پشت سه موقعیت تون باشه باید به box خاصیت عکس بک گراند بدید.

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

background-repeat:no-repeat;

این دستور بستگی به عکستون داره.اگر عکس کوچیک باشه و بخواید اون رو تکرار کنید تو اون موقعیت باید به repeat تکرار بشه.

در مورد اندازه هم خودتون باز باید بدونید موقعیت چه اندازه ای داره

اندازه ها را به شکل زیر وارد کنید:

width:18px;/*for example*/
height:100px;/*for example*/

و برای اینکه تصاویرتون رو لود کنید از دستور زیر استفاده شده:

background-image:;

مقادیر این دستور رو هم به طور مثال به شکل زیر پر کنید

background-image:url(../images/mypic.png);

اگر هم خواستید به جای استفاده از تصویر رنگ استفاده کنید میتونید از دستور زیر به جای دستور بالا استفاده کنید:

background-color:#F00;/*for example*/

موفق باشید

[samiraaaa 3]

سلام آقای آمره ای. ممنونم بابت پاسخ سریع و اینهمه توضیحات مفیدتون. اما یه چیزی رو متوجه نشدم!

ببینید، اون فوتر هم میخام یه موقعیت باشه!! یعنی 4 تا موقعیت هستند که سه تاش تو یه ردیفن و یکیش که همون فوتر هست زیر هر سه تاش!

بعد درمورد بک گراند هم یک عکس اندازه ی همین تصویری که گذاشتم، میخام باشه که واسه هر 4 تا موقعیت باشه! یعنی فرض کنید همین عکسی که گذاشتم رو بخام بذارم بک گراند کل موقعیت ها!

---

ببینید اینی که گفتید خراب شد! اونی نمیشه که من میخام!! اینجوری که شما گفتید انجام دادم اما موقعیت های 1 و 2 و 3 تو یه خط افقی قرار نمی گیرند! زیر هم میان!!! موقعیت 4 هم که اصلا نیست!

---

من از قالب امام هادی استفاده می کنم!

[sonic69 279]

درود برشما

برای فوتر هم میتونید داخلش یه موقعیت ایجاد کنید بدین صورت:

در مورد عکس هم نگاه کنید اینکه بخواید یه عکس بزرگ در نظر بگیرید و برای اون 4 تا قرار بدید یکم سایت رو سنگین میکنه.شما عکس رو در حال کوچیک در بیارید و به اون تکرار بدید.اگر میخواید دقیقا اون عکس برای فوتر هم قرار بگیر میتونید همون رو برای فوتر هم قرار بدید و اگر میخواید برای کل اون چهارتا موقعیت یه عکس(پشت تمامی مویعیت ها) فقط قرار بدید باید به BOX خاصیت عکس بدید و موقعیت فوتر رو نیز داخل BOX ببرید بدین صورت:

موفق باشید

[samiraaaa 3]

درسته! این رو متوجه شدم اما نمی دونم float 4 تا موقعیت رو چجوری بذارم تا وضعیتشون نسبت به همدیگه اینطوری بشه که 1 و 2 و 3 تو ی ردیف هم سطح باشن و موقعیت 4 زیر اون سه تا موقعیت قرار بگیره!

---

علاوه بر اون، بک گراند همه ی قسمت ها مثل هم نیست! یعنی اینکه من یه عکس کلی با همین سایز که گذاشتم طراحی کرده ام که 4 تا باکس داخلشه که هر باکس میشه جای یه موقعیت من! پس نمیخام یه بکگراند گوچیک باشه که هی تکرار میشه! اما اگه میفرمائید حجم سایت رو این کار میبره بالا، خب میتونم عکسم رو slice کنم به 4 تیکه و هر تیکه رو بذارم بک گراند هرکدوم از موقعیت ها!

[مصطفی صفرعلی 2,891]

با سلام

اون کدها جهت نمونه گفته شد شما باید برحسب شرایط قالبتون اقدام به کدنویسی کنید

اگر میخواهید یک عکس رو برای 4 تا موقعیت بصورت همزمان قرار بدید باید هر 4 تا موقعیت رو داخل یک دایو قرار بدید و برای اون دایو بکگراند تعریف کنید

برای راحتی اون سه تا موقعیت افقی را در یک دایو قرار بدید و سپس دایو کلی این موقعیتها رو با دایو موقعیت چهارم در یک دایو جدید قرار بدید

موفق و پیروز باشید

یا حق

:64 (17):

[samiraaaa 3]

من اینایی که گفتید رو اصلا بلد نیستم! آقای صفر علی قالب من همون قالب قبلیه که واسم آرشیوش رو درست کردید! میشه بگید باید اینا رو چجوری درست کنم!؟

[sonic69 279]

ببینید اینی که گفتید خراب شد! اونی نمیشه که من میخام!! اینجوری که شما گفتید انجام دادم اما موقعیت های 1 و 2 و 3 تو یه خط افقی قرار نمی گیرند! زیر هم میان!!! موقعیت 4 هم که اصلا نیست!

برای ایجاد موقعیت فوتر از کدی که جدید قرار دادم استفاده کنید!

اینکه میگید موقغیت 1و2و3 تو یه خط افقی قرار نمیگرند مسلما نباید قرار بگیرند چون نیاز به سی اس اس نویسی داره من سی اس اس باکس 1و2 و 3 رو براتو قرار میدم با فرض اندازه هر باکس 300px

باکس1

#box1
{
width:300px;
height:auto;
float:left;
background-image:url(../images/mypic);
background-position:top right;
background-repeat:repeat;/*اگر عکس شما کوچک هست از این دستور استفاده کنید تا تکرار شود اگر بزرگ است از پست 2 استفاده کنید */
}

باکس2

#box2
{
width:300px;
height:auto;
float:left;
background-image:url(../images/mypic);
background-position:top right;
background-repeat:repeat;/*اگر عکس شما کوچک هست از این دستور استفاده کنید تا تکرار شود اگر بزرگ است از پست 2 استفاده کنید */
}

باکس3

#box3
{
width:300px;
height:auto;
float:right;
background-image:url(../images/mypic);
background-position:top right;
background-repeat:repeat;/*اگر عکس شما کوچک هست از این دستور استفاده کنید تا تکرار شود اگر بزرگ است از پست 2 استفاده کنید */
}

برای باکس کلی هم میتونید از دستور زیر استفاده کنید

#box
{
width:900px;
height:auto;
background-image:url(../images/mypic);
background-position:top right;
background-repeat:repeat;/*اگر عکس شما کوچک هست از این دستور استفاده کنید تا تکرار شود اگر بزرگ است از پست 2 استفاده کنید */
}

تو این دستورات height رو مقدا خاصی ندادم اگر میخواید دارای اندازه خاصی باشه میتونید اندازه بدید بهش

باز شما این کار ها رو انجام بدید مشکلی بود پیگیر باشید

من اینایی که گفتید رو اصلا بلد نیستم! Sad آقای صفر علی قالب من همون قالب قبلیه که واسم آرشیوش رو درست کردید! میشه بگید باید اینا رو چجوری درست کنم!؟

اگر با ساختن قالب مشکل دارید آموزش هایی تو همین انجمن هست توی نت هم اموزش پیدا میشه

https://www.google.com/search?hl=fa&client=firefox-a&tbo=d&rls=org.mozilla:en-US:official&spell=1&q=%D8%A2%D9%85%D9%88%D8%B2%D8%B4+%D8%B3%D8%A7%D8%AE%D8%AA%D9%86+%D9%82%D8%A7%D9%84%D8%A8+%D8%AC%D9%88%D9%85%D9%84%D8%A7&sa=X&ei=SN_AUMF7yuGKAtPggbgI&ved=0CCcQvwUoAA&biw=1024&bih=607

موفق باشید

[samiraaaa 3]

درست شد. دستتون درد نکنه. فقط یه سوال دیگه! میشه استایل موقعیت footer رو هم بهم بگید چجوری باشه تا سر جاش یعنی زیر سه تا موقعیت قرار بگیره؟ ببخشید

[sonic69 279]

برای فوتر هم میتونید از کد زیر استفاده کنید

#footer
{
width:900px;
height:50px;
background-image:url(../images/mypic);
background-position:top right;
background-repeat:repeat;/*اگر عکس شما کوچک هست از این دستور استفاده کنید تا تکرار شود اگر بزرگ است از پست 2 استفاده کنید */
clear:both;
}

اندازه ها رو به دلخواه تغیر بدید.

اگر با دستور با مشکل بر خوردید آخرین دستور رو پاک کنید و مجددا تست کنید.

موفق باشید