| |
|
|
| | При верстке блоками (div) при позиционировании блоков с отрицательными margin возникает проблема размещения таблицы с шириной 100% в блоке content, он расширяется и появляется полоса прокрутки, а левый блок navigation уходит в право, сайт резиновый с фиксированной минимальной шириной, можно ли как нибудь избежать этого?
Html - код
[CODE]
<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><br>
факс: <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>
[/CODE]
CSS - код
[CODE]
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;}
[/CODE] | |
| |
|
