вопрос
Уважаемые верстальщики, помогите пожалуйста разобраться с адаптивностью шаблона. На всех разрешениях нормально выводится а на 1280х1024 сайтбар в самом низу и верхнее меню криво показывается(((( Не могу разобраться в этих соотношениях(((
@media screen and (min-width: 1300px) {#photomod:nth-child(3n) {margin-right: 0;}}
@media screen and (max-width: 1285px) and (min-width: 1020px){
#maincont, .headline, #header, #headmenu, .footline, .fbgtop {width: 1000px;}
.breadcrumb {width:710px;}
#content, #boarditem, .boardid, .allcont, .fullstory img, #firstinf, .fipic, .fipic img, #lascom, #news, #indextabs, .intabs, #lastphotos { width: 750px;}
#firstinf span, .intabs_cont {width:710px;}
#sidebar-r{width: 100%;}
.right-block {width:100%;float: left;margin-right: 15px;}
.right-block:nth-child(2n) {margin-right:0}
#sidebar-ltabs {width: 90%;}
.bcontpoll {width:99.4%;padding-bottom: 20px;}
.tntitle, .btitle, .btitlemenu, .catsTable, .btitlepoll {width:100%;}
.btitlepoll { background-position: center 28px;}
.todaynews {width:92%;}
.tnews { width: 99%;}
.bcontpoll .pollBut, .bcontpoll .pollButblue {width:50%; float:left}
#secinf, .secpic, .secpic img, #thirdinf, .thirdpic, .thirdpic img, #fourthinf, .fourthpic, .fourthpic img{ width: 249px;}
#secinf span, #fourthinf span, #thirdinf span{width: 209px; }
#headmenu ul li a {padding: 0 15px;font-size: 16px;}
.fblock {width: 303px;}
.searchForm {width: 300px;margin-left:20px;}
.schQuery input { width: 240px !important;}
.logout a {width:130px;}
.logo{background-size: 220px;}
.relatednews, .relatednews img, .relatednews .adsinftext, .relatednews .adsinfpic {width:139px !important;}
#photomod, .pmpic, .pmpic img {width:236px;}
.pmtext {width:233px;}
.lastnews, .ln {width: 490px;}
.wln a { width:445px;}
.alladsindex {width: 681px;}
.adsinf, .adsinfpic, .adsinfpic img, .adsinftext {width: 166.2px;}
.lastphotospic, .lastphotospic img, .lastphotospic img:hover {width: 172.5px;}
#photomod:nth-child(3n) {margin-right: 0;}
.nncont, .ninfo {width: 500px;}
}
@media screen and (max-width: 1020px){
#maincont, .headline, #header, #headmenu, .footline, .fbgtop {width: 800px;}
.breadcrumb {width:550px;}
#content, #boarditem, .boardid, .allcont, .fullstory img, #firstinf, .fipic, .fipic img, #lascom, #news { width: 550px;}
#firstinf span, #indextabs {width:510px;}
#sidebar-r, .lastnews, .ln, .intabs, #lastphotos, .ntitle{width: 100%;}
.boardtitle {width:100%;}
.right-block {width:80%;margin-top:0;}
.right-block:nth-child(2n) {margin-right:0}
#sidebar-ltabs {width: 93%;}
.todaynews {width:94%;}
.tntitle, .btitle, .btitlemenu, .catsTable, .btitlepoll, .lasttopnews {width:100%;}
.btitlepoll { background-position: center 28px;}
.bcontpoll {width:99.4%;padding-bottom: 20px;}
.tnews { width: 99%;}
.bcontpoll .pollBut, .bcontpoll .pollButblue {width:50%; float:left}
#secinf, .secpic, .secpic img, #thirdinf, .thirdpic, .thirdpic img, #fourthinf, .fourthpic, .fourthpic img{ width: 182px;}
#secinf span, #fourthinf span, #thirdinf span{width: 142px; }
.secpic {height:120px;}
.secpic img { min-height: 120px;max-height: 120px;}
#thirdinf span, #secinf span, #fourthinf span { margin-top: -120px;height: 110px;padding-top:10px;}
#firstinf, .fipic {height:310px;}
.fipic img {min-height:310px;}
#firstinf span {margin-top:-310px;padding-top:164px;}
#thirdinf span a, #secinf span a, #fourthinf span a { height: 40px;overflow: hidden;display: block;}
#headmenu ul li a {padding: 0 15px;font-size: 16px;}
.fblock {width: 303px;}
.searchForm {width: 200px;margin-left:2px;}
.schQuery input { width: 140px !important;}
.logout a {width:120px;margin-right:0;}
.profile a {width:160px; background: #478ec1; padding-right: 15px;padding-left: 10px;}
.profile a:hover {background: #5a9ac7;}
.profile-logged a{margin-right:0;}
.logo{background-size: 200px;}
.relatednews, .relatednews img, .relatednews .adsinftext, .relatednews .adsinfpic {width:139px !important;}
#photomod, .pmpic, .pmpic img {width:265px;}
.pmtext {width:233px;}
.lasttopnews { border-top: 1px solid #f2f2f2; margin-top:10px; }
.lasttopnews span {margin-top: 20px; width: 92.5%;}
.wln a { width:505px;}
.ltn {float:left;border-bottom:0;}
.ltn, .ltnpic, .ltnpic img {width:143px;}
.ltnpic {height:90px;}
.intabs_cont {width: 507px;}
.alladsindex {width:470px; }
.adsinf, .adsinfpic, .adsinfpic img, .adsinftext {width: 246px;}
.adsinf:nth-child(2n) {margin-right:0;}
.lastphotospic:nth-child(4n-1) {margin-right:0;}
.adsinfpic {height: 156px;}
.rur { margin-bottom: 20px;}
.adsinftext {height:54px;}
.lastphotospic, .lastphotospic img, .lastphotospic img:hover {width:265px;}
.lastphotospic img, .lastphotospic img:hover {min-height:170px;}
.lastphotospic {height:170px; margin-bottom: 20px;}
.fblock:nth-child(1) {width:100%; }
.fblock {width:50%;margin:10px 0 10px 0;}
.btitle-l { height: 45px;line-height: 45px; font-size: 16px;}
#sidebar-l ul.uMenuRoot li, #sidebar-l ul.uMenuRoot li a {height: 40px;line-height: 40px;}
.nav_btn {display: block;}
.homelink {display:none;}
#headmenu {height:50px;}
.headmenu ul.main_nav { position: absolute; width:800px; height: auto; z-index: 9999;display: none;}
#headmenu ul li a {line-height:40px !important;}
.headmenu li, .headmenu li a { float: none;height: auto !important;}
.headmenu ul li ul, .headmenu li a:hover{background:#66983A !important;}
.headmenu li li a { padding: 2px 25px 0 25px !important;}
#headmenu ul li ul li a:hover { background: #73a845 !important;}
.headmenu li { float: left; position: relative;display: block;width: 100%; height: 40px;border-top: 1px solid #90c067;z-index: 100;}
.headmenu li ul {display: block !important; position: relative!important;height:auto;left: auto;}
li.uWithSubmenu a:after {font-family:FontAwesome;content:"\f0d7";font-size: 14px;display: block;position: absolute; top: 0px;right: 8px;}
li.uWithSubmenu li a:after, .uMenuRoot li.uWithSubmenu a:after{content: "" !important;}
.relatednews, .relatednews .adsinfpic, .relatednews .adsinfpic img, .relatednews .adsinftext {width: 172px !important;}
.relatednews .adsinfpic {height:110px !important;}
.infoblock {float:left}
.infoblock span { width: 50%;line-height: 20px;float: left;}
.npic, .npic img {width:200px;}
.npic {height:130px;}
.nncont, .ninfo {width:330px;}
.bileft {width:420px;}
.boardmess, .boardinf {width:250px;}
.boardinf .bdate {display:none;}
#photomod:nth-child(2n) { margin-right: 0;}
.boardphone {width:248px;}
.boardbigpic, #scrollbar1 .viewport {height:300px !important; overflow:hidden;}
.boardbigpic img {min-height:300px;}
.profile_cell { width: 49.73%;}
}
Ответил: irrwisch
как вариант уменьшите размер шрифта на данном разрешении для меню
вместо 16пх, поставьте 14, максимум 15пх. И оторвите руки верстальщику, который сделал такую вложенность при том, что данный список имеет отдельный класс.
#headmenu ul li a {padding: 0 15px;font-size: 16px;}
вместо 16пх, поставьте 14, максимум 15пх. И оторвите руки верстальщику, который сделал такую вложенность при том, что данный список имеет отдельный класс.