• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
ررسی طرح اولیه سایت
#1
سلام دوستان من طرح کلی یک سایت رو با css , html درست کردم که میخواستم دوستانی که وارد هستن یه نگاهی بکنن و ایرادهای کار رو بهم بگن
ممنون از راهنمائیتون
این کد 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">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
link rel="stylesheet" type="text/css" href="Untitled-3.css" />
<
title>Untitled Document</title>
</
head>

<
body  bgcolor="#000000" >
<
div class="site">
<
div class="header"></div>
<
div class="center" style="position:absolute; right:50px top: 238px;; left: 39px; top: 360px;">
<
ul>
    <
li><class="menu" href="#" >صفحه اصلی</a></li>
    <
li><class="menu" href="#">اخبار</a></li>
    <
li><class="menu" href="#">درباره ما</a></li>
    <
li><class="menu" href="#">عضویت</a></li>
    <
li><class="menu" href="#">نمونه کارها</a></li>
    <
li><class="menu" href="#">ورود کاربران</a></li>
    <
li><class="menu" href="#">تماس با ما</a></li>
</
ul>
</
div>
<
div class="news"><div class="title">
  <
p>اخبار</p></div>
  <
p>&nbsp;</p>
  <
p>&nbsp;</p>
  <
p>&nbsp;</p>
  <
p>&nbsp;</p>


</
div>
<
div class="content">
  <
p>&nbsp;</p>
  <
p>&nbsp;</p>
  <
p>&nbsp;</p>
  <
p>&nbsp;</p>
 
</
div>
<
div class="footer">
  <
p>در این قسمت اخبار و اطلاعات با بازدید بالا نمایش داده میشود</p>
  <
p>&nbsp;</p>
</
div>
</
div>
</
body>
</
html



اینم کد css

کد پی‌اچ‌پی:
@charset "utf-8";
/* CSS Document */
/*----------------body---------------*/
.site{
    
position:absolute;
    
height:873px
    
width:90%; 
    
background-color:#666; 
    
margin-left:5%; 
    
margin-right:5%;
    
border-radius:12px;
    
}
.
title{
    
position:absolute;
    
background-color:#FC0;
    
width:100%;
    
height:auto;
    
font-family:KamranJadidHoma;
    
font-size:20px;
    
font-style:oblique;
    
text-align:center;
    
line-height:5pt;
    
border-radius:4px;
    
left1px;
    
top0px;
}
.
news{
    
position:absolute;
    
background:#CCC;
    
width:35%;
    
height187px;
    
borderinset;
    
top400px;
    
left89px;
    
border-radius10px;
    
border-left:#960;
    
border-right:#960;
    
border-top:#960;
    
margin-left:0;
    
text-aligncenter;
    
}
.
content{
    
position:absolute;
    
width:55%;
    
height:185px;
    
background-color:#CCC;
    
left:623px;
    
top402px;
    
border-radius:10px;
    
overflow:inherit;
}
                                     
/*------head--------*/

/*-------------------------------------header--------------*/
.header{
    
background-color:#333;
    
position:absolute;
    
width:90%;
    
top:opx;
    
height350px;
    
left:100px;
    
background: -moz-linear-gradient#333, # 000 );
    
border-radius7px;
    
border-left:#CCC;
    
border:groove;
    
border-right:#CCC;
    
}
/*----menu-----*/

.center{
    
position:absolute;
    
width:900px;
    
height:27.75pt;
    
margin-left:150px;
    
top:345px;
    
overflowinherit;
    
}

ul{
    
width:100%;
    
margin:0px;
    }
li{
    
display:inline;
    
text-align:center;
   
 }

a.menu
      
{
          
float:right;
          
width:70pt;
          
height:20pt;
          
text-decoration:none;
          
color:#F90;
          
background-color:#333;
          
padding:2pt 6pt;
          
border-right:1px solid white;
          
text-align:middle;
          
line-height:20pt;
          
border-radius8px;
          
                }
a.menu:hover{
    
color:#000;font:bold; background-color:#F90;


}
/*------------------footer------------------*/
.footer{
    
position:absolute;
    
width:90%;
    
background-color:#930;
    
left89px;
    
top589px;
    
height:auto;
    
border-radius:10px;
    
text-align:right;
    
padding-right:5px;
     

  پاسخ
تشکر شده توسط :
#2
فکر کنم مانیتورت از اون wide ها باشه؟ نه؟ Smile

چون وقتی من تو مانیتور ساده ی 4:3 ام نگاش کردم به هم ریخته بود.
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط : parsisport
#3
(۱۳۹۰ مرداد ۰۱, ۰۷:۴۹ ب.ظ)masoudmanson نوشته: فکر کنم مانیتورت از اون wide ها باشه؟ نه؟ Smile

چون وقتی من تو مانیتور ساده ی 4:3 ام نگاش کردم به هم ریخته بود.

اره مانیتورم وایده

عرض صفحه رو چطور باید تنظیم کنم که همه جا یه جور باشه ؟

بعضی جا هایی که فکر میکردمو عرضون رو به درصد وارد کردم

می شه ایراد هارو دونه دونه بگید؟
  پاسخ
تشکر شده توسط :
#4
(۱۳۹۰ مرداد ۰۱, ۰۷:۵۴ ب.ظ)parsisport نوشته:
(۱۳۹۰ مرداد ۰۱, ۰۷:۴۹ ب.ظ)masoudmanson نوشته: فکر کنم مانیتورت از اون wide ها باشه؟ نه؟ Smile

چون وقتی من تو مانیتور ساده ی 4:3 ام نگاش کردم به هم ریخته بود.

اره مانیتورم وایده

عرض صفحه رو چطور باید تنظیم کنم که همه جا یه جور باشه ؟

بعضی جا هایی که فکر میکردمو عرضون رو به درصد وارد کردم

می شه ایراد هارو دونه دونه بگید؟
طبق باکس مدل به درصد بده،البته بعضی چیا حتما باید ثابت باشن مثل سایدبار،اونارو عرض قطعی باید بدی هرجاهم لازم شد برای سازگاری با هر مانیتوری درصد بذار.
درکل وابسته به بستره!

اللهم صل علی محمد و آل محمد و عجل فرجهم

افلاطون را گفتند چرا هرگز غمگین نمیشوی؟
گفت :دل برآنچه نمی ماند،نمی بندم.
  پاسخ
تشکر شده توسط : parsisport
#5
ببین یه عکس از مانیتورم میزارم خودت اشکالاشو پیدا کن.
اگه درست نشد با هم یه کاریش می کنیم. Heart

یادمه یه جا خوندم که بیشتر از ۶۰ درصد مانیتور های الان با عرض1024 پیکسل هستند. یعنی wide ها هنوز زیاد جا نیوفتادن. پس سعی کن عرض سایتت کمتر از 1024 px باشه تا به مشکل بر نخوری!Shy

[عکس: 776ah3xvvj3vv8c5655.png]
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط : parsisport
#6
دو تا باکس های طوسی رنگ وسط صفحه با هم فاصله دارن درحالی که توی مانیتور من کاملا جاشون مناسبه چطور درصدبدم که درست بشه

از radius استفاده کردم که انگار جستجو گر شما پشتیبانی نمی کنه

منو هم که در هم ریخته شده کلا جای عناصر مشکل داره
(۱۳۹۰ مرداد ۰۱, ۰۸:۰۱ ب.ظ)Goback نوشته:
(۱۳۹۰ مرداد ۰۱, ۰۷:۵۴ ب.ظ)parsisport نوشته:
(۱۳۹۰ مرداد ۰۱, ۰۷:۴۹ ب.ظ)masoudmanson نوشته: فکر کنم مانیتورت از اون wide ها باشه؟ نه؟ Smile

چون وقتی من تو مانیتور ساده ی 4:3 ام نگاش کردم به هم ریخته بود.

اره مانیتورم وایده

عرض صفحه رو چطور باید تنظیم کنم که همه جا یه جور باشه ؟

بعضی جا هایی که فکر میکردمو عرضون رو به درصد وارد کردم

می شه ایراد هارو دونه دونه بگید؟
طبق باکس مدل به درصد بده،البته بعضی چیا حتما باید ثابت باشن مثل سایدبار،اونارو عرض قطعی باید بدی هرجاهم لازم شد برای سازگاری با هر مانیتوری درصد بذار.
درکل وابسته به بستره!



طبق باکس مدل رو متوجه نشدم میشه توضیح بدید؟
  پاسخ
تشکر شده توسط :
#7
نقل قول:دو تا باکس های طوسی رنگ وسط صفحه با هم فاصله دارن درحالی که توی مانیتور من کاملا جاشون مناسبه چطور درصدبدم که درست بشه

از radius استفاده کردم که انگار جستجو گر شما پشتیبانی نمی کنه

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

لطف میکنی یه عکس از مانیتور خودت بزاری Blush
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط : parsisport
#8
(۱۳۹۰ مرداد ۰۱, ۰۸:۵۹ ب.ظ)masoudmanson نوشته:
نقل قول:دو تا باکس های طوسی رنگ وسط صفحه با هم فاصله دارن درحالی که توی مانیتور من کاملا جاشون مناسبه چطور درصدبدم که درست بشه

از radius استفاده کردم که انگار جستجو گر شما پشتیبانی نمی کنه

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

لطف میکنی یه عکس از مانیتور خودت بزاری Blush

چشم

درواقع من میخواستم دوستان یه نگاهی به کد های سی اس اس بندازن و به طرح و یه جمع بندی کنن ببینن آیا این کار با این نحوه طراحی خوبه؟ استاندارده؟
یا نه و این اندازه ها رو هم بهم بگین که چطور درصد بدم
مثلا وقتی من دو تا div دارم یکی در دیگری قرار میگیره وقتی به اون تگ درونی درصد بدم درصدش نسبت به اون تگ بیرونی حساب میشه یا نسبت به کل صفحه؟
درواقع من میخواستم دوستان یه نگاهی به کد های سی اس اس بندازن و به طرح و یه جمع بندی کنن ببینن آیا این کار با این نحوه طراحی خوبه؟ استاندارده؟
یا نه و این اندازه ها رو هم بهم بگین که چطور درصد بدم
مثلا وقتی من دو تا div دارم یکی در دیگری قرار میگیره وقتی به اون تگ درونی درصد بدم درصدش نسبت به اون تگ بیرونی حساب میشه یا نسبت به کل صفحه؟


فایل‌های پیوست تصاویر بندانگشتی
       
  پاسخ
تشکر شده توسط : masoudmanson
#9
نقل قول:مثلا وقتی من دو تا div دارم یکی در دیگری قرار میگیره وقتی به اون تگ درونی درصد بدم درصدش نسبت به اون تگ بیرونی حساب میشه یا نسبت به کل صفحه؟

درصد نسبت به div ی که توش قرار گرفته حساب میشه

من کداتو یه کوچولو تغییر دادم . الان تو screen من مشکلی نداره. تو wide screen هم تست کردم مشکلی نداشت.

این کد html Shy

کد پی‌اچ‌پی:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
link rel="stylesheet" type="text/css" href="style.css" />
    <
title>Untitled Document</title>
</
head>

<
body  bgcolor="#000000" >
    <
div class="site">
        <
p>&nbsp;</p>

        <
div class="header"></div>

        <
div class="center" >
            <
ul>
                <
li><class="menu" href="#" >صفحه اصلی</a></li>
                <
li><class="menu" href="#">اخبار</a></li>
                <
li><class="menu" href="#">درباره ما</a></li>
                <
li><class="menu" href="#">عضویت</a></li>
                <
li><class="menu" href="#">نمونه کارها</a></li>
                <
li><class="menu" href="#">ورود کاربران</a></li>
                <
li><class="menu" href="#">تماس با ما</a></li>
            </
ul>
        </
div>
        
        <
div class="news">
              <
div class="title">
                  <
p>اخبار</p>
              </
div>

              <
p>&nbsp;</p>
              <
p>&nbsp;</p>
              <
p>&nbsp;</p>
              <
p>&nbsp;</p>
        </
div>

        <
div class="content">
              <
p>&nbsp;</p>
              <
p>&nbsp;</p>
              <
p>&nbsp;</p>
              <
p>&nbsp;</p
              <
p>&nbsp;</p>
              <
p>&nbsp;</p
        </
div>
        <
div class="clear">&nbsp;</div>
        <
div class="footer">
              <
p>الان این سایت هم تو مانیتور 4:3 من درست نشون داده میشه و هم تو مانمیتور 16:9 شما</p>
              <
p>&nbsp;</p>
        </
div>
    </
div>
    <
p align="center" style="color:#FFFFFF">&copy;2011</p>
</
body>
</
html

این هم CSS Rolleyes

کد پی‌اچ‌پی:
@charset "utf-8";
/*----------------body---------------*/

.clear{
    
clearboth;
}
.
site{
    
height:auto
    
width:800px
    
background-color:#666; 
    
margin:0 auto;
    
border-radius:12px;
    
padding0px 0px 20px 0px;
}
.
title{
    
background-color:#FC0;
    
width:100%;
    
font-family:KamranJadidHoma;
    
font-size:20px;
    
text-align:center;
    
margin-top:-20px;
    
border-radius:4px;
}
.
news{
    
float:left;
    
margin:0 auto;
    
margin-top:10px;
    
margin-left:10px;
    
background:#CCC;
    
width:35%;
    
borderinset;
    
border-radius10px;
    
border-left:#960;
    
border-right:#960;
    
border-top:#960;
    
text-aligncenter;
    
}
.
content{
    
floatright;
    
margin:0 auto;
    
margin-top10px;
    
margin-right:10px;
    
width:60%;
    
background-color:#CCC;
    
border-radius:10px;
    
overflow:inherit;
}
/*-------------------------------------header--------------*/
.header{
    
background-color:#333;
    
margin:0 auto;
    
width:750px;
    
height350px;
    
background: -moz-linear-gradient#333, # 000 );
    
border-radius7px;
    
border-left:#CCC;
    
border:groove;
    
border-right:#CCC;
    
}
/*----menu-----*/

.center{
    
width:800px;
    
height:27.75pt;
    
margin:0 auto;
    
overflowinherit;   
}

ul{
    
margin-top:-10px;
    
margin-right:50px;
    }

li{
    
display:inline;
    
text-align:center
}

a.menu{
          
float:right;
          
width:60pt;
          
height:20pt;
          
text-decoration:none;
          
color:#F90;
          
background-color:#333;
          
padding:2pt 6pt;
          
border-right:1px solid white;
          
text-align:middle;
          
border-radius8px
}

a.menu:hover{
    
color:#000;
    
font:bold
    
background-color:#F90;
}
/*------------------footer------------------*/
.footer{
    
margin:0 auto;
    
width:750px;
    
background-color:#930;
    
height:auto;
    
border-radius:10px;
    
text-align:right;
    
padding-right:5px;
     



فایل‌های پیوست تصاویر بندانگشتی
   
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط : parsisport
#10
خیلی عالی بود مرسی مهم ترین چیزی که از کارت یاد گرفتم نظم در کد نویسی بود
اگر لطف کنی و بگی این چه کاری انجام میده ممنون میشم

clear:both

مرسی
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان