• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

سوال درمورد درست قرار دادن چند ابزار در Html

A

ahmadfononi

معاونت انجمن
با سلام

من دارم یک سایت با استفاده از Html درست میکنم برای پروژه.

بعد با استفاده از فرم ها یک بلاک درست کردم .

حالا اینجا یک مشکلی دارم و اونم اینه که :

وقیتکه میخوام یه مطلب رو بذارم اون مطلب بالای بلاک قرار میگیره ولی من میخوام که درست روبروی بلاک قرار بگیره.

میخواستم اگر میشه راهنمایی کنید که چطور باید این مشکل رو برطرف کنم.

اینم عکس :

http://up.vbiran.ir/images/modqgsidryljwaj5hmag.jpg

حالا میخوام که به این شکل در بیاد

http://up.vbiran.ir/images/3yfisf8c4qmbu67iwl7f.jpg

(بدلیل مشکلاتی نشد عکس ها رو همینجا بذارم.)

اگر کد رو هم میخواستین بگید که بذارم
 
A

ahmadfononi

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

این عکس :

http://up.vatandownload.com/images/jvzejna8vchogqte92j0.gif

و اینم که درست در نیومده:

http://up.vatandownload.com/images/e01eq6rrmv5n9b39k38.jpg

بفرما علی جان :

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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="designer" content="Ahmad Fononi">
<meta name="designerUrl" content="http://www.ahmadfononi.mihanblog.com/">
<link href="m30.css" rel="stylesheet" type="text/css" />
<head>
<title>Java Script آموزش طراحی صفحات وب بوسیله</title>

<!--Background-->
<style type="text/css">
body {
    background-image: url();
    background-color: #CCC;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
</style>
</head>
<!--Header-->
<center><fieldset  style="border-color:#00F" style="border:solid"><img src="pic/Header.jpg"/ height="140" width="1062"></fieldset></center>

<body dir="rtl">

<p align="right"><ul id="menu">
  <li><a href="index.html">صفحه اصلی</a></li>
    <li><a href="mazhabi.html">مذهبی</a></li>
    <li><a href="mailto:ahmad_fononizadeh@yahoo.com">تماس با ما</a></li></ul>
<p></p>
<p></p>

<!--Text-->
<div class="li-Sid" style="height:200px; text-align:right; direction:rtl; font-family:Tahoma; padding:3; font-size:12px" dir="rtl">
 <p> <center>
   <p>جاوا اسکرپت یک زبان اسکرپت نویسی تحت وب است که برای افزایش پویایی صفحات HTML استفاده می شود. از این زبان می توان برای ارزیابی اعتبار فرمهای HTML قبل از ارسال به سرور، شناسایی مرورگر کاربران، ایجاد انواع منو ها و بسیاری کارهای دیگر استفاده کرد.</p>
   <p>نکته : باید توجه داشت که جاوا اسکرپت یک زبان طرف کاربر (Client Side) است توسط کامپیوتر شخصی کاربر تفسیر می شود. کدهای مربوط به جاوا اسکرپت توسط کاربر نهایی قابل مشاهده هستند پس توصیه می شود از آن برای مقاصد مهم نظیر اتصال به دیتابیس استفاده نشود. </p>
   <p>می توان کدهای جاوا اسکرپت را به صورت تعبیه شده در صفحات HTML استفاده کرد و یا کدهای جاوا اسکرپت را در یک فایل جداگانه با پسوند js. ذخیره کرد ولی در هر صورت یان فایلها هم باید توسط یک صفحه HTML فراخوانی شده و نتیجه آنها در صفحات HTML نمایان خواهد شد. </p>
<p> </p>
 </center>
 </p>
</div>



<p></p>



<!--Block Mozoat-->
<div class="round" style="width:200px; background-image:url(pic/block.gif);padding-top:20px"><center><h4><font color="#FFFFFF">موضوعات</font></h4>
</center>
  <div style="background:silver;height:300px;text-align:right;direction:rtl;font-family:Tahoma;padding:5px;font-size:12px" class="li-Sid">
    <ul>
   <li> <a href="moghadameh.html">مقدمه آموزش جاوا اسکرپت</a></li>
      <li><a href="osol.html">اصول نوشتن جاوا اسکرپت</a></li>
      <li><a href="amalgar.html">عملگرهای مورد استفاده در JavaScript</a></li>
      <li><a href="alert.html">نمایش کادر های alert</a></li>
      <li><a href="nmjs.html">نوشتن متن با استفاده از جاوا اسکرپت</a></li>
      <li><a href="if.else.html">دستور شرطی if...else </a></li>
      <li><a href="switch.html">دستور شرطی switch</a></li>
      <li><a href="button.html">دکمه ها و موارد استفاده آنها<br />
      </a></li>
      <li><a href="prompt.html"> کادر های prompt</a></li>
    </ul>
</div></div></div>



</body>

<!--Footer-->
<center>
  <div style="text-align: center; border-top: 2px solid #999; margin-top: 1em;">
</p>
<p><font face="Arial, Helvetica, sans-serif">
  <a href="index.html">صفحه اصلی</a>
  <a href="http://ahmadfononi.mihanblog.com">وبلاگ من</a>
  <a href=""></a>
  <a href=""></a>
</p>
<p style="font-size: 0.6em;">Design by <a href="mailto:ahmad_fononizadeh@yahoo.com">Ahmad Fononi</a></p></center></font>

</html>
 
P

parastu

متخصص بخش گالری عکس
سلام
من قبلنا یه کم html خوندم
فکر میکنم تگ <br/> متن رو به پاراگراف بعد میبره،از چند تا تگ <br/>استفاده کنید شاید کار ساز بود
یه فایل آموزش هم دارم اگر لازم دونستید در اختیارتون میزارم
 
admin

admin

Administrator
عضو کادر مدیریت
یکمی کدهات نامیزون میزنن!
با این حال من یک کدی زدم خودت میتونی بیشتر روش کار کنی:
کد: 
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="designer" content="Ahmad Fononi">
<meta name="designerUrl" content="http://www.ahmadfononi.mihanblog.com/">
<link href="m30.css" rel="stylesheet" type="text/css" />
<head>
<title>Java Script آموزش طراحی صفحات وب بوسیله</title>


<!--Background-->
<style type="text/css">
body {
    background-image: url();
    background-color: #CCC;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
</style>
</head>
<!--Header-->
<center><fieldset  style="border-color:#00F" style="border:solid"><img src="pic/Header.jpg"/ height="140" width="1062"></fieldset></center>


<body dir="rtl">


<p align="right"><ul id="menu">
  <li><a href="index.html">صفحه اصلی</a></li>
    <li><a href="mazhabi.html">مذهبی</a></li>
    <li><a href="mailto:ahmad_fononizadeh@yahoo.com">تماس با ما</a></li></ul>
<p> </p>
<p></p>
<p></p>


<!--Text-->
<div class="li-Sid" style="height:343px; text-align:right; direction:rtl; font-family:Tahoma; padding:3; font-size:12px; width:699px" dir="rtl">
 <p> 
   <p style="text-align: center">جاوا اسکرپت یک زبان اسکرپت نویسی تحت وب است که برای افزایش پویایی صفحات HTML استفاده می شود. از این زبان می توان برای ارزیابی اعتبار فرمهای HTML قبل از ارسال به سرور، شناسایی مرورگر کاربران، ایجاد انواع منو ها و بسیاری کارهای دیگر استفاده کرد.</p>
   <p style="text-align: center">نکته : باید توجه داشت که جاوا اسکرپت یک زبان طرف کاربر (Client Side) است توسط کامپیوتر شخصی کاربر تفسیر می شود. کدهای مربوط به جاوا اسکرپت توسط کاربر نهایی قابل مشاهده هستند پس توصیه می شود از آن برای مقاصد مهم نظیر اتصال به دیتابیس استفاده نشود. </p>
	<center>
   <p>می توان کدهای جاوا اسکرپت را به صورت تعبیه شده در صفحات HTML استفاده کرد و یا کدهای جاوا اسکرپت را در یک فایل جداگانه با پسوند js. ذخیره کرد ولی در هر صورت یان فایلها هم باید توسط یک صفحه HTML فراخوانی شده و نتیجه آنها در صفحات HTML نمایان خواهد شد. </p>
	<center>
<p> </p>
 </center>
 </center>
 </p>
</div>






<p></p>






<!--Block Mozoat-->
<div style="position: absolute; width: 191px; height: 232px; z-index: 1; right: 877px; top: 164px" id="layer1">
<div class="round" style="width:200px; background-image:url(pic/block.gif);padding-top:20px"><center><h4><font color="#FFFFFF">
	موضوعات</font></h4>
</center>
  <div style="background:silver;height:300px;text-align:right;direction:rtl;font-family:Tahoma;padding:5px;font-size:12px" class="li-Sid">
    <ul>
   <li> <a href="moghadameh.html">مقدمه آموزش جاوا اسکرپت</a></li>
      <li><a href="osol.html">اصول نوشتن جاوا اسکرپت</a></li>
      <li><a href="amalgar.html">عملگرهای مورد استفاده در JavaScript</a></li>
      <li><a href="alert.html">نمایش کادر های alert</a></li>
      <li><a href="nmjs.html">نوشتن متن با استفاده از جاوا اسکرپت</a></li>
      <li><a href="if.else.html">دستور شرطی if...else </a></li>
      <li><a href="switch.html">دستور شرطی switch</a></li>
      <li><a href="button.html">دکمه ها و موارد استفاده آنها<br />
      </a></li>
      <li><a href="prompt.html"> کادر های prompt</a></li>
    </ul>
</div></div>
	<p> </div>
</div>






</body>


<!--Footer-->
<center>
  <div style="text-align: center; border-top: 2px solid #999; margin-top: 1em;">
</p>
<p><font face="Arial, Helvetica, sans-serif">
  <a href="index.html">صفحه اصلی</a>
  <a href="http://ahmadfononi.mihanblog.com">وبلاگ من</a>
  <a href=""></a>
  <a href=""></a>
</p>
<p style="font-size: 0.6em;">Design by <a href="mailto:ahmad_fononizadeh@yahoo.com">Ahmad Fononi</a></p></center></font>


</html>
 
A

ahmadfononi

معاونت انجمن
خیلی خیلی ممنون علی جان

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

ممنون
 
admin

admin

Administrator
عضو کادر مدیریت
متوجه منظورت نشدم احمد جان.من در قالبت تصویری ندیدم.
 
M

Mahdi Askari

مدير فنی
فک کنم منظور احمد این بود درسته؟

e01eq6rrmv5n9b39k38.jpg
 
admin

admin

Administrator
عضو کادر مدیریت
من این تصویر هدر بلوک رو ندارم، به هر حال این کد تصویر شما هست:
کد: 
background-image:url(pic/block.gif);padding-top:20px

با توجه به تصویری که مهدی جان قرار داده چون تصویر شما قابلیت تکرار نداره برای اینکه تصویرت رو فیکس کنی باید این کد رو اضافه کنی:
کد: 
background-size:100% 100%;

نکته ای که باید دقت کنی این هست که این کد فیکس تصویر بک گراند در مرورگر اینترنت اکسپلورر کار نمیکنه.
کادر مربوط به هدر بلوکت هم خیلی بزرگ هست این کادر رو باید تنظیم کنی.
 
admin

admin

Administrator
عضو کادر مدیریت
کد فیکس 100 درصدی که گذاشتم رو اضافه کن احمد جان.
 
admin

admin

Administrator
عضو کادر مدیریت
خواهش مینکم. با تنظیم اندازه های عکس و کادر، بهتر هم نمایش داده میشه.
باز هم متأسفانه متوجه منظورت نشدم! یعنی چی مطلب رو اضافه کرد؟!
 
A

ahmadfononi

معاونت انجمن
ممنون علی جان

شکل قسمت موضوعات رو تغییر دادم و از طریق css یه منوی کشویی درست کردم و بجای اون یکی زدم.

این عکسش :http://up.vatandownload.com/images/fvop8ne92hlbtuk4yes.jpg

حالا من اینجا توی صفحه ام یه جای خالی دارم.

بنظرت جای این جای خالی چه چیزی بذارم ؟

این عکس کلی هست

http://up.vatandownload.com/images/njx9whdg33tz0wm2iy.jpg

بازم ببخشید که توی زحمت انداختمت.:گل:
 
admin

admin

Administrator
عضو کادر مدیریت
خواهش میکنم. :گل:
سایز کلی صفحه رو کمی کوچک کن، و کادر نوشته ها رو در وسط صفحه (تمام صفحه) قرار بده.
 
C

Cube

متخصص بخش هاستینگ و دامین
یه padding-top به اون تگی که نوشته هات توشن بدی .... همه چی حل میشه ...



html-web-page.jpg

عکس بالا رو ببین :

1- تگ form خدا بیامرز شده و تو صفحه استاتیک کاربردی نداره ......
2- اجزای سایتت مثل عکس بالاست که باید هر بخش رو به تگ div پیاده سازی کنی

خیلی آسونه

اول یه <div> میزاری برای هدرت که عرضش به اندازه کل صفحه است

بعد یه <div> دیگه زیرش قرار میدی که ارتفاعش کمتره

بعد یه <div> دیگه که راست چین شده (از راست نظام می گیره) و ارتفاعش هم اندازه با ارتفاع کل صفحه است و عرضش کمه

بعد یه <div> دیگه که چپ چینه (یا راست چین هم باشه فرقی نداره) ولی عرضش زیاده

در آخر هم یه <div> برای فوتر که مثل بخش منوی بالاییه ...


به همین راحتی

نتیجه کار کد زیر میشه :

کد: 
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>NetNic.ir | Best Learning WebSite</title>

<style type="text/css">
p{font-family:Tahoma;margin:8px;}
</style>

</head>

<body style="width:1024px;">


<div id="Header" style="width:1024px;height:100px;background-color:blue;">هدر</div>

<div id="TopMenu" style="width:1024px;height:30px;background-color:orange;">منوی بالا</div>

<div id="RightMenu" style="float:right;width:200px;height:470px;background-color:silver;">منوی سمت راست</div>

<div id="Content" style="float:left;width:820px;height:400px;background-color:green;padding-top:70px;text-align:center;">
<h1>متون سایت</h1>
<p>متن شماره یک</p>
<p>متن شماره دو</p>
</div>

<div id="Footer" style="clear:both;width:1024px;height:30px;background-color:yellow;">فوتر</div>
</body>

</html>
 
آخرین ویرایش:
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا