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

چندتا سوال یه مبتدی

ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
من سایتم رو تو فتوشاپ طراحی کردم و حالا دارم اسلایس میکنم تا آماده بشه برا کد نویسی. ولی برا کد نویسی یه تیکه مشکل دارم. البته اینم بگم که تازه شروع کردم به یادگیری html
ببینید من میخوام بالای سایتم رو به این شکل طراحی کنم:
tt.gif
میدونم که اول باید یه مستطیل مشکی رو کدنویسی کنم و بعد یکی از هلال های پایین مستطیل رو که اسلایس کردم با تکرار اونجا قرار بدم. درست فهمیدم؟!
حالا دو تا مشکل اصلی:
1- اون مستطیل مشکی بالا رو هر چی با css کد نویسی میکنم جوری نمیشه که در هر رزولیشنی سه طرفش کامل به بالای مرورگر بچسبه. همش از بالا و دو طرف مرور گر تقریبا یک سانت قرمز میشه. من عرض بهش نمیدم. اما ارتفاع رو مثلا 100 میدم. ولی آخرش میخوام بالاش یه نوار مشکی کامل باشه که از بالا و دو طرف کامل به حاشیه مرورگر بچسبه، که نمیشه!
2- اون تصویر هلال زیر رو با چه کدی تکرار کنم؟
 
beybi

beybi

Registered User
تاریخ عضویت
7 آگوست 2009
نوشته‌ها
125
لایک‌ها
17
محل سکونت
Kerman
به نقل از ramin_m :
من سایتم رو تو فتوشاپ طراحی کردم و حالا دارم اسلایس میکنم تا آماده بشه برا کد نویسی. ولی برا کد نویسی یه تیکه مشکل دارم. البته اینم بگم که تازه شروع کردم به یادگیری html
ببینید من میخوام بالای سایتم رو به این شکل طراحی کنم:
مشاهده پیوست 209442
میدونم که اول باید یه مستطیل مشکی رو کدنویسی کنم و بعد یکی از هلال های پایین مستطیل رو که اسلایس کردم با تکرار اونجا قرار بدم. درست فهمیدم؟!
حالا دو تا مشکل اصلی:
1- اون مستطیل مشکی بالا رو هر چی با css کد نویسی میکنم جوری نمیشه که در هر رزولیشنی سه طرفش کامل به بالای مرورگر بچسبه. همش از بالا و دو طرف مرور گر تقریبا یک سانت قرمز میشه. من عرض بهش نمیدم. اما ارتفاع رو مثلا 100 میدم. ولی آخرش میخوام بالاش یه نوار مشکی کامل باشه که از بالا و دو طرف کامل به حاشیه مرورگر بچسبه، که نمیشه!
2- اون تصویر هلال زیر رو با چه کدی تکرار کنم؟
کلیک کنید تا بازشود...
ببین اگه منظورتو درست فهمیده باشم می تونی برای اینکه عرض مستطیل بالات تمام صفحه بشه باید از
width: 100%;
استفاده کنی و برای تکرار هلال ها هم تو سایت نئوپرشیا توضیح کامل داده که اونو بخونی بهتر(البته برای قرار دادن img در body هست).
کار با تصویر زمینه در طراحی صفحات با استایل
 
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
ممنونم دوست عزیز. نه با این width:100% حل نشد.
ببینید منظورم چیه:
این گوشه ی بالای سایت منه:
t2.gif
همونطور که میبینید اون نوار فیروزه ای از بالا و دو طرف کامل به حاشیه مرورگر نچسبیده.


ولی این نمونه رو ببینید:
t1.gif
همونطور که میبینید نوارهای مشکی دقیقا تا لبه ی بروزر چسبیدن و در کناره های اون ها اثری از رنگ بک گراند نیست.
چیکار کنم که نوار فیروزه ای بالای سایت من هم دقیقا مثل نوار مشکی این سایت، به حاشیه ی مرورگر بچسبه؟!
 
Last edited:
k-boy

k-boy

Registered User
تاریخ عضویت
7 فوریه 2012
نوشته‌ها
5,616
لایک‌ها
7,060
محل سکونت
جنگل آسفالت
میتونی یک نوار افقی از عکست رو بر داری و داخل css تکرارش کنی:
کد: 
background:url(image source) repeat-x;
اگر تصویر رو به عنوان پس زمینه برای body بزاری دیگه اون فاصله ها رفع میشه.
.
.
.
.
اس ام اس عاشقانه | اس ام اس تولد
 
Last edited:
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
به نقل از k-boy :
میتونی یک نوار افقی از عکست رو بر داری و داخل css تکرارش کنی:
کد: 
background:url(image source) repeat-x;
اگر تصویر رو به عنوان پس زمینه برای body بزاری دیگه اون فاصله ها رفع میشه.
کلیک کنید تا بازشود...

آخه به این ترتیب که همون بالای صفحه ام یه نوار افقی ایجاد میشه. من میخوام مثلا وسط صفحه و یه بار دیگه هم پایین صفحه باشه. مثلا الان میخوام همون هلال ها زیر نوار فیروزه ای بالا ایجاد بشه
 
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
من اون مشکل تکرار تصویرم در راستای افق رو بصورت زیر حل کردم. ببینید کارم منطقی بوده؟
در فایل css:
کد: 
#UnderMenu{
  background-image:url(../asansite/images/asan_02.gif)  ;
  background-repeat:repeat-x;
 }


حالا اینم در فایل HTML:
کد: 
<div id="UnderMenu">
<br />
</div>

اون تگ </br> رو بخاطر اینکه نشون بده مجبور شدم بزنم. اگه Div ها رو خالی میذاشتم هیچی نشون نمیداد.

این کاری که کردم مشکلی نداره؟ درست کد زدم؟


اما مشکل دومم که چسبیده به لبه هاست همچنان باقیه. آخه اگه بذارمش داخل تگ Body که کل صفحه رو میگیره!!!!!! چطور بهش بفهمونم همون نوار بالایی رو میخوام.
(عذر میخوام اگه تو درک مفاهیم مشکل دارم. عرض کردم که تازه شروع کردم به HTML)
 
k-boy

k-boy

Registered User
تاریخ عضویت
7 فوریه 2012
نوشته‌ها
5,616
لایک‌ها
7,060
محل سکونت
جنگل آسفالت
خواهش میکنم , این چه حرفیه؟
happysmiley.gif

بجای br از
HTML: 
&nbsp;
میتونی استفاده کنی. نقش space رو ایفا میکنه.
راجع به مشکل دوم میتونی برای div یا table از position استفاده کنی:
HTML: 
position:fixed; left:0; top:0;
یا
HTML: 
position:absolute; left:0; top:0;
این دوتا کد , تک شما رو به کناره ها میچسبونه.
این کدا شاید کمکی بکنه:
ا
HTML: 
<body >
<style type="text/css">
#top_line
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:35px;
    background-color:#666;
}
#main
{
    margin:35px auto;
    width:1024px;
    height:700px;
    background-color:#C99;
}
</style>
<div id="top_line" >&nbsp;</div>
<div id="main" >&nbsp;</div>

</body>
اینجوری اون نوار بالا به اطراف میچسبه.فکر کنم جواب بده.
اگر حل نشد حتما سوال کنید.
 
Last edited:
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
خیلی خیلی ممنونتونم. هر دو تا مشکل حل شد. فقط یه چیز کوچیک مونده. من اون مستصیل بالایی که یک رنگ قرمز هست رو با کد شما درست کردم و حاشیه هاش چسبید به دو طرف مرورگر. ولی قسمت هلال زیرش که گفتم از تکرار یه تصویر بدست میاد، هرکارش میکنم دو طرفش مثل مستطیل بالاییش نمیچسبه به دو طرف. اگرم از position استفاده کنم بدتر میره زیر مستطیل.
HTML: 
#TopMenu {
 width: 100%;
 height:60px;
 color:#FFF;
 background-color:#00A7D1;
 position:fixed; left:0; top:0;
}
#UnderMenu {
margin-top:60px;
 background-image:url(../asansite/images/asan_02.gif);
 background-repeat:repeat-x;
/*position:fixed; left:0; top:60;*/
}
menu همون مستطیل بالاییه و undermenu همون هلالی که زیرش داره تکرار میشه.
اینو چیکارش کنم؟
 
Last edited:
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
ترتیب کد نویسی برای اجزای صفحه در HTML چطوره؟ از بالا به پایین و در هر سطر از چپ به راست. درسته؟
ببینید من این دو تا بلاک رو انداختم کنار هم. حالا یه بلاک دیگه برای خبرنامه هم میخوام بذارم انتهای سمت راست. چه تغییری باید تو تگ ها بدم؟

3.gif


برای دو بلاک اول این کدها رو نوشتم:
HTML: 
<div id="Main" >
 <div class="TopAds" >
<p> تبلیغات هزینه نیست، سرمایه گذاری است! 
<br />
محل تبلیغات شما 
<br />
350*70 </p>
<br />
 </div>
 <div class="TopAds2" >
<p> تبلیغات هزینه نیست، سرمایه گذاری است! 
<br />
محل تبلیغات شما 
<br />
350*70 </p>
<br />
 
 </div>
 <div id="Khabarnameh">&nbsp;fg
 </div>
</div>

و
HTML: 
#Main {
 width:920px;
 height:auto;
 margin:auto;
}
.TopAds{
 width:350px;
 height:70px;
 background-color:#ECEDEC;
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 color:#666;
 text-align:center;
 float:left;
}
.TopAds2{
 width:350px;
 height:70px;
 background-color:#ECEDEC;
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 color:#666;
 text-align:center;
 
margin-left:357px;
}
# Khabarnameh{
 width:195px;
 height:70px;
 background-color:#ECEDEC;
 margin-left:775px;
 
}

اما با این کدها اون بلاک آخر خبرنامه میره زیر این دو بلاک تبلیغات قرار میگیره. نمیدونم چه نکته ای رو در مورد کنار هم چیدن بلاک ها نمیدونم که اینطوری میشن. چطوری درستش کنم؟ اگر میخواستم کدها رو با جدول بنویسم راحت بود. کافی بود سه تا ستون در نظر میگرفتم و تو هر کدوم کدها رو می نوشتم. ولی حالا که میخوام بجای جدول با div بنویسم چطور بلاک ها رو کنار هم بچینم؟
 
Last edited:
k-boy

k-boy

Registered User
تاریخ عضویت
7 فوریه 2012
نوشته‌ها
5,616
لایک‌ها
7,060
محل سکونت
جنگل آسفالت
توی این مورد اگر از table استفاده کنید بهتره اما:
توی کد زیر به divها , clear و float دقت کنین:
HTML: 
<style type="text/css" >
#clear
{
    clear:both;
}
#main
{
    width:750px;
    height:150px;
    background-color:#333;
    margin:50px auto;
}
#left
{
    width:250px;
    height:130px;
    background-color:#CCC;
    float:left;
}
#two_blc
{
    width:500px;
    height:140px;
    background-color:#63F;
    float:right;
}
#blc_left
{
    width:250px;
    height:130px;
    background-color:#999;
    float:left;
}
#blc_right
{
    width:250px;
    height:130px;
    background-color:#CC3;
    float:right;
}
</style>

HTML: 
<div id="main" >
   <div id="left" >left</div>
   <div id="two_blc" >
      <div id="blc_left" >blc_left</div>
      <div id="blc_right" >blc_right</div>
      <div id="clear" ></div>
   </div>
   <div id="clear" ></div>
</div>
 
Last edited:
k-boy

k-boy

Registered User
تاریخ عضویت
7 فوریه 2012
نوشته‌ها
5,616
لایک‌ها
7,060
محل سکونت
جنگل آسفالت
به نقل از ramin_m :
ترتیب کد نویسی برای ...
کلیک کنید تا بازشود...
توی برنامه نویسی ترتیب خوندن و یا اجرا شدن کدها از بالا به پاییه.
وقتی float رو چپ قرار میدین اون تگ به سمت چپ میره . شما TopAds رو به سمت چب فرستاده بودین و
ادامه نوشته ها از سمت راست شروع شده بودن . اما برای خبرنامه float تعریف نکرده بودین.
کد clear داخل css باعث میشه که نوشته های بعدی از زیر div هایی که براشون float تعیین شده شروع
بشن. برای اینکه کارایی بعدی clear رو ببینین ارتفاع main و two_blc رو روی auto تنظیم کنین . اگر در این
صورت claer رو بردارین باعث میشه تا main و two_blc دیگه از ارتفاع تگهای داخلیشون تبعیت نکنن و ظاهر
نشن.
 
Last edited:
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
واقعا ممنونم. هم مشکلم حل شد و هم کلی راه افتادم.
حالا یه موضوع دیگه. ببینید الان ارتفاع تمام عناصر این سطح یکی بود. حالا اگر یکی از بلاک ها ارتفاعش بیشتر باشه(مثلا در قالب های سه ستونه که ارتفاع بلاک های قسمت منو و قسمت content با هم یکی نیستند) باید چیکار کرد؟ اینجوری که بخوایم بصورت رج به رج! پیش بریم یه هو یکی از بلاک ها چون ارتفاعش کمتر از بقیه است با عنصر زیریش کلی فاصله میفته. منظورم رو میفهمین؟ وقتی بعد از یه div از تگ clear استفاده کردیم میره سطر بعد از div.اینجور مواقع چیکار کنم؟
 
k-boy

k-boy

Registered User
تاریخ عضویت
7 فوریه 2012
نوشته‌ها
5,616
لایک‌ها
7,060
محل سکونت
جنگل آسفالت
از بسط دادن کد بالا میتونین هر چنتا ستون که میخواین بسازین.
اما اگر منظورتون رو درست متوجه شدم از کدهای زیر میتونین استفاده کنین:
HTML: 
<style type="text/css" >
#clear
{
    clear:both;
}
#main
{
    width:750px;
    height:auto;
    background-color:#333;
    margin:50px auto;
}
#left
{
    width:250px;
    height:auto;
    background-color:#CCC;
    float:left;
}
#two_blc
{
    width:500px;
    height:auto;
    background-color:#63F;
    float:right;
}
#blc_left
{
    width:250px;
    height:auto;
    background-color:#999;
    float:left;
}
#blc_right
{
    width:250px;
    height:120px;
    background-color:#CC3;
    float:right;
}
</style>
HTML: 
<div id="main" >
   <div id="left" >left<br />
      <div style="width:250px; height:180px; background-color:#CC0;" ></div>
      <div style="width:250px; height:100px; background-color:#666;" ></div>
   </div>
   <div id="two_blc" >
      <div id="blc_left" >blc_left<br />
         <div style="width:250px; height:180px; background-color:#06F;"></div>
         <div style="width:250px; height:200px; background-color:#C09; margin-top:15px;"></div>
         <div style="width:250px; height:130px; background-color:#0F0;"></div>
      </div>
      <div id="blc_right" >blc_right</div>
      <div id="clear" ></div>
   </div>
   <div id="clear" ></div>
</div>
در واقع توی ستونهای داخلی , هرچی بخواین میتونین بزارین و با تعریف کردن margin فاصله ها رو تعیین کنین.
البته حواستون باشه داخل چه div هایی کدهاتون رو تعریف میکنین . توی اینجا باید داخل div های left و blc_left و blc_right کدهاتون
رو تعریف کنین .
برای تعریف کردن ارتفاع محدودیتی وجود نداره اما برای تعریف کردن پهنا باید از div مادر (parent) تبعیت کنین و نباید بیشتر از اون پهنا داشته باشه.
 
Last edited:
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
واقعا ممنونم بابت راهنمایی هاتون. نه منظورم این نبود دوست عزیز. ببیند:
شکل زیر رو ببینید:
blk.jpg

تو سطر(div) اول همونطور که میبینید blk_right ارتفاع کمتری نسبت به blk_left و left داره. سر سطر بعد که با خط قرمز مشخص شده این div بسته میشه(یه clear هم انجام میشه) و یه div جدید برای سری 2 باز میشه و عناصر2 نوشته میشن. حالا سوال من اینجاست. تکلیف اون blk_right سطر اول چیه؟ میبینید چه فاصله ی زیادی با blk_lright2 پیدا کرده؟
 
k-boy

k-boy

Registered User
تاریخ عضویت
7 فوریه 2012
نوشته‌ها
5,616
لایک‌ها
7,060
محل سکونت
جنگل آسفالت
فکر کنم این کدا مشکل رو حل کنه:
HTML: 
<style type="text/css" >
#clear{clear:both;}
#main{width:750px;height:auto;background-color:#FFC;margin:50px auto;}
#left{width:250px;height:auto;background-color:transparent;float:left;}
#two_blc{width:500px;height:auto;background-color:transparent;float:right;}
#blc_left{width:250px;height:auto;background-color:transparent;float:left;}
#blc_right{width:250px;height:auto;background-color:transparent;float:right;}
</style>
<div id="main" >
   <div id="left" >
      <div style="width:240px; height:150px; background-color:#CC0;margin:5px auto;" ></div>
      <div style="width:240px; height:150px; background-color:#666;margin:5px auto;" ></div>
   </div>
   <div id="two_blc" >
      <div id="blc_left" >
         <div style="width:240px; height:150px; background-color:#CC0;margin:5px auto;" ></div>
         <div style="width:240px; height:150px; background-color:#666;margin:5px auto;" ></div>
      </div>
      <div id="blc_right" >
         <div style="width:240px; height:100px; background-color:#C09;margin:5px auto;"></div>
         <div style="width:240px; height:100px; background-color:#C09;margin:5px auto;"></div>
      </div>
      <div id="clear" ></div>
   </div>
   <div id="clear" ></div>
</div>
اگر منظور رو درست متوجه شده باشم مشکل شما اینه که بعد از clear کدهای جدید وارد میکنید که به این شکل در میاد!
کار clear یه کم گیج کنندس:happy:. اگر این کدها درست بود بگین تا توضیحات لازم رو بدم.
 
Last edited:
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
واقعا ممنونم. خیلی خوب توضیح دادید و حسابی فهمیدم! میرم ادامه بدم. اگر مشکل دیگه ای بود با عرض پوزش، دوباره مزاحمتون میشم
 
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
overflow چه کاری انجام میده؟l
hiden که بصورت value بکار میره چیکار میکنه؟
 
k-boy

k-boy

Registered User
تاریخ عضویت
7 فوریه 2012
نوشته‌ها
5,616
لایک‌ها
7,060
محل سکونت
جنگل آسفالت
HTML: 
<style type="text/css" >
#clear{clear:both;}
#main{width:750px;height:auto;background-color:#FFC;margin:50px auto;}
#left{width:250px;height:auto;background-color:transparent;float:left;}
#two_blc{width:500px;height:auto;background-color:transparent;float:right;}
#blc_left{width:250px;height:auto;background-color:transparent;float:left;}
#blc_right{width:250px;height:auto;background-color:transparent;float:right;}
</style>
<div id="main" >
   <div id="left" >
      <div style="width:240px; height:150px; background-color:#CC0;margin:5px auto;" ></div>
      <div style="width:240px; height:150px; background-color:#666;margin:5px auto;" ></div>
   </div>
   <div id="two_blc" >
      <div id="blc_left" >
         <div style="width:240px; height:150px; background-color:#CC0;margin:5px auto;" ></div>
         <div style="width:240px;overflow:hidden; height:150px; background-color:#666;margin:5px auto;" >
                  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
                  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
                  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
         </div>
      </div>
      <div id="blc_right" >
         <div style="width:240px;overflow:scroll; height:100px; background-color:#C09;margin:5px auto;">
                  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
                  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
                  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
         </div>
         <div style="width:240px; height:100px; background-color:#C09;margin:5px auto;">
                  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
                  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
                  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
         </div>
      </div>
      <div id="clear" ></div>
   </div>
   <div id="clear" ></div>
</div>
یکی از مشکلاتی که توی کار با div وجود داره اینه که نوشته های شما از پهنا و ارتفاع div تبعیت نمیکنن و از div میزنن بیرون!
برای رفع مشکل میشه از overflow استفاده کرد.
scroll: باعث میشه که div شما scroll بخوره و نوشته ها رو کامل میتونین ببینین.
hidden: نوشته هایی که از div بیرون زدن رو حذف میکنه و نشون نمیده.
visible: همون حالت پیش فرض هست که باعث میشد نوشته ها از div بیرون بزنن!
البته کاراییه overflow خیلی زیاده و در ساخت jquery بسیار کاربردیه .
برای آشناییه بیشتر با css از این سایت هم میتونین کمک بگیرین:CSS overflow property
.
.
اس ام اس عاشقانه | اس ام اس تولد
 
Last edited:
ramin_m

ramin_m

Registered User
تاریخ عضویت
22 آگوست 2012
نوشته‌ها
248
لایک‌ها
35
واقعا ازتون ممنونم. میدونم سوالات من که برا خودم در ابتدای کار مشکل بود، برای شما خیلی ساده بود. اما برای من کمک بزرگی بود. اگه تو اینا گیر میفتادم نمیتونستم ادامه بدم. بازم ممنون
 
You must log in or register to reply here.

بک‌لینک


بالا