Проблемы с таблицей при блочной верстке.

andrey-007 · July 31, 2008

При верстке блоками (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;}

Извиняюсь, если код очень большой.

Помощь очень нужна, и как можно быстрее, плиз.

yopopt · August 1, 2008

Попробуйте локализовать проблему. Сложно разобраться в таком кошмаре.

Sign In

Проблемы с таблицей при блочной верстке.

Question

andrey-007

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information