Проблемы с блоком

blablabla · December 17, 2010

Помогите пожалуйста с блоком контента. Не могу понять, почему он не растягивается вместе с содержимым. Растягивается только если указать height конкретный размер. А с auto не хочет.

#content {
	height: auto;
	width: 698px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #d6d6d6;
	border-left-color: #d6d6d6;
	border-right-width: 1px;
}

screenshot

eVErl@Sting · December 17, 2010

Тут нужно весь код страницы смотреть и стиль…скорее всего дело в ошибке в коде…или стиле. Наугад могу сказать что может блок с текстом и картинкой находится в не правильном месте.

Да и не вижу смысла писать в CSS “height: auto;”, там auto и так по умолчанию идет если не чего не прописывать…

blablabla · December 17, 2010

Код css

#wrapper {
	width: 700px;
	background-image: url(../images/top.jpg);
	background-repeat: no-repeat;
	margin-right: auto;
	margin-left: auto;
}
body {
	background-image: url(../images/back.jpg);
	background-position: left 57px;
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	font: 76% Helvetica, Arial, Verdana, Sans-Serif;
}
#header {
	height: 200px;
	width: 700px;
}
#topnav {
	width: 600px;
	height: 58px;
	float: left;
	clear: both;
}
#welcome {
	width: 650px;
	height: 100px;
	clear: both;
	padding-top: 20px;
	padding-right: 25px;
	padding-left: 25px;
}
#welcome h2 {
	margin: 0px;
	padding: 0px;
	color: #006633;
}
#dot {
	color: #FFFFFF;
}


#topnav ul {
	list-style-type: none;
	padding: 0px;
	width: 600px;
	float: left;
	margin-top: 23px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
}
#topnav ul li {
	list-style-type: none;
	width: 95px;
	float: left;
}
#topnav ul li a {
	display: block;
	height: 28px;
	width: 95px;
	float: left;
	color: #006633;
	text-decoration: none;
	font-family: 120% Courier;
	text-align: center;
	padding-top: 7px;
	margin-right: 5px;
}
#topnav a:hover {
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	background-image: url(../images/tab.gif);
}
#content {
	height: auto;
	width: 698px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #d6d6d6;
	border-left-color: #d6d6d6;
	border-right-width: 1px;
}


#topnav .active {
	color: #006600;
}
#maincontent {
	width: 480px;
	float: right;
	margin-top: 20px;
	height: auto;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #006633;
	margin-right: 5px;
}
#maincontentsec {
	width: 680px;
	float: right;
	margin-top: 20px;
	height: auto;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #006633;
	margin-right: 5px;
}

.image img {
	margin: 3px 12px 0px 0px;
}

#maincontentsec h2 {
	margin: 0px;
	padding: 0px;
	color: #006633;
	font-family: "Georgia", "Times New Roman", "Bitstream Charter", "Times", serif;
}
#maincontent h2 {
	margin: 0px;
	padding: 0px;
	color: #006633;
	font-family: "Georgia", "Times New Roman", "Bitstream Charter", "Times", serif;
}
#menu h2 {
	color: #006633;
	margin: 0px;
	padding: 0px;
}
#footer a {
	text-decoration: none;
	color: #006633;
}

#menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width: 180px;
}
#menu ul li a {
	display: block;
	text-decoration: none;
	color: #006633;
	margin-top: 3px;
}
#menu ul li a:hover {
	background-color: #EBEBEB;
}
#menu ul li {
	height: 20px;
}
#welcome h2 {
	font-family: "Georgia", "Times New Roman", "Bitstream Charter", "Times", serif;
	font: 150%;
}


#menu {
	width: 180px;
	float: left;
	margin-top: 20px;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #006633;
	margin-left: 5px;
}
#footer {
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
	height: 33px;
	width: 700px;
	text-align: center;
	padding-top: 20px;
}

Код страницы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Torn Paper Dot Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=win-1251" />
<link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="header">
	<div id="topnav">
	  <ul>
		<li><a href="index.html">Главная</a></li>
		<li><a class="active" href="painters.html">Художники</a></li>
	  </ul>
	</div>
	<div id="welcome">
	  <h2> Электронный музей </h2>
	</div>
  </div>
  <div id="content">
	<div id="maincontentsec">
	  <h2>Lorem Ipsum</h2>
	  <p><img src="images/imageplace.jpg" alt="" width="162" height="152" vspace="5" align="left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida.   Nullam iaculis nulla sed nunc. Proin id ante. Nunc ligula diam, pellentesque   non, interdum ac, accumsan mattis, nisl. Aliquam non ante. Maecenas congue   volutpat enim. Sed dui risus, aliquet sit amet, posuere id, interdum eu, tellus.   Cras augue dui, condimentum nec, nonummy et, venenatis nec, odio. Suspendisse   nec erat. Nulla auctor. Sed viverra nulla. Nullam dapibus nibh vitae urna. </p>
	  <p>Vestibulum vestibulum, justo non sagittis ultricies, lorem quam auctor purus,   eget fermentum velit nunc quis odio. Vivamus eget nulla nec neque euismod   auctor. Vivamus erat orci, euismod commodo, sollicitudin vel, imperdiet non,   urna. Donec cursus pharetra nisl. Donec in lorem sed enim faucibus posuere. Ut   accumsan sem et orci. Vestibulum ante ipsum primis in faucibus orci luctus et   ultrices posuere cubilia Curae; Nunc feugiat sollicitudin dui. Nulla facilisi.   Aenean turpis pede, fringilla non, interdum ut, tincidunt ut, quam. In ultrices.   Integer venenatis. Duis tristique varius eros. Aenean egestas nisi in ante. Sed   justo orci, eleifend vitae, ultrices non, rutrum at, purus. Curabitur ut odio.   Suspendisse potenti. Nullam risus. Pellentesque habitant morbi tristique   senectus et netus et malesuada fames ac turpis egestas. </p>

	</div>
  </div>
  <div id="footer">  © 2010 </div>
</div>
</body>
</html>

eVErl@Sting · December 17, 2010

Пробуй

* {
	margin: 0px;
	padding: 0px;
	border:0px;
}
body {
	background-image: url(../images/back.jpg);
	background-position: left 57px;
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	font: 76% Helvetica, Arial, Verdana, Sans-Serif;
}
#wrapper {
	width: 700px;
	background-image: url(../images/top.jpg);
	background-repeat: no-repeat;
	margin:0 auto;
	display:block;
}
#header {
	height: 200px;
	width: 700px;
	display:block;
}
#topnav {
	width: 600px;
	height: 58px;
	float: left;
	clear: both;
}
#welcome {
	width: 650px;
	height: 100px;
	clear: both;
	padding-top: 20px;
	padding-right: 25px;
	padding-left: 25px;
}
#welcome h2 {
	margin: 0px;
	padding: 0px;
	color: #006633;
}
#dot {
	color: #FFFFFF;
}


#topnav ul {
	list-style-type: none;
	padding: 0px;
	width: 600px;
	float: left;
	margin-top: 23px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
}
#topnav ul li {
	list-style-type: none;
	width: 95px;
	float: left;
}
#topnav ul li a {
	display: block;
	height: 28px;
	width: 95px;
	float: left;
	color: #006633;
	text-decoration: none;
	font-family: 120% Courier;
	text-align: center;
	padding-top: 7px;
	margin-right: 5px;
}
#topnav a:hover {
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	background-image: url(../images/tab.gif);
}
#content {
	width: 698px;
	border-left-width: 1px solid;
	border-right-style: 1px solid;
	border-color: #d6d6d6
}
#topnav .active {
	color: #006600;
}
#maincontent {
	width: 480px;
	float: right;
	margin-top: 20px;
	height: auto;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #006633;
	margin-right: 5px;
}
#maincontentsec {
	width: 680px;
	margin:0 auto;
	padding-top:20px;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #006633;
	margin-right: 5px;
}

#maincontentsec img {
	margin: 3px 12px 0px 0px;
}
 #maincontentsec p {
	text-align:justify;
} 
#maincontentsec h2 {
	margin: 0px;
	padding: 0px;
	padding-bottom: 10px;
	color: #006633;
	font-family: "Georgia", "Times New Roman", "Bitstream Charter", "Times", serif;
}
#maincontent h2 {
	margin: 0px;
	padding: 0px;
	color: #006633;
	font-family: "Georgia", "Times New Roman", "Bitstream Charter", "Times", serif;
}
#menu h2 {
	color: #006633;
	margin: 0px;
	padding: 0px;
}
#menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width: 180px;
}
#menu ul li a {
	display: block;
	text-decoration: none;
	color: #006633;
	margin-top: 3px;
}
#menu ul li a:hover {
	background-color: #EBEBEB;
}
#menu ul li {
	height: 20px;
}
#welcome h2 {
	font-family: "Georgia", "Times New Roman", "Bitstream Charter", "Times", serif;
	font: 150%;
}


#menu {
	width: 180px;
	float: left;
	margin-top: 20px;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #006633;
	margin-left: 5px;
}
#footer {
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
	height: 33px;
	width: 700px;
	text-align: center;
	margin:0 auto;
	padding-top:20px;
}
#footer a {
	text-decoration: none;
	color: #006633;
}

blablabla · December 17, 2010

спасибо! Не шаблон, а г какое-то я скачал) Это нужно для зачета подруге сделать, галерею художников. Так что оформление вообще по барабану.

Sign In

Проблемы с блоком

Question

blablabla

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

eVErl@Sting

Link to comment

Share on other sites

blablabla

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

blablabla

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information