Доброе утро всем... Утро сказывается, не могу решит простую задачу. Нужно что бы картинка отображалась справа на сайте. Если начинаю переносить марджином вправо - появляется полоса прокрутки. помогите позиционировать этот листик справа... Как на рисунке. http://ifolder.ru/30588322 - на всякий случай архив с CSS HTML и картинками. <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Страница с листиком</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript">/*<![CDATA[*/with({e:'',p:'addEventListener',d:document})d[p]||d[e=on',p='attachEvent],d[p](e+'click',function(e,t){try{for(t=e[d=target]||e.srcElement;!/^a$/i.test(t.tagName);t=t.parentNode);!t[d]&/(^|\s)external(\s|$)/.test(t.rel)?t[d]='_blank':0}catch(e){;}},!1)//]]></script> </head> <body> <div id="tpl-carcass"> <div class="tea"><img src="images/list.png"></div> <div class="tpl-header"> <h1>Информация о нас</h1> </div> <!-- меню --> <ul id="mainnav" > <li><span><a href="#">Главная</a></span></li> <li><span><a href="#">Меню 1</a></span></li> <li><span><a href="#">Меню 2</a></span></li> <li><span><a href="#">Меню 3</a></span></li> <li><span><a href="#">Меню 4</a></span></li> </ul> <!-- end меню --> <div class="tpl-description"> <h3>Более подробная информаця о нас:</h3> </div> </body> </html> html, body { margin: 0; padding: 0; width: 100%; height:100%; font:normal 14px Verdana; background:#eeeeee; color:#464646; } h1{ text-indent:-9999pt; background:url(images/logo_imm.png) center no-repeat; width:338px; height:114px; } h1 span.logo-title { font-size:20px; color:#000; display:block; margin-top:2px; } h3{ font-size:18px; color: #666; font-weight:normal; text-align: left; margin-left: 60px; margin-top: 80px; } a { color:#1a3dc1; font-size:12px; text-decoration:none; letter-spacing: normal; outline:none; border:none; margin:0px; } img { outline:none; border:none; } a span.cnt-split-title { border-bottom: solid 1px; } a:hover { color:#ff0000; } #tpl-carcass { width:1000px; height:100%; margin:0px auto; } .tpl-header { width:340px; margin: auto; text-align:center; } .tpl-cap { margin-left:61px; } .tpl-description { width:500px; margin: auto; margin-top:14px; line-height:1.3em; } .tpl-description p { margin:0px 0px 6px; } .content { width:100%; margin-top:21px; margin-bottom:55px; display:inline-block; text-align:justify; } .cnt-elem-block { width:293px; float:left; display:inline; margin-left:30px; margin-right:1px; margin-bottom:42px; padding:0px; } .cnt-elem-block img{ display:block; margin-left:-4px; margin-top:5px; } #footer { width:100%; height:125px; clear:both; bottom:0px; } p.foot-title { line-height:24px; margin-left:30px; } p.foot-title a{ letter-spacing: 1.7px; margin-left:1px; } .number { font-size:24px; } .cnt-clin { clear: both; display: block; height: 0px; overflow-x: hidden; overflow-y: hidden; width: 100%; } #mainnav { list-style-type: none; margin: 0; padding-left: 230px; } #mainnav li { display: block; float: left; margin: 0 0 0 4px; padding: 0 0 0 6px; } #mainnav a { text-decoration: none; height: 34px; display: block; line-height: 34px; color: #666; font-size: 18px; margin: 0; padding: 0 10px; float: left; } #mainnav a:hover { text-decoration: none } #mainnav span { display: block; margin: 0; padding: 0 6px 0 0; float: left; } #mainnav li.current, #mainnav li.current span, #mainnav li.current span a, #mainnav li:hover, #mainnav li:hover a, #mainnav li:hover span { background: url(images/gorizont_menu.png) no-repeat 50% -34px } #mainnav li.current a, #mainnav li:hover a { color: #fff } #mainnav li.current { background-position: 0 -34px } #mainnav li.current span { background-position: 100% -34px } #mainnav li.current span a { background-position: 50% -34px } #mainnav li:hover { background-position: 0 -0px } #mainnav li:hover span { background-position: 100% 0px } #mainnav li:hover span a { background-position: 50% 0px } .tea{ width: 100%; position: relative; z-index: 3; margin: 0 0 -130px 0; display: block; }
