andrey-007
-
Posts
1 -
Joined
-
Last visited
andrey-007's Achievements
Explorer (1/14)
0
Reputation
-
При верстке блоками (div) при позиционировании блоков с отрицательными margin возникает проблема размещения таблицы с шириной 100% в блоке content, он расширяется и появляется полоса прокрутки, а левый блок navigation уходит в право, сайт резиновый с фиксированной минимальной шириной, можно ли как нибудь избежать этого? Html - код <html> <head> <title>Название страницы</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script src="AC_RunActiveContent.js" language="javascript"></script> <link href="css/style.css" rel="stylesheet" type="text/css"> <!--[if lt IE 7]> <script language="JavaScript"> function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters)) { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');"></span>" img.outerHTML = strNewHTML i = i-1 } } } } window.attachEvent("onload", correctPNG); </script> <![endif]--> </head> <body> <div id="container"> <table cellspacing="0" cellpadding="0" border="0" width="100%" height="342" style="background: url(images/fon_header.jpg) left top repeat-x; height: 342px;"><tr> <td><div id="headerright"></div> <script language="javascript"> Скрипт флешки </script> </td> </tr></table> <div id="wrapper"> <div id="content"> <div id="text"><h1>какие то слова</h1> <div id="link_top"><a href="">Главная</a><span> » какие то слова</span></div> <div id="ris"> <div id="bg_ris"> <div id="ris_image"><img width="137" src="images/ris.jpg"></div> </div> </div> <div id="tra"> <p>Контент</p> <table border="1" width="100%"><!-- Таблица, при которой получается косяк --> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr></table> </div> </div></div> </div> <div id="navigation"> <div id="polosa"> <div id="verh"> <div id="niz"> <table><tr><td height="375"> </td> <td class="menu"><p><a href="">Навигация</a></p> </td></tr></table> </div> </div> </div> </div> <div id="extra"> <div id="kontakts"> <div id="country"><p>Адрес</p></div> <div id="tel">тел.: <span>Телевон</span></div> <div id="country1"><p>Город</p></div> <div id="tel">тел.: <span>Телефон</span> факс: <span>Телефон</span></div> </div> <div id="extrat">(с) 2008-2009</div> <div id="extra1"><p>"Типа футер"</p></div> </div> <div id="header1"><a href="index.html"><img border="0" width="464" height="136" class="png" alt="какие то слова" src="images/header_text.png"></a></div> <div id="header_left"></div> </body> </html> CSS - код html,body{margin:0;padding:0} body{background-color: #006c09; font: 76%; font-family: Verdana; font-size: 12px; color: #000000; } p{margin:0px 0px 10px 10px} img {border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none;} table, tr, td, th {vertical-align: top;} h1 {font-weight: normal; font-size: 16px; padding-left: 10px;} h2 {font-weight: normal; font-size: 14px; padding-left: 10px;} a{font-size: 12px; color: #91ff6a;} a:hover{text-decoration: none; color: #fffaad;} #header {background: url(../images/fon_header.jpg) left top repeat-x; height: 342px;} #headerright {background: url(../images/headerright1.jpg) right top no-repeat; height: 342px;} #header_left {background: url(../images/headerleft.jpg) left top no-repeat; position: absolute; top: 0px; left: 0px; z-index: 100; height: 342px; width: 569px;} #container {min-width: 1000px; width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 1000 ? "1000px" : "auto"); } #header1 {position: absolute; left: 100px; top: 96px; width: 464px; height: 136px; z-index: 300;} #content {font-size: 11px; color: #ffffff; padding-right: 78px; text-align: justify; margin-left:425px;} #content h1 {font-weight: normal; font-size: 20px; color: #fffaad; padding-left: 10px;} #tra {font-size: 11px; color: #ffffff; text-align: justify;} #tra h1 {font-weight: normal; font-size: 20px; color: #fffaad; padding-left: 10px;} #wrapper{float:left;width:100%} #navigation {float: left; width:364px; margin-left:-100%; border: 0px solid;} #extra{clear:left; width:100%; height: 190px;} #ris {float: left; margin-left: 10px; margin-right: 15px;} #bg_ris {/*background: url(../images/fon_ris.jpg) bottom right no-repeat; width: 146px; height: 180px;*/ } #ris_image {background: url(../images/fon_ris.jpg) bottom right no-repeat; padding: 0 8px 8px 0;} #ris_image img {border: 1px solid #00700b; } #text {} #text a {font-size: 12px; color: #91ff6a;} #text a:hover {text-decoration: none; color: #fffaad;} #polosa{background: url(../images/menu_mid.jpg) repeat-y top left; } #niz{background: url(../images/menu_bot.jpg) no-repeat bottom left; padding-top: 27px; padding-bottom: 40px;} #niz a{font-family: Verdana; font-size: 12px; color:#91ff6a; padding-left: 15px; text-decoration: none; display: block; } #niz a:hover{background: url(../images/doton.gif) top left no-repeat; text-decoration: underline; color:#fffaad;} #verh{background: url(../images/menu_top.jpg) no-repeat top left; } #kontakts {float: left; background: url(../images/fon_kontakts.jpg) left top no-repeat; width: 315px; height: 201px;} #country {font-size: 11px; color: #00c710; padding-left: 126px;} #country p {font-size: 11px; color: #00c710;} #country1 {font-size: 11px; color: #00c710; margin-top: 15px; padding-left: 126px;} #country1 p {font-size: 11px; color: #00c710;} #tel {font-size: 11px; color: #fffaad; padding-left: 136px;} #tel p {font-size: 11px; color: #fffaad;} #tel span {font-size: 14px;} #extra1 p {font-size: 11px; color:#91ff6a; margin-top: 5px; margin-left:435px; margin-right: 35px;} #extrat {font-size: 11px; color: #ffffff; margin-left:435px; margin-right: 35px; margin-top: 77px; } #link_top {padding-left: 10px; margin-bottom: 33px;} #link_top a {font-size:11px; color: #91ff6a;} #link_top a:hover {text-decoration: none;} #link_top span {font-size: 11px; color: #00c710;} #flash {position: absolute; top: 0px; right: 0px; z-index: 10;} .png {behavior: url(../src/pngbehavior.htc);} .menu {vertical-align: middle;} Извиняюсь, если код очень большой. Помощь очень нужна, и как можно быстрее, плиз.