breadfruit
-
Posts
2 -
Joined
-
Last visited
breadfruit's Achievements
Explorer (1/14)
0
Reputation
-
Проблема решился! в width поставил 1050px
-
Здравствуйте! Не могу как надо сделать выравнивание сайта по центру. Делаю так, на body задаю такие значения margin: auto; после этого сайт становится по центру. Но правый меню уходит за пределы экрана, и появляется нижняя прокрутка! Вопрос: как сделать правильную выравнивание по центру что бы правый меню поместился на экране? Сайт имеет структуру <body> <div id="main"> <div id="wrapper"> <div class="content"> <div class="header"> <div class="left"> <div class="top"> <!-- логотип --> </div> <?php include './menu.php';//Меню левого края ?> <div class="right"> <div class="block"> <h1>Контент</h1> <p> тут контент </p> </div> </div> <div style="clear:both"></div> <?php include './bottom.php'//Подвал сайта ?> </div> </div> </div> </div> <?php include './menu_right.php'//Прав меню ?> <div class="clear"></div> </div> </body> style.css *{ padding: 0; margin: 0; font-family: Tahoma,Verdana,Arial,sans-serif,Lucida Sans; font-size: 12px; color: #000000; outline: none; } body { width: 800px; height: 100%; background: #ffffff; background-position: center top; text-align: left; margin: auto; } #main { min-width: 1050px; } #wrapper { width: 75%; float: left; font-size: 12px; font-family: Tahoma,Verdana,Arial,sans-serif,Lucida Sans; } #wrapper .content { margin-left: 52px; position: relative; } #wrapper .content .header { width: 100%; } #wrapper .content .header > .left { float: left; clear: both; } #wrapper .content .left .top { width: 100%; height: 150px; background: #fff url(../img/fon2.png) no-repeat; } #wrapper .content .left .left { width: 185px; margin: 2px 0 0 0; float: left; } #wrapper .content .left .right { overflow: hidden; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; margin: 2px 0 0 185px; } #wrapper .content .left .right .block { width: 100%; display: block; clear: both; } #wrapper .content .left .right .block > h1 { padding: 4px; background: #2393AA; width: 100%; height:17px; color: #ffffff; font-weight: normal; font-size: 14px; text-align: center; } #wrapper .content .left .right .block > p { padding: 5px 10px; font-size: 13px; } #wrapper .right .search { background: whiteSmoke; padding: 5px 7px; border-bottom: 1px solid #cccccc; } #wrapper .right .block2 { padding: 5px 7px; border-bottom: 1px solid #cccccc; color: #666; font-weight: bold; } #wrapper .right .search form { padding: 5px 7px; } #wrapper .right .search form input[name=search] { border: 1px solid #DDD; color: #585858; font-size: 10px; margin: 0; height: 25px; width: 96%; background: #ffffff url(../img/search.png) no-repeat 5px 2px; padding: 0 0 0 25px; } #wrapper .right .search ul a { color: #666666; font-size: 10px; font-weight: bold; display: block; float: left; margin: 0 9px; margin-bottom: 5px; padding: 2px 3px; } #wrapper .right .search ul a:hover { color: #ffffff; background: #cccccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #wrapper .right .search ul.topnav { padding: 5px 7px; border-bottom: 5px dotted; border-color: #ccc; } #wrapper .right .search ul.secondnav { padding: 5px 7px; } #wrapper .right .message { border-bottom: 1px solid #cccccc; padding: 5px 10px; } #wrapper .right .messages-result { border-bottom: 1px solid #cccccc; background: #f4f4f4; color: #000000; font-size: 12px; padding: 5px 10px; } #wrapper .right .message.gray { background: #f4f4f4; } #wrapper .right .pagination { padding: 5px 10px; text-align: left; } #wrapper .right .pagination a { font-size: 12px; } #wrapper .podskazka div { position: absolute; width: 500px; height: 203px; background: #f4f4f4; padding: 7px; color: #666666; font-size: 13px; line-height: 22px; display: none; border: 1px solid #cccccc; } #wrapper .podskazka div img { float: left; border: 1px solid #cccccc; margin-right: 15px; } #wrapper .podskazka div h1 { color: #666666; font-size: 13px; font-weight: normal; text-align: center; border-bottom: 3px dashed #33608e; padding: 0 0 5px 0; margin-left: 15px; } #wrapper .right .message .message-top { color: #000000; font-size: 12px; } #wrapper .right .message .message-bottom { padding: 12px 0 5px 0; padding-left: 10px; padding-right: 10px; margin-left: -5px; margin-right: -5px; color: #666666; font-size: 11px; background: #f8f8f8; } #wrapper .right .message .message-bottom a { color: #666666; font-size: 11px; text-decoration: none; } #wrapper .right .message .message-top .text { width: 350px; float: left; } #wrapper .right .message .message-top a { color: #666666; font-size: 11px; } #wrapper .right .message .message-top b { color: #666666; } #wrapper .right .message .message-top .status { float: right; color: #2B587A; width: 150px; text-align: right; } #wrapper .content div.article { width: 40%; display: block; float: left; margin: 5px 5px; font-size: 12px; border-left: 2px solid #cccccc; padding-left: 5px; padding-bottom: 5px; } #wrapper .content div.column { width: 49%; float: left; margin: 0; font-size: 12px; padding-left: 0; } #wrapper .content div.column:last-child { border-left: 6px solid #ffffff; } #wrapper .content div.column h1 { padding: 4px; background: #2393AA; width: 100%; color: #ffffff; font-weight: normal; font-size: 14px; text-align: center; } #wrapper .content div.article:hover { border-left: 2px solid #AAAAF3; } #wrapper .content div.article:nth-child(odd) { border-left: 2px solid #ffffff; clear: both; } #wrapper .content div.article:nth-child(odd):hover { border-left: 2px solid #ffffff; } #wrapper .content div.article2 { width: 40%; display: block; float: left; margin: 5px 5px; font-size: 12px; border-left: 2px solid #cccccc; padding-left: 5px; padding-bottom: 5px; padding-top: 5px; } #wrapper .content div.article2:hover { border-left: 2px solid #AAAAF3; background-color: #f2f2f6; } #wrapper .content div.article2:nth-child(odd) { border-left: 2px solid #ffffff; border-bottom: 2px solid #cccccc; clear: both; } #wrapper .content div.article2:nth-child(odd):hover { border-left: 2px solid #ffffff; border-bottom: 2px solid #AAAAF3; } /*//////////////////////////////////////////////////////*/ #wrapper .content div.article span { display: block; } #wrapper .content div.article span.date, #wrapper .content div.article span.author { color: #666666; padding: 0 0 3px 0; } #wrapper .content div.status { padding: 5px 5px; font-size: 12px; display: block; width: 100%; } #wrapper .content div.status a { color: #666666; font-size: 12px; } #wrapper .content div.status a b { color: #666666; font-size: 11px; } div.pagination { width: 100%; text-align: center; padding: 5px 0; font-size: 11px; } div.pagination a { color: #666666; } div.pagination a.active { color: #ffffff; background: #69F; padding: 0 2px; } #wrapper .content div.article a { color: #666666; font-size: 12px; } #wrapper .content div.article a b { color: #666666; font-size: 11px; } #wrapper .content .left .left .block { display: block; } #wrapper .content .left .left .block > h1 { padding: 4px; background: #2393AA; width: 177px; height:17px; color: #ffffff; font-weight: normal; font-size: 14px; text-align: center; } #wrapper .content .left .left .block ul { padding: 8px 0; } #wrapper .content .left .left .block ul.menu li { list-style: none; padding: 0 0 3px 15px; } #wrapper .content .left .left .block ul.menu a, #wrapper .content .left .left .block ul.menu a:link, #wrapper .content .left .left .block ul.menu a:visited { text-decoration: none; color: #666666; font-size: 13px; } #wrapper .content .left .left .block ul.menu a:hover { background-color: #E0E6EC; } #wrapper .content .left .left .block ul.menu li img { border: 0; float: left; padding: 2px 4px 0 0; } #wrapper .content .left .left .block ul.menu li span { color: #369; background-color: #E0E6EC; font-size: 10px; padding-top: 2px; padding-left: 3px; padding-right: 3px; padding-bottom: 2px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-top-left-radius: 3px 3px; } #wrapper .content .left .left .block form { padding: 5px 0; } #wrapper .content .left .left .block form input[name=search] { border: 1px solid #DDD; color: #585858; font-size: 10px; margin: 0; height: 25px; width: 155px; background: #ffffff url(../img/search.png) no-repeat 5px 2px; padding: 0 0 0 25px; border-bottom-left-radius: 13px 13px; border-top-left-radius: 13px 13px } #wrapper .content .left .left .block > p { padding: 3px 0; } #wrapper .content .left .left .block p.news span { display: block; font-size: 11px; padding: 5px 0; } #wrapper .content .left .left .block p.news span a { color: #666666; font-size: 11px; } .clear { clear: both; }