ورود

**Pc-island** · 93-4-30، 12:04 صبح

سلام خوبید ؟
بچه های کدنویس ، Smile

من برای اولین بار این قالب رو از اول کدنویسی کردم !
http://pardisbanner.ir/myweb/css%20test.html
حالا میخوام اون دوتا بنر رو با عنوانشون تکرار کنم کنارش به سمت راست !
ینی چند بار کپی بگیرم و در سمت راستش بذارم !
تو کد ها هر وقت کپی میکنم دو تا بنر بعدی زیرش میاد !
راهنمایی کنید ! مرسی !

**Mansouri** · 93-4-30، 12:13 صبح

فکر کنم باید از تگ های br و p استفاده کنید که یه پاراگراف تعریف کنید و بین بنر ها فاصله بزارید .
من سوالتونو درست متوجه نشدم ولی این تصورم بود ...
برای افزودن خط هم از hr استفاده کنید ...
موفق باشید Smile

**Pc-island** · 93-4-30، 12:16 صبح

من اینا رو میدونم !
فکر کن این قالب منه ! :

--------هدر--------
)بنر(
)بنر(

این چیزی ک من میخوام :

--------هدر--------
)بنر()بنر()بنر()بنر(
)بنر()بنر()بنر()بنر(

عجب توصیفی کردما ! خودم کف کردم !!!

**Mansouri** · 93-4-30، 12:19 صبح

خب بعد هر بنر یه br اضافه کن قبل بستن p یا استفاده از hr
از این راحت تر توضیح بدم ؟!

**Pc-island** · 93-4-30، 12:23 صبح

p ینی پاراگراف !
hr هم ک خط میذاره !
br هم ک میره خط بعد !

**mortezaal** · 93-4-30، 12:24 صبح

اگه میشد کد بزارید خوب میشد. ببینم به چه شکل این قسمت رو نوشتید.
راه زیاد داره.
یکیش این که ارتفاع تابعی که برای این قسمت نوشتی را اندازه محدود بدی ( به اندازه دوتا بنر با عنوانش ) و به بنر و عنوانش float:left بدی هر چی زیر هم کپی کنی دوتا دوتا کنار هم میاد از سمت چپ.
یه راه دیگش اینه که برای هر ستون یا برای هر دوتا بنر زا یک تابع استفاده کنی به این شکل:

کد: 

<div class="ads">

<کد بنر اول و عنوانش>

<کدبنر دوم و عنوانش>

</div>

<div class="ads">

<کد بنر اول و عنوانش>

<کد بنر دوم و عنوانش>

</div>

که اینجا باید به تابع ها اندازه دقیق بدی.
بطور مثال:

کد: 

.ads {

float:left;

width:130px;

height:530px;

text-align:center;

}

البته این مقدار ها فرضی هست. فقط خواستم متوجه قضیه تابع بشی.
من روشم اینه.

**Mansouri** · 93-4-30، 12:27 صبح

برای منم سوال شد اول باید تمام تابع ها رو تعریف کنی و float: right or left بده بعد بره بنر ها رو بزاره؟
همه اینا میره تو بادی؟

**Pc-island** · 93-4-30، 12:34 صبح

(93-4-30، 12:24 صبح)mortezaal نوشته است: اگه میشد کد بزارید خوب میشد. ببینم به چه شکل این قسمت رو نوشتید.
راه زیاد داره.
یکیش این که ارتفاع تابعی که برای این قسمت نوشتی را اندازه محدود بدی ( به اندازه دوتا بنر با عنوانش ) و به بنر و عنوانش float:left بدی هر چی زیر هم کپی کنی دوتا دوتا کنار هم میاد از سمت چپ.
یه راه دیگش اینه که برای هر ستون یا برای هر دوتا بنر زا یک تابع استفاده کنی به این شکل:

کد:

<div class="ads"> <کد بنر اول و عنوانش> <کدبنر دوم و عنوانش> </div> <div class="ads"> <کد بنر اول و عنوانش> <کد بنر دوم و عنوانش> </div>

که اینجا باید به تابع ها اندازه دقیق بدی.
بطور مثال:

کد:

.ads { float:left; width:130px; height:530px; text-align:center; }
البته این مقدار ها فرضی هست. فقط خواستم متوجه قضیه تابع بشی.
من روشم اینه.

کد پ خ شد !

**mortezaal** · 93-4-30، 01:40 صبح

بله. تابع یکی هم میتونه باشه.

الان من تو مثالی که برای دوست عزیزمون زدم و براش پ.خ کردم یک تابع ایجاد کردم و این تابع تکرار میشه.

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

تنها float نیست. باید مقدار های دیگه هم بهش اضافه بشه. مثل:

width، height، margin

**WorldTheme**

دوستان عزیز ، چرا لقمه رو دور سرتون میچرخونید ؟!؟!؟
لطفا استاندارد و تمیز کد نویسی کنید . (مثل من

)
-----------------------------------------------------------------------
با این کاری که من کردم ، شما میتوانید مقدار بینهایت بنر رو بذارید .

پیش نمایش : http://protheme.ir/new.html

1- شما ابتدا باید یک div کلی تعیین کنید که دربردارنده تمامی div هاست . در اینجا ما ads رو به عنوان div کلی داریم .

کد: 

.ads {

    margin-top: 10px;

}

بهتره به div های کلی و بزرگ ، خاصیت های جزئی ندیم .

2- توی کد ها رو که نگاه میکردم ، دیدم هر بلوک تبلیغات رو هواست ! یعنی به کمک امداد های غیبی سر پا مونده ! شما همچون قسمت قبل ، باید یک div کلی تعیین کنید که دربردارنده div های style2 و style3 است . در اینجا ما ads-block رو داریم (این رو خودم به قالب اضافه کردم)

کد: 

.ads-block {

    margin: 10px 15px 0px 0px;

    disply: inline;

    float:left;

    width: 140px;

}

توجه داشته باشید که حتما خاصیت disply: inline رو بذارید . این خاصیت کمک میکنه تا شما بلوک هاتون رو در یک خط نگه دارید و مشکل زیر هم اومدن بلوک ها هم پیش نیاد . من در خاصیت div های قالب شما جا به جایی هایی رو صورت دادم و برخی از وظایف که بر عهده style2 و style3 بود رو به این div دادم .

3- اینم از ساختار یک بلوک تبلیغ :

کد: 

<div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

حالا شما میتوانید با این ساختار هزاران بلوک تبلیغ رو در کنار یکدیگر داشته باشید .

اینم از کد قالب :

کد: 

<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<head>

<title>Css Test</title>

<style type="text/css">

body {

    background-color:#CCC;

    background:url(file:///F|/My%20Program/other/Banner%20background/9%20bg%20(www.skinak.ir)/1.png);

    font-family:"B yekan";

    font-size:12px;

}

.ads {

    margin-top: 10px;

}

.ads-block {

    margin: 10px 15px 0px 0px;

    disply: inline;

    float:left;

    width: 140px;

}

.style2 {

    background-color: #FC0;

    border: thin outset #F60;

    text-align: center;

    height: 20px;

}

.style3 {

    height: 250px;

    background-color: #FF3;

    border: thin outset #FC0;

    text-align: center;

    margin-top: 5px;

}

.style4 {

    background-color: #093;

    border: thin outset #030;

}

</style>

</head>

<body >

<div class="style4">

<div style="text-align:center;">

***********************************************<br />

تبادل بنر <br />

بزرگترين سيستم تبادل بنر ايران <br />

***********************************************

</div>

</div>

<div class="ads">

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div> 

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div> 

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div> 

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div> 

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div>

    </div>

<div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div> 

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            حـــباب يخي

        </div>

        <div class="style3">

            <img src="http://8pic.ir/images/jevxtk3a7jxxu38pwvc6.gif">

        </div>

    </div>

    <div class="ads-block">

        <div class="style2">

            جزيره کامپيوتر

        </div>

        <div class="style3">

            <img src="http://up.pc-island.ir/up/pc-island/Banner/amoodi-banner.gif">

        </div>

    </div>

</div>

</body>

</html>

موفق و پیروز باشید . هر سئوالی بود بگید .

ورود
نام کاربری:
گذرواژه‌:	گذرواژه‌تان را فراموش کرده‌اید؟
	مرا به خاطر بسپار

بک لینک