• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
رفع مشکل منو
#1
من میخوام این منو داخل این تگ طوسی رنگ قرار بگیره اما از این تگ میزنه بیرون

بنظر شما مشگلش کجاست؟

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

/*--------------------------body-------------------------*/
.clear{
    
clear:both;
}
.
center{
    
float:right;
    
width:800px;
    
overflow:inherit;
    
margin:0 auto;
}
.
site{
    
height:auto;
    
width:800px;
    
background-image:url(img/7245ad0605b84683b7ea29ed8f201d90.jpg);
    
margin:0 auto;
    
overflow:inherit;
            
}
/*--------------------------header-----------------------*/
/*-----------------------menu1--------------*/
ul {
    
margin-top:-10px;
    
margin-right:50px;
    }
li{
    
display:inline;
    
text-align:center;
}
a.menu{
    
float:right;
    
width:70pt;
    
color:#FFF;
    
text-decoration:none;
    
background-color:#000;
    
padding:2 0;
    
border-right:1px solid #000;
    
text-align:middle;
    
line-height:20pt;
    
border-radius:3px;
}
a.menu:hover{
             
color:#000 ;
             
fontIPT.JadidIPT.NazaninIPT.Titr ;
             
             
background#CCC;
    
}
/*---------------menu2------------------------*/
.center2{
    
height:40pt;
    
line-height:20pt;
    
color:#CCC;
    
background-color:#CCC;
    
float:right;
    
width:800px;
    
overflow:inherit;
    
margin:0 auto;
}
ul{
    
margin-top:-10px;
    
margin-right:0px;
}
li{display:inline;
   
text-align:center;
}
a.menu2{
    
float:right;
    
color:#000;
    
background:#CCC;
    
width:70pt;
    
text-decoration:none;
    
border-radius:3px;
    
text-align:middle;
    
line-height:20pt;
    
border-right:#FFF;
}
a.menu2:hover{
         
color:#FFF;
         
background-color:#000;
             
}
/*--------------------------footer-----------------------*/ 


اینم کد صفحه


کد پی‌اچ‌پی:
<!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="#333333">
<
div class="site">
  <
div class="center">
<
ul>
             <
li><a href="#" class="menu">صفحه اصلی</a></li>
             <
li><a href="#" class="menu">ثبت نام</a></li>
             <
li><a href="#" class="menu">گالری</a></li>
             <
li><a href="#" class="menu">اخبار</a></li>
             <
li><a href="#" class="menu">درباره ما</a></li>
             <
li><a href="#" class="menu">تنظیمات کاربری</a></li>
             <
li><a href="#" class="menu">تماس با ما</a></li>
    </
ul>
 </
div>
              <
p>&nbsp</p>
              <
p>&nbsp;</p>
              <
p>&nbsp;</p>
              <
p>&nbsp;</p>
              <
p>&nbsp;</p>
              
              
<
div class="center2">
                    <
p>&nbsp</p>
               <
ul>
               <
li><a  href="#"class="menu2">ارسال خبر</a></li>
               <
li><a href="#"class="menu2">گالری تصاویر</a></li>
               <
li><a href="#"class="menu2">شاخه های اخبار</a></li>
               <
li><a href="#"class="menu2">تبادل لینک</a></li>
               </
ul>
               
  
  
  </
div>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>
 
 
     








</
div>
</
body>
</
html


درست شد
margin و کم کردم درست شد
درست شد
margin و کم کردم درست شد
  پاسخ
تشکر شده توسط :
#2
مشکل اینجاست که وقتی از float استفاده می کنید مقداری که بهش میدید اگر برابر مقدار float دیگه ای باشه دومی تغییری که می کنه بر اساس تغییرات float اولی هست. اگر نیاز شد که دو float مقدار برابری داشته باشند پس باید position رو به حالت relative تغییر بدید بعد با جهات چهارگانه کار کنید. مثل زیر در سورس صفحه خودتون:
کد:
<div class="center2">
                    <p>&nbsp</p>
               <ul style="position: relative; bottom: 20px;">
               <li><a  href="#"class="menu2">ارسال خبر</a></li>
               <li><a href="#"class="menu2">گالری تصاویر</a></li>
               <li><a href="#"class="menu2">شاخه های اخبار</a></li>
               <li><a href="#"class="menu2">تبادل لینک</a></li>
               </ul>
              
  
  
  </div>
مطمئناً از css و مباحث مربوط به اون اطلاع زیادی ندارید. این رو از طرز استایل نویسیتون فهمیدم. اگر دور اشتباهات دیگتون خط بکشم ، مشکلتون با استایل زیر هم حل میشه اگر نخواید از روش بالا استفاده کنید (استایل نویسی شما غلطه وگرنه روش بالا برای تنظیم موقعیت درست نیست)
کد:
@charset "utf-8";
/* CSS Document */

/*--------------------------body-------------------------*/
.clear{
    clear:both;
}
.center{
    float:right;
    width:800px;
    overflow:inherit;
    margin:0 auto;
}
.site{
    height:auto;
    width:800px;
    background-image:url(img/7245ad0605b84683b7ea29ed8f201d90.jpg);
    margin:0 auto;
    overflow:inherit;
            
}
/*--------------------------header-----------------------*/
/*-----------------------menu1--------------*/
ul {
    margin-top:-10px;
    margin-right:50px;
    }
li{
    display:inline;
    text-align:center;
}
a.menu{
    float:right;
    width:70pt;
    color:#FFF;
    text-decoration:none;
    background-color:#000;
    padding:2 0;
    border-right:1px solid #000;
    text-align:middle;
    line-height:20pt;
    border-radius:3px;
}
a.menu:hover{
             color:#000 ;
             font: IPT.Jadid, IPT.Nazanin, IPT.Titr ;
            
             background: #CCC;
    
}
/*---------------menu2------------------------*/
.center2{
    height:40pt;
    line-height:20pt;
    color:#CCC;
    background-color:#CCC;
    width:800px;
    overflow:inherit;
    margin:0 auto;
}
ul{
    margin-top:-10px;
    margin-right:0px;
}
li{display:inline;
   text-align:center;
}
a.menu2{
    float:right;
    color:#000;
    background:#CCC;
    width:70pt;
    text-decoration:none;
    border-radius:3px;
    text-align:middle;
    line-height:20pt;
    border-right:#FFF;
}
a.menu2:hover{
         color:#FFF;
         background-color:#000;
            
}
/*--------------------------footer-----------------------*/


توجه کنید: در استایل بالا فقط float: right رو از کلاس center2 حذف کردم.
غایب
  پاسخ
تشکر شده توسط : masoudmanson parsisport
#3
نقل قول:مطمئناً از css و مباحث مربوط به اون اطلاع زیادی ندارید.

علی رضا جان. منبع خوب برای CSS سراغ داری که بخونیم. من خودم که کارم زیاد تعریف نداره. یعنی اصولی نیس Confused
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط : parsisport
#4
بهترین منبع سال: اینور اونور Tongue
اول بهتره به اینجا مراجعه کنی و در کنارش از این هم استفاده کنی. بعدش که تونستی سلکتور های اصلی رو درک کنی اونوقت باید بیشتر جستجو و تمرین کنی. css3.info هم مناسبه. فایل pdf که پائل در همین انجمن هم گذاشته بود رو دانلود کن. در مورد تغییرات اصلی css3 هست.
غایب
  پاسخ
تشکر شده توسط : masoudmanson parsisport
#5
این کاری که نوشتم دومین کار من با css هست Big Grin

اگر اطلاعاتم کافی بود که اینجا سوال نمی کردمBig Grin

الانم اگر دارم طرحی رو پیاده میکنم واسه اینه که بصورت عملی یاد بگیرم به همین دلیل مزاحم شما میشم


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

اینجا هستم برای یادگیری لطفا ایرادها ی منو بگید و بگید چطور کلاس تعریف کنم که درست باشه
  پاسخ
تشکر شده توسط :
#6
انجمن برای پرسیدن راه اندازی شده دیگه. همه ما هم اینجاییم که اطلاعاتمون به اشتراک بگذاریم ...
اول از همه بهتره خودت رو کدت کار کنی بعد اگر متوجه نشدی جستجو کنی بعدش اگر متوجه چیزی نشدی حتماً در انجمنی مطرح کن.
یه سری هم به اینجا بزن.
مشکلات استایل نویسی
charset رو بهتره در خود HTML در متا تگ http-equiv به صورت زیر تعریف کنی:
کد:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
تا اونجا که امکان داره از float استفاده نکن. مگر برای کنار هم قرار دادن تصاویر یا جدا کردن یک یا دو (نه بیشتر) تگ از direction اصلی یا تنظیم شده.
از overflow برای scroll اغلب استفاده میشه. اخیراً (نه جدیداً) متوجه شدند که بجای اینکه از clear برای حذف float ها استفاده کنیم میشه از overflow هم استفاده کرد. شما به این منظور هم میتونی ازش استفاده کنی
مقادیری که هر پراپرتی میگیره رو به ذهن بسپار. مثلاً margin یا میتونه inherit بگیره یا auto یا مقدار دلخواه که اگر یک مقدار قرار بدی برای هر چهار جهت استفاده میشه و اگر چهار تا بدی هر جهت مقدار خودش رو داره. به کد زیر نگاه کن:
کد:
margin: 0px auto; /*ghalate*/
margin: 2px; /*baraye top left bottom right 2px hast*/
margin: 0px 1px 2px 3px; /*be tartib baraye top right bottom left*/
بهتره آدرس هارو در بین دو تا سینگل کوتیشن ('') قرار بدی
کامنت گذاری بصورت زیر که تو استفاده کردی کاملاً غلطه
کد:
/*--------------------------header-----------------------*/
درستش میشه این:
کد:
/*[START]: HEADER*/
منظورم اینه که نیازی نیست کلی کاراکتر اضافه بنویسی. چیزی بنویس که بهتر معلوم بشه ولی کاراکتر کمتر داشته باشه بهتره
من موندم چرا دو تا سلکتور شبیه نوشتی؟ دو تا سلکتور ul و li چرا؟ یکیش کفایت می کرد.
معمولاً تنظیم پیشفرض سلکتور های از پیش تعریف شده یا بهتر بگم نام تگ های HTML در css رو زمانی تغییر میدیم که بدونیم برای هر مثلاً ul استفاده میشه. فرضاً همه متونی که بین تگ ul قرار دارن باید سایه سفید داشته باشن. پس می نویسیم:
کد:
ul {
text-shadow: 0px 1px 3px white;
}
چرا اول اومدی کلاس رو به تگ a دادی بعد اومدی مدلش رو نوشتی؟ یعنی اینطوری نوشتی a.menu2:hover در صورتی باید بشه a:hover.menu2
اشتباه نکن. رنگ ها 6 حرف دارن نه بیشتر و نه کمتر. سفید میشه #ffffff نه #fff !

HTML نویسیت:
بدترین اشتباهت اینه که از HTML5 استفاده نکردی!
از نوشتن فواصل اضافی جلوگیری کن:
کد:
href="style.css ">
بعد از css یک فاصله وجود داره.
بجای اینکه از خصیصه bgcolor در تگ body استفاده کنی ، اون رو در استایلت بنویس به صورت زیر:
کد:
body {
background-color: red; /*rang haye shenakhte shode mesle red*/
/*green - white - black va ... ro mishe ba horoof nevesht*/
}
اگر درست استایلت رو با HTML تنظیم کنی نیازی به درست کردن فاصله های اضافی مثل زیر نیست:
کد:
<p>&nbsp;</p>
برای اینکه جای استفاده از خصیصه class و id رو بفهمی به شماره 74 در همون لینکی که در اول دادم مراجعه کن.

این تمام ایراداتی هست که شما در یک تکه کد بالا داشتید. اگر بیشتر تمرین کنید حتماً حفظ می کنید و در خاطرتون می مونه که درست بنویسید.
غایب
  پاسخ
تشکر شده توسط : parsisport
#7
اگر از float استفاده نکنم از چی استفاده کنم ؟

margin? یا چیزه دیگه ای ؟
اگه میشه در این مورد راهنمائیم کنید
وقتی یک شیء قراره سمت چپ تصویر باشه یا با دستکاری فواصل این کار باید انجام شه یا margin
اشتباه می گم؟
  پاسخ
تشکر شده توسط :
#8
یه چیزی بگم شاید باور نکنی ولی منم اول css همین بخش float ها و margin ها ... رو گیج میزدم. ولی یه شب نشستم یه پوسته خوشگل تو فتوشاپ طراحی کردم و دونه دونه همه رو با css نوشتم تا دستم راه افتاد و همون شب همه چیرو متوجه شدم. پیشنهاد من به تو اینه که خود تو هم مثل من عمل کنی. در کل هرچیزی رو بخوای یاد بگیری با یه تمرین یاد میگیری مگر خودت نخوای یا تنبل باشی.

float برای اینه که شیء هایی رو در کنار هم قرار بدی. یا بخوای بجای اینکه از فواصل زیاد استفاده کنی تا اون رو ببری به سمت دیگه ، از float استفاده می کنی و می بری سمت دیگه و با یک فاصله کوچکتر میشه همونی که میخوای.

margin خود شیء رو حرکت میده و هرچی که توشه.

padding محتوای اون شیء رو حرکت میده که قطعاً روی خود شیء هم تأثیر میگذاره.

نقل قول:وقتی یک شیء قراره سمت چپ تصویر باشه یا با دستکاری فواصل این کار باید انجام شه یا margin
به ظاهر درسته ولی تو کار اشتباه از آب در میاد. چون اگر از margin استفاده کن ولی محدوده مشخص و ثابتی رو براش تعیین نکنی ، با بزرگ و کوچیک شدن پنجره اون شیء به اینور و اونور میره.
یه توصیه دارم برات ، همیشه یک محدوده رو مشخص کن بعد محتواش رو بریز توش. فرض کن یک هدر داری (محدوده اول) بعد سمت چپ منو ها هستند که داخل هدر هستند و مرتبط با اونن (محدوده دوم) و یک عکسی هم داری که سمت راست قرار میگیره (میتونه محدوده داشته باشه و میتونه نداشته باشه چون داخل محدوده اول هست از خواص اون پیروی می کنه و البته چون ثابت هست و تغییر نمی کنه خودش مورد نداره ولی اگر منوی دیگه ای سمت راست باشه اون حتماً محدوده میخواد.)
نمونه ساده برات می نویسم تا منظورم رو بهتر متوجه بشی:
کد:
<!--HEADER-->
<div>
<!--menu ha-->
<div>
<!--mohtaviate menu-->
</div>
<!--logo-->
<img src="" />
</div>
غایب
  پاسخ
تشکر شده توسط : parsisport
#9
(۱۳۹۰ مرداد ۰۴, ۰۳:۳۳ ق.ظ)cyletech نوشته: مقادیری که هر پراپرتی میگیره رو به ذهن بسپار. مثلاً margin یا میتونه inherit بگیره یا auto یا مقدار دلخواه که اگر یک مقدار قرار بدی برای هر چهار جهت استفاده میشه و اگر چهار تا بدی هر جهت مقدار خودش رو داره. به کد زیر نگاه کن:
کد:
margin: 0px auto; /*ghalate*/
margin: 2px; /*baraye top left bottom right 2px hast*/
margin: 0px 1px 2px 3px; /*be tartib baraye top right bottom left*/
داداشی Heart من با اون قسمتش که گفتی
نقل قول:
کد:
margin:0px auto;
غلطه یه کوچولو مشکل دارم. Confused
وقتی میگی
کد:
margin:0 auto;
یعنی margin از بالا و پایین 0px و از چپ و راست auto هستش. پس وسط میوفته و میتونی به جای 0 هر marginی که برای بالا و پایینش می خوایی بزاری.
کد زیرو امتحان کن:
کد پی‌اچ‌پی:
<html>
<
body>
    <
div style="width:200px; background-color:#000000; margin:0 auto;">
        <
p>&nbsp;</p>
        <
p>&nbsp;</p>        
    <
div>
</
body>
</
html

حالا به جای 0 تو margin یه عدد دیگه مثلا 100 بذار ببین چی میشه! Exclamation
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط :
#10
نقل قول:یه کوچولو مشکل دارم.
به لینک زیر برو
http://www.w3schools.com/css/css_margin.asp
margin دقیق می تونه 3 تا مقدار بگیره. auto % و طول که با px اغلب مشخص میشه.
مقدار auto خاص هست که یکدونه میتونه قرار بگیره. تو این رو چک کن:
کد:
margin: auto auto auto auto
چه فرقی با :
کد:
margin: auto;
داره؟
بازم میگم auto یک مقدار خاص هست که میتونه یکبار تنها تکرار بشه. وقتی میخوای از auto استفاده کنی که شیء ات بیاد وسط باید اینطوری بنویسی:
کد:
margin-left: auto;
margin-right: auto;
البته این یک روش برای وسط قرار دادنه که همه چی به وضعیت والدش و خودش بستگی داره. اگر اینطور که شما میگی بود دیگه چه نیازی بود margin-left و right و اینا جداگانه ایجاد بشن؟
غایب
  پاسخ
تشکر شده توسط :


پرش به انجمن:


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