رفتن به مطلب

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


پست های پیشنهاد شده

سلام

یه منوی عمودی به سایدبار سمت چپ قالب اضافه کردم اما مشکلی که هست اینه که وقتی صفحه تموم میشه این منو نمیتونه صفحه رو ادامه بده و قطع میشه!!

نمیدونم چجوری بگم پس عکس میذارم عکس رو ببینید :

post-3610-0-32670500-1446805339_thumb.jp

منو هم یه ul و li ساده هستش با یه سری کد استایل

همچین مشکلی بخاطر چی پیش میاد؟

آیا مربوط به کدهای استایله یا کدهای html؟

لینک به ارسال

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

لینک به ارسال

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

این کدهای استایلشه :


#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 250px;
z-index: 10;
align: center;
text-align: left;
padding-right: 2px;
}
#cssmenu ul {
border: 1px solid #cccccc;
border-radius: 5px;
background: #ffffff;
background: -moz-linear-gradient(bottom, #f0f0f0, #ffffff);
background: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff);
background: -o-linear-gradient(bottom, #f0f0f0, #ffffff);
background: -ms-linear-gradient(bottom, #f0f0f0, #ffffff);
background: linear-gradient(to top, #f0f0f0, #ffffff);
}
#cssmenu ul li {
display: block;
border-bottom: 1px solid #cccccc;
}
#cssmenu ul li.active {
border-bottom: 0;
}
#cssmenu ul li:last-child {
border-bottom: 0;
}
#cssmenu ul li a {
display: block;
padding: 14px 12px;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #444444;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#cssmenu ul li a:hover {
display: block;
padding: 14px 12px;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #ecf0f1;
background-color: #ce4c4a;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#cssmenu ul li.active {
left: -8px;
width: 255px;
padding: 2px;
background: #ce4c4a;
background: -moz-linear-gradient(bottom, #c43735, #d56462);
background: -webkit-linear-gradient(bottom, #c43735, #d56462);
background: -o-linear-gradient(bottom, #c43735, #d56462);
background: -ms-linear-gradient(bottom, #c43735, #d56462);
background: linear-gradient(to top, #c43735, #d56462);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
padding-left: 10px;
}
#cssmenu ul li.active > a {
padding: 12px 12px 12px 16px;
border-left: 1px dashed #de8886;
border-top: 1px dashed #de8886;
border-bottom: 1px dashed #de8886;
color: #ffffff;
text-shadow: 0 1px 1px #8c2726;
}
#cssmenu ul li.active:after {
position: absolute;
right: -16px;
top: 7px;
width: 31.526911934581186px;
height: 31.526911934581186px;
background: #ce4c4a;
background: -moz-linear-gradient(-45deg, #c43735, #d56462);
background: -webkit-linear-gradient(-45deg, #c43735, #d56462);
background: -o-linear-gradient(-45deg, #c43735, #d56462);
background: -ms-linear-gradient(-45deg, #c43735, #d56462);
background: linear-gradient(-45deg, #c43735, #d56462);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
}
#cssmenu ul li.active:before {
position: absolute;
right: -12px;
top: 9px;
z-index: 10;
width: 28.526911934581186px;
height: 28.526911934581186px;
border-right: 1px dashed #e9afae;
border-top: 1px dashed #e9afae;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
padding-left: 30px;
}
#cssmenu ul li.active a:after {
position: absolute;
bottom: -7px;
left: -11px;
z-index: -1;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 8px solid transparent;
border-right: 8px solid #982b29;
content: "";
}

خیلی قبلا این استایلشو تغییر دادم منتها بخاطر اینکه کدنویسیم در حد مبتدیه نتونستم مشکلو حل کنم :D

امکانش هست یه کمکی در این مورد بکنید؟

لینک به ارسال

چی شد؟ :|

یعنی واقعا منتظر بودید من تمام کدهای استایلتون رو بخونم و اصلاح کنم؟

مشکلش رو عرض کردم پیدا کردن و اصلاحش رو خودتون زحمتش رو باید بکشید

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...