kind_whale
-
Posts
2 -
Joined
-
Last visited
kind_whale's Achievements
Explorer (1/14)
0
Reputation
-
fixed div наезжает на не_fixed при изменение размера экрана
kind_whale replied to kind_whale's question in HTML Coding
А можно немного конкретнее, куда и как применять эти media queries? Может есть какой-то другой способ поправить эту проблему? -
fixed div наезжает на не_fixed при изменение размера экрана
kind_whale posted a question in HTML Coding
Здравствуйте! Подскажите, пожалуйста, как справиться со следующей ситуацией. Экран вертикально разделен 50% на 50%. В левой колонке располагаются вертикально несколько div. Появляется прокрутка страницы. В правой колонке посередине экрана зафиксирован другой div. Проблема: при сжатии окна браузера до размера меньше левого div, правый фиксированный div наезжает на левые. Как и где можно поставить что-то типа min-width, чтобы при сжатии до определенного размера появлялась горизонтальная прокрутка и левый div не наезжал на правые? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> body{height:100%; position:relative; background: fixed url('.../0.gif'); } #left_main { float:left; width: 50%; } #right_main { width: 50%; } #right { width:410px; /*Ширина блока*/ height:320px; /*Высота блока*/ margin:0 auto; overflow:visible; position:fixed; left:75%; top:50%; margin-left:-205px; /*Смещаем блок на половину всей ширины влево*/ margin-top:-160px; /*Смещаем блок на половину высоты вверх*/ background:#ffffff; //position: absolute; top: expression( parseInt(document.body.scrollTop, 10) + "px" ); } #note { font-family: 'Marck Script', serif; width: 300px; padding: 50px; margin: auto; position: relative; background-color: #fe6; background: -webkit-linear-gradient(#fe6, #f5da41, #f6ef97); background: -moz-linear-gradient(#fe6, #f5da41, #f6ef97); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .8); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .8); box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .8), inset 0 6px 6px rgba(0, 0, 0, .1); margin-top: 25px; margin-bottom: 50px; } #note:before { content: ''; display: block; width: 90%; height: 20%; position: absolute; left: 10px; bottom: 3px; background-color: rgba(0, 0, 0, .9); -o-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; opacity: 1; z-index: -1; } #note:after { content: ''; display: block; width: 90%; height: 20%; position: absolute; right: 10px; bottom: 3px; background-color: rgba(0, 0, 0, .9); -o-transform: rotate(3deg); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; opacity: 1; z-index: -1; } </style> </head> <body> <div id="left_main"> <div id="note"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="note"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="note"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="note"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div id="right_main"> <div id="right" align="center"> <div id="note"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> </body> </html> С уважением, Александр