Jump to content
  • 0

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

blablabla

Asked by blablabla,

 Share

Question

blablabla Explorer

blablabla

Posted
Posted

Помогите пожалуйста с блоком контента. Не могу понять, почему он не растягивается вместе с содержимым. Растягивается только если указать 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

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
eVErl@Sting Explorer

eVErl@Sting

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
blablabla Explorer

blablabla

Posted
  • Author
Posted

Код 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>

Link to comment
Share on other sites
  • 0
eVErl@Sting Explorer

eVErl@Sting

Posted
Posted

Пробуй

* {
	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;
}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept