Есть проблема, html страничка растягивается на широкоформатном мониторе, блок левый остаётся где надо - а правый к правому краю экрана липнет, центральный блок с текстом остаётся таким же - не растягивается во весь экран. У меня у самого 19 дюймов квадратный монитор, на нём всё как надо но как влючаю 2й комп с широким монитором - всё портится посоветуйте пожалуйста - как надо оптимизировать сайт под широкоформатные мониторы?
настройка сайта под широкоформатные мониторы впринципе теоретически надо сделать так чтобы центральный блок с текстом растягивался, и изображение background в шапке сайта (в данный момент изображение копируется и заполняет пространство)
вот - просьба сильно не ругать - сделано жесть: PHP: <div id="wrap" style="position:absolute; left:181px; top:133px; width: 898px"> <div class="cbb"> <h1><div style="text-shadow:#778899 1px 1px 1px">ТЕКСТОВЫЙ ЦЕНТРАЛЬНЫЙ БЛоК</div></h1> <!--text--> <p> </p> <!--END text--> </div> </div> вот вариант с css стилем PHP: <style type="text/css" media="screen,print,projection"> html {background:transparent} body {background:#BBD9EE repeat-x fixed } #wrap { margin:0 auto; } .cbb { margin:1em 0; padding:0 10px; border:1px solid #666; background:#fff; } .cbb h1 { margin:0 -10px; padding:0.3em 10px; background:#efece6; font:bold 1.2em/1 Arial, Helvetica, sans-serif; } </style> <div id="wrap" style="position:absolute; left:181px; top:133px; width: 898px"> <div class="cbb"> <h1><div style="text-shadow:#778899 1px 1px 1px">ТЕКСТОВЫЙ ЦЕНТРАЛЬНЫЙ БЛоК</div></h1> <!--text--> <p> </p> <!--END text--> </div> </div> оптимизация сайта под широкий монитор
Думаю тебе надо указывать ширину не в пикселях а в процентах. допустим левый див 20% центральный 60% и правый 20%. и вообще все делать через проценты. походу должно помочь.
inline стили моветон. С процентами очень сложно. Лучше установить max-weight, height. Потому что под все разрешения все равно не подстроиться.
сделал вот так всё работает: c изображением background: PHP: {float:left;width: 100%;padding-top:120px;background: #BBD9EE; background-image:url('img/bg.png'); background-size:100% 100%; background-repeat: no-repeat; background-position: center top} с блоками PHP: <div id="wrap" style="margin-left:181px; margin-right:181px; width:auto"> <div class="cbb"> <h1><div style="text-shadow:#778899 1px 1px 1px">ТЕКСТОВЫЙ ЦЕНТРАЛЬНЫЙ БЛоК</div></h1> <!--text--> <p> </p> <!--END text--> </div> </div> как пример можно так верстать: PHP: <style> #container { width: 100%; } #leftside { float: left; width: 200px; background:red; } #centerside { width: 100%; margin-left:200px; margin-right:200px; background:yellow; } #rightside { float: right; width: 200px; background:green; } </style> <div id="container"> <div id="leftside">LEFT</div> <div id="rightside">RIGHT</div> <div id="centerside">CENTER</div> </div> или так: <style> #container{ width: 100%; position:relative; } #leftside { position:absolute; left:0; top:0; width: 200px; background:red; } #rightside { position:absolute; right:0; top:0; width: 200px; background:green; } #centerside { width: 100%; margin-left:200px; margin-right:200px; background:yellow; } </style> <div id="container"> <div id="leftside">LEFT</div> <div id="centerside">CENTER</div> <div id="rightside">RIGHT</div> </div>
масштаб ещё как вариант - если нет широкого монитора, то можно нажав control + колесо мыши крутить, такой же результат как на широком мониторе можно подогнать масштабом.