[решено] Высота контейнера и его заливка

[решено] Высота контейнера и его заливка

Старожил

Сообщения: 175
Благодарности: 15

Не пойму, почему у блока "content" заливка цветом идет не полная? Ведь, вставленная таблица должна его раздвинуть, соответственно и заливка должна расшириться на всю длину и ширину контейнера.

собственно вот код:

HTML код:

<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="-1">
	<title>No Title</title>
<style>
 body
 {
 margin: 0;
 font-family:"Century Gothic",Arial,Helvetica,Geneva,Sans-serif;
 padding-left:10%;
 padding-right:10%;
 background-color: #000000;
 }
 a
 {
 color:#FFFFFF;
 }
 #header
 {
 position:relative;
 color:#FFFFFF;
 width:100%;
 height:75px;
 }
	#header #menu 
	{
	color:#FFFFFF;
	padding-left:0px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	text-align:left;
	position:absolute;
	width:auto;
	height:auto;
	left:0px;
	bottom:3px;	
	}		
		#header #menu a#current
		{
		color:#FF0000;	
		}
	#header #logo 
	{
	font-size:58px;
	letter-spacing:0.15em;
	color:#FFFFFF;
	text-align:right;
	margin-right: 0px;
	padding-right: 0px;
	position:absolute;
	bottom:3px;
	right:0px;
	width: auto;
	height:auto;
	}
 #content
 {
 position:relative;
 clear:both;
 background:#999999;
 background-color:#80807e;
 color:#FFFFFF;
 width:100%;
 height:500px;
 }
 	#content #leftcolumn
 	{
	clear:both;
 	float:left;
 	width: 35%;
 	}
 	#content #maincolumn
 	{
	float:right;
	overflow: hidden;
 	width: 65%;
 	}
 #footer
 {
 clear:both;
 color:#FFFFFF;
 width:100%;
 height:75px;
 }
 	#footer #downmenu 
	{
	position:absolute;
	padding-top: 3px;
 	}
 		#footer #downmenu a#active 
		{
 		color:#FF0000;
 		}
		</style>	
</head><body><div style="display: none; position: absolute; top: 0pt; left: 0pt; z-index: 90; width: 100%;" id="overlay"><a href="#"><img style="position: absolute; z-index: 150;" id="loadingImage" src="/loading.gif"></a></div><div style="display: none; position: absolute; z-index: 100;" id="lightbox"><a title="Click to close" href="#"><img id="lightboxImage"><img style="position: absolute; z-index: 200;" id="closeButton" src="/close.gif"></a><div id="lightboxDetails"><div style="display: none;" id="lightboxCaption"></div><div id="keyboardMsg">press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close</div></div></div>

	<div id="header"><span id="menu"><a href="index.php?page=browse&action=list&orderby=DESCRIPTION&group=3&cat=18">Auxerrois</a>  <a id="current" href="index.php?page=browse&action=list&orderby=DESCRIPTION&group=4&cat=9">Cabernet Sauvignon</a>  <a href="index.php?page=browse&action=list&orderby=DESCRIPTION&group=5&cat=3">Chardonnay</a>  <a href="index.php?page=browse&action=list&orderby=DESCRIPTION&group=6&cat=10">Cuvee</a>  </span><span id="logo">Der Laden</span></div>
	<div id="content"><script type="text/javascript" language="javascript" src="/ajax/ajax.js"></script>
<div id="leftcolumn">

          <table class="datatable" width="100%">
  <tbody><tr><td><a class="plain" onclick="loadContent('3&cat=9&group=4')" href="#"><img class="imgleft" src="prodgfx/tn_3.jpg" alt=""></a></td></tr>         </tbody></table>

       <div style="text-align: right;"><img src="templates/leiling/images/photo.gif" alt=""> <em><small>Die Bilder sind nicht rechtsbindend auf das Produkt!</small></em></div>

 
      
  </div><div id="maincolumn">
    <table class="datatable" style="position: relative;" width="85%">
      <caption>Produkt Details</caption>
      <tbody><tr><td>
              <center>Produkt ID: 0528</center>	               
              <div style="text-align: center;"><a href="prodgfx/3.jpg" rel="lightbox" title="Produkt ID: 0528"><img class="borderimg" src="prodgfx/3.jpg" alt="" height="317" width="450"><br><br>Klicken für Vollbild</a>	               
           	                    <br>

                <br>
                <table class="borderless" width="90%">
                  <tbody><tr><td class="borderless">
                       <div style="text-align: left;">
	                     <em><strong>Beschreibung:</strong></em>
	                     <ul><li><p><strong><span style="font-family: 'Century Gothic',Arial,Helvetica,Geneva,Sans-serif;">2005   Cabernet Sauvignon</span></strong></p>                    <p><span style="font-family: 'Century Gothic',Arial,Helvetica,Geneva,Sans-serif; font-size: 12px;">FZ 0,2g/l, Säure 5,0g/l, Alkohol 12,5 % vol. </span></p> </li></ul>
	                   </div>
		              </td></tr>
                </tbody></table>
              </div>      
              <br>
              <form method="POST" action="index.php?page=cart&action=add">
                <div style="text-align: right;">
                  <input name="prodid" value="3" type="hidden">
                  <input name="prodprice" value="18.25" type="hidden">

                                 <big><strong>Preis/Stck: ?18,25</strong></big><br><small>(?15,34 excl. Mwst)</small>	                                   <br>
                                    <br>
                                    Menge: <input size="4" name="numprod" value="1" maxlength="4" type="text"> <input value="Bestellung" name="sub" type="submit">
                                   	                  </div>
              </form>
	               </td>
	           </tr>
      </tbody>
    </table>
  </div>
</div>
	<div id="footer"><span id="downmenu"><a href="index.php?page=search">Suche</a>  <a href="index.php?page=browse&action=shownew"><font color="red"><b>Neue</b></font> Produkte</a>  <a href="index.php?page=conditions&action=show">AGB</a>  <a href="index.php?page=info&action=shipping">Versand</a>  <a href="index.php?page=info&action=aboutus">Impressum</a>  <a href="index.php?page=contact">Kontakt</a>  <a href="index.php?page=info&action=Anfahrt">Anfahrt</a>  <a href="index.php?page=info&action=Geschichte">Geschichte</a>  <a href="index.php?page=info&action=Team">Team</a>  </span></div>

</body></html>

а вот схема веб страницы:

Отправлено: 23:05, 18-05-2010

System Failure

Старожил

Сообщения: 175
Благодарности: 15

Профиль | Отправить PM | Цитировать

в общем определил, что такая ошибка имеет место быть в фаерфоксе. в ИЕ вроде все как и теоретически должно быть. вот упрощенная модель той-же ошибки, собственно:

HTML код:

<html>

<head>

<title></title>
<style>
 #content
 {
 position:relative;
 clear:both;
 color:#FFFFFF;
 width:100%;
 height:500px; 
 background:#999999;
 background-color:#80807e;
 }
  	#content #maincolumn
 	{
 	background-color : #FF8080 ;
 	background : #FF8080 ;
	float:right;
 	width: 65%;
 	}
</style>
<script language="javascript" type="text/javascript">
function fillWithHTML()
{
document.getElementById("maincolumn").innerHTML="<br>1<br>1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>1<br><br>1<br><br><br><br><br><br><br><br><br><br>1<br><br><br><br><br><br><br>lol";
}

</script>
</head>

<body>

<div id="content"><div id="maincolumn"></div></div>
<input type="button" value="click" onclick="fillWithHTML()">

</body>

</html>

как мы видим, высота заливки родительского контейнера не расширяется, при наполнении дочернего объекта, контентом, по высоте превосходящим родительский объект.

таким образом приходится в JS добавить строчку, динамически изменяющую высоту родительского объекта:

HTML код:

document.getElementById("content").style.height=document.getElementById("maincolumn").offsetHeight+10;

Последний раз редактировалось System Failure, 19-05-2010 в 19:52. Причина: найдено решение

Отправлено: 19:43, 19-05-2010 | #2

Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.