مشکل با Css

E

ErfanImmortal

New Member
سلام دوستان
دو تا خواسته دارم اگه بتونین راهنمایم کنین
میخوام پایین سایت یه دکمه بزارم واسه(رفتن به بالای سایت TOP) چطور میشه وقتی کاربر تا به سمت پایین حرکت کرد و اسکرول شروع به پایین اومدن کرد اون دکمه سمت راست پایین نمایش داده بشه؟
خودم این نظر رو دارم که یه لینک از اون عکس رو بزاریم که بینک به بالای سایت باشه اما تا وقتی بالای سایت هستیم display: none باشه اما وقتی تا پایین اومدیم display عوض بشه

سوال بعدیم اینه دارم یه هدر طراحی میکنم بالای سایت بزارم یه ایده ای شبیه همین سایت مجید آنلاین که قسمت جستجو سر جاش هست اما به محض پایین اومدم هدر سایتم هم با صفحه پایین بیاد
اگه میشه راهنماییم کنید این کد css هسا یا Java Script و چطور میشه داشته باشمش

ممنونم
 
3

3d mostafa

Member
سلام .
اول یه دیو با آیدی goToTop یا هر آیدی ای که خودت میخای درست کن البته توی این کد goToTop استفاده کردم . بعد توی اون div با تگ img یه عکس برای دکمه آدرس دهی کن . بعد کدی رو که نوشتم تو قسمت body بنویس . البته این کد با استفاده از جاوا اسکریپت و جی کئوریه . که باید کتابخانه ی جی کئوری رو هم قبلش تو قسمت head آرس دهی کرده باشی .
[JSS]<script>
// hide #goToTop first
$(document).ready(function(){
$("#goToTop").hide();
// fade in #goToTop
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 60) {
$('#goToTop').fadeIn();
} else {
$('#goToTop').fadeOut();
}
});});
$("#goToTop").click(function() {
$("body,html").animate({scrollTop:0},600);

});});
</script>[/JSS]

اون هدر روهم که گفتی با همین روش میتونی درست کنی البته اگه جاوا اسکریپت بلدی با یکم دستکاری کد بالا میتونی هدر رو هم خودت درست کنی .
 
E

ErfanImmortal

New Member
ممنونم یه دنیا ممنون که کارم رو راه انداختی
الان چکش میکنم
یه سوال دیگه دارم اینکه چندتا li ساختم هر کدومشون یه پلن هست واسه فروشگاه
کلا 8 تا li ساختم که واسه نمونه 4تاش رو تویه صفحه استفاده کردم به این شکل
123e.JPG
​

بعد ایکه jcarousel رو واسش استفاده کردم اینطوری فشرده شده
میخواستم ببینم کجای کد نویسیم مشکل داشته که این بلا سر اون پلن هام اومده
123Capture.JPG
​
 
3

3d mostafa

Member
خب من نمیدونم jcarouse چیه اما اگه کد css ت رو میدیدم بهتر میتونستم بگم مشکلت چیه ولی فک میکنم برای این li ها عرض کوچیکی تعریف کردی که اینجوری شدن . ولی اگه کدت رو بذاری بهتر میتونم بت بگم مشکل کجاست
 
E

ErfanImmortal

New Member
این cssش هست
[CPPS].PlansTop {
display:block;
width: 938px;
margin: 0 auto;
}
.PlansTop ul {
float:right;
margin-top:70px;
}
.PlansTop ul li {
float:right;

}
.PlansTop .Proj {
background-image:url('../img/plans.png');
background-repeat:no-repeat;
width:868px;
height:35px;
}
.PlansTop ul li {
margin-right:20px;
}
.PlansTop li.jcaro {
color:#F00;

}
.PlansBottom {
width: 938px;
margin: 0 auto;
}
.PlansBottom ul {
float:right;
margin-top:2px;
margin-bottom:100px;
position:relative;
}
.PlansBottom ul.jcaropic li {
float:right;
width:211px;
height:28px;

width:223px;
}
.PlansBottom ul.jcaropic li.Plan {
color: #727A7E;
font: 13px/18px "Droid Sans",Arial,Geneva,Helvetica,sans-serif;
margin-right:9px;
position:relative;
}
.PlansBottom ul.jcaropic li.Plan h2 {font:100 24px/36px "Oxygen", Arial, Geneva, Helvetica, sans-serif;}
.PlansBottom ul.jcaropic li.Plan .pricingtable {
text-align:center;
margin-top:11px;
position:relative;
overflow:hidden;
border-top:1px solid #e8e8e8;
border-bottom:1px solid #e8e8e8;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.pricingtable .currency {
font-family:"Oxygen", Arial, Geneva, Helvetica, sans-serif;
font-size:42px;
line-height:42px;
color:#ffffff;
display:inline-block;
vertical-align:top;
margin-right:-4px;
}

.pricingtable .price {
font-family:"Oxygen", Arial, Geneva, Helvetica, sans-serif;
font-size:42px;
line-height:42px;
color:#ffffff;
display:inline-block;
vertical-align:top;
margin-right:-4px;
}

.pricingtable .coins {
font-family:"Oxygen", Arial, Geneva, Helvetica, sans-serif;
font-size:42px;
line-height:42px;
color:#ffffff;
display:inline-block;
vertical-align:top;
}

.PlansBottom ul.jcaropic li.Plan a {
cursor: pointer;
outline: medium none;
text-decoration: none;
transition: color 0.3s ease-out 0s;
}

.pricingtable .period {
font-family:"Oxygen", Arial, Geneva, Helvetica, sans-serif;
color:#ffffff;
font-size:14px;
display:block;
padding:3px 0 2px;
}

.pricingtable .cmsms_price {
overflow:hidden;
padding:0px 2px 1px 9px;
background:url(../img/pricingtable_bg.png) top right no-repeat;
text-align:left;
}
.pricingtable .title {
margin:0;
padding:0px 0px 0px;
border-right:1px solid #e8e8e8;
border-left:1px solid #e8e8e8;
line-height:24px;
font-family:"Oxygen", Arial, Geneva, Helvetica, sans-serif;
}
.pricingtable .but {
padding:18px 5px;
text-align:center;
border-right:1px solid #e8e8e8;
border-left:1px solid #e8e8e8;
}
.pricingtable .but .button {
color: #FFFFFF;
text-align: center;
text-transform:uppercase;
min-width:90px;
}
.pricingtable .but .button:hover {
color:#727A7E;
background-color:#F8F8F8 !important;
}
.pricingtable ul {
margin:0;
list-style:none;
}

.pricingtable ul li {
border-right:1px solid #e8e8e8;
border-left:1px solid #e8e8e8;
position:relative;
padding:9px 5px 7px;
margin:0 auto;
width:100%;
border-bottom:1px solid #e8e8e8;
}

.pricingtable ul li:first-child:before {
display:none;
content:none;
}

[/CPPS]


​
و این هم Html

[HTMLS] <div class="PlansBottom">
<ul class="jcaropic">
<li class="Plan">
<div class="pricingtable">
<h2 class="title">Standard</h2>
<div class="cmsms_price" style="background-color:#33bee5;">
<span class="currency">$</span>
<span class="price">19</span>
<span class="coins">.99</span>
<span class="period">Per month</span>
</div>
<ul>
<li>5 Projects</li>
<li>5 Gb Storage</li>
<li>Unlimited Users</li>
<li>10 GB Bandwith</li>
<li>Enhanced Security</li>
</ul>
<div class="but">
<a href="#" class="button" style="background-color:#33bee5;"><span>sing Up!</span></a>
</div>
</div>
</li>
<li class="Plan">
<div class="pricingtable">
<h2 class="title">Extra</h2>
<div class="cmsms_price" style="background-color:#fabe09;">
<span class="currency">$</span>
<span class="price">29</span>
<span class="coins">.99</span>
<span class="period">Per month</span>
</div>
<ul>
<li>5 Projects</li>
<li>5 Gb Storage</li>
<li>Unlimited Users</li>
<li>10 GB Bandwith</li>
<li>Enhanced Security</li>
</ul>
<div class="but">
<a href="#" class="button" style="background-color:#fabe09;"><span>sing Up!</span></a>
</div>
</div>
</li>
<li class="Plan">
<div class="pricingtable">
<h2 class="title">Super</h2>
<div class="cmsms_price" style="background-color:#6cc437;">
<span class="currency">$</span>
<span class="price">39</span>
<span class="coins">.59</span>
<span class="period">Per month</span>
</div>
<ul>
<li>5 Projects</li>
<li>5 Gb Storage</li>
<li>Unlimited Users</li>
<li>10 GB Bandwith</li>
<li>Enhanced Security</li>
</ul>
<div class="but">
<a href="#" class="button" style="background-color:#6cc437;"><span>sing Up!</span></a>
</div>
</div>
</li>
<li class="Plan">
<div class="pricingtable">
<h2 class="title">Great</h2>
<div class="cmsms_price" style="background-color:#f97a14;">
<span class="currency">$</span>
<span class="price">59</span>
<span class="coins">.29</span>
<span class="period">Per month</span>
</div>
<ul>
<li>10 Projects</li>
<li>10 Gb Storage</li>
<li>Unlimited Users</li>
<li>100 GB Bandwith</li>
<li>Enhanced Security</li>
</ul>
<div class="but">
<a href="#" class="button" style="background-color:#f97a14;"><span>sing Up!</span></a>
</div>
</div>
</li>
</ul>
</div>
<!---Contain Plans End--->[/HTMLS]
​
 
E

ErfanImmortal

New Member
مشکلم حل شد تویه قسمت بالا

اما مشکلی دیگه دارم هنوز
این منویی که تویه هدرم هست و میخوام موقعی صفحه پایین بیاد این باهاش پایین بیاد با این کد تونستم بیارم پایین
[JSS]

<script> // hide #goToTop first $(document).ready(function(){ $("#goToTop").hide(); // fade in #goToTop $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 60) { $('#goToTop').fadeIn(); } else { $('#goToTop').fadeOut(); } });}); $("#goToTop").click(function() { $("body,html").animate({scrollTop:0},600); });}); </script>​
[/JSS]

اما مشکلم با جایی هست که پایین میاد
آخه موقع پایین اومدنش تویه css میگم position ش باید fixed باشه
وقتی این رو هم انتخاب میکنم نمی تونم دقیقا جایی بزارمش که منوی اصلیم هست
الن موقعی که صفحه لود میشه اون منو سر جاش نمایشد داده میشه
پایین که میام سریع میپره یه موقعیت پرت!با px هم بهش مکان دادم درست شد اما تویه رزولوشن های متفاوت بازم جابجاییش متناسب نیست
اگه میشه کمکم کنین ممنون میشم
 
3

3d mostafa

Member
آقا مشکل بالات که پست گذاشتی برام میل نیومد منم دیگه نگا نکردم ببینم جواب دادی یا نه !!!
الانم که میگی مشکلت حل شد منم دیگه کدا رو نگا نکردم :)
در مورد این جدیده کل اون منو رو تو یه دیو بذار من اسم ID دیو رو گذاشتم azad حالا تو هرچی دوس داری بذار فقط تو کدا اسم رو متناسب با اسمی که میذاری عوض کن .
فرض کن این دیو رو درست کردی و منو رو گذاشتی تو این دیو
[HTMLS]

<div id="azad" >
<!-- بقیه کد های منو -->
</div>
[/HTMLS]

این کد css برای این دیو بنویس . البته عرضو ارتفاعشو متناسب با عرضو ارتفاع منوی خودت تنظیم کن من اینو فرضی گذاشتم . البته میتونی ارتفاع هم تعیین نکنی یا auto بذاری . ولی عرضو تعیین کن
[CSSS]
#azad {
width:1200px;
height:200px;
clear:both;
}
[/CSSS]

اگه نیاز بود میتونی clear:both رو حذف کنی . اما فک کنم لازمه !!

این کد جاوا اسکریپتم تو قسمت body بنویس . البته من عددایی که گذاشتم بر اساس تست خودم بود . خودت متناسب با منوی خودت که کجا باید از قیدو بند آزاد شه این عدد 267 رو تغییر بده .
[JSS]
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>267) {
$('#azad').css({'position':'fixed',top:"0px"});
}
if ($(this).scrollTop()<267) {
$('#azad').css({'position':'static'});
}
})

</script>
[/JSS]

​
 
آخرین ویرایش:
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا