Выравнивание прокрутки текста по вертикали

resurs · February 13, 2012

Здравствуйте.

В который раз не могу выставить в нужное место блок div, блок прокрутки текста div id="target".

Он должен стоять корректно под заголовком, но уходит по вертикали, вниз, вытесняя вниз код перехода страницы и нижний колонтитул рисунка. Пробовал через CSS, не получается. Как все таки вставить текст с прокруткой под заголовок?

http://savepic.su/1317510.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">
	<div id="header">
		<img src="img/header.jpg" width="900" height="138" /><!-- Рисунок шапка -->
	</div><!-- #header-->
		<div id="middle">
			<div id="container">
				<div class="sidebar" id="sideLeft">
					<h1>СОДЕРЖАНИЕ</h1><!-- Содержание меню -->
						<ul><!-- Меню начало -->
						<li><a href="1.html">01.</a></li>
						<li><a href="2.html">02.</a></li>
						<li><a href="3.html">03.</a></li>
						<li><a href="4.html">04.</a></li>
						<li><a href="5.html">05.</a></li>
						<li><a href="6. html " class="notopbrdr0xNone">06.</a></li></ul><!-- Меню конец -->
				</div><!-- .sidebar#sideLeft -->
					<div id="content">
						<h1>ЗАГАЛОВОК</h1><!-- Заголовок текста -->
							<div id="target" style="overflow:  auto; height: 860px;"><!-- Текст и рисунки с прокруткой -->
								<p><img src="img/1/IMG_01.jpg" width="570" height="428" />
								<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
								<p><img src="img/1/IMG_01.jpg" width="570" height="428" />
								<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
							</div id><!-- #target--><!-- Конец текста и рисунков с прокруткой -->
								<div id="pagiantion"><a href="2.html">Следующая страница</a></div><!-- Переход по страницам -->
					</div><!-- #content-->
			</div><!-- #container-->
				<div style="clear: both;"> </div>
		</div><!-- #middle -->
			<div id="footer">
				<img src="img/footer.jpg" width="900" height="40" /><!-- Рисунок нижнего колонтитула -->
			</div><!-- #footer -->
</div><!-- #wrapper -->

</body>

</html>

Экспериментировал c таблицей CSS не получилось

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
	font: 12px Verdana, sans-serif;
	width: 100%;
    background-color: #f7f5e3;
    color: #17181A;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
input {
	vertical-align: middle;
}

#start {
    width: 409px;
    height: 499px;
    margin: 25px auto;
}
#start a {
    border: none;
}

#start p {
    text-align: center;
    font-family: Verdana;
    font-size: 11px;
    color:#333;
}

#wrapper {
	width: 900px;
	margin: 0 auto;
    border: 1px solid #EDE4A3;
    background-color: #fff;
}


/* Header
—————————————————————————--*/
#header {
	height: 138px;
	background: #FFE680;
}


/* Middle
—————————————————————————--*/
#middle {
	width: 100%;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;

}


#content {
	margin-left: 270px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;

}


#content h1 {
    margin: 25px;
    font-weight: bold;
    color: #333;
    margin-left: 20px;
    font-size: 20px;
}

#content p {
    margin: 20px;
}


/* Sidebar Left
—————————————————————————--*/
#sideLeft li {
display: inline;
}

* html #sideLeft a {
height: 1px;
}

#sideLeft ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	}

#sideLeft  h1{
	font-size: 20px;
	font-weight: bold;
	color: #cc3300;
	text-align: center;
	margin-top: 10px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 25px;
}

#sideLeft {
	width: 230px;
	margin: 15px;
	float:left;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FF0000;
	border-right-color: #FF0000;
	border-bottom-color: #FF0000;
	border-left-color: #FF0000;
	}

#sideLeft li a {
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #CC3300;
	}
#sideLeft .notopbrdr0xNone {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	}

#sideLeft li a:link, #sideLeft li a:visited {
	color: #CC3300;
	display: block;
	background-color: #FFFFFF;
	padding-top: 3px;
	padding-right: 0;
	padding-bottom: 3px;
	padding-left: 10px;
	}

#sideLeft li a:hover {
	color: #FFFFFF;
	background:  #CC3300;
	padding-top: 3px;
	padding-right: 0;
	padding-bottom: 3px;
	padding-left: 10px;
	}
/* Footer
—————————————————————————--*/
#footer {
	height: 40px;
	background: #BFF08E;
}

#pagiantion {
    margin: 40px;
    text-align: center;
}

#pagiantion a {
    font-size: 20px;
    text-decoration: underline;
    color:#08A9BD;
}

Для лучшего понимания ссылка на рисунок, и два кода HTML и CSS находятся в одной паке.

Надо что бы было так.

http://savepic.su/1357469.htm

Edited February 13, 2012 by resurs

Arinden · February 13, 2012

Я не очень понимаю, что Вы хотите изменить. Поясните пожалуйста.

resurs · February 13, 2012

Я не очень понимаю, что Вы хотите изменить. Поясните пожалуйста.

Пройдите по ссылке, которая в самом начале.

Там на рисунке показано, что текст, с прокруткой отображается не корректно, то есть он уходит по вертикали в низ. Да забыл сказать, что в ie6 выходит такой сбой.

Теперь пройдите по ссылке, которая внизу. Здесь на картинке показано как нужно.

Arinden · February 13, 2012

Посмотрите по моей ссылке, я взял Ваш код и проблем вроде не вижу. Или проблема только в IE6?

resurs · February 13, 2012

Посмотрите по моей ссылке, я взял Ваш код и проблем вроде не вижу. Или проблема только в IE6?

Проблема в ie6 остальные передовые браузеры отображают корректно.

Arinden · February 13, 2012

Проблема в ie6 остальные передовые браузеры отображают корректно.

А, понял. Я в IE6, увы, несилён..

resurs · February 13, 2012

http://savepic.su/1341086.htm

Ребята кто сможет подправить код для ie6...

Edited February 13, 2012 by resurs

klierik · February 13, 2012

ссылку на страницу давай. с ИЕ6 предугадать нельзя, щупать надо

resurs · February 13, 2012

ссылку на страницу давай. с ИЕ6 предугадать нельзя, щупать надо

Пока работаю с локальным сервером, а затем проверяю на всех браузерах.

Arinden · February 13, 2012

Я думаю решение проблемы кроется где-то в свойствах для #sideLeft И я бы попробовал #content сделать не margin-left, а float: right

Edited February 13, 2012 by Arinden

resurs · February 13, 2012

Я думаю решение проблемы кроется где-то в свойствах для #sideLeft И я бы попробовал #content сделать не margin-left, а float: right

С float: right помимо того что текст, с прокруткой, уходит в низ, он еще и уходит влево.

margin-left мне кажется трогать нельзя.

Если текст без прокрутки вставить в теги <div id="content"> то отображается корректно. А вот с прокруткой уходит в низ.

Тут надо как то прокрутку зафиксировать в <div id="content">

Заголовок та не уходит, он зафиксирован в content

#content h1 {
    margin: 25px;
    font-weight: bold;
    color: #333;
    margin-left: 20px;
    font-size: 20px;
}

Edited February 13, 2012 by resurs

resurs · February 13, 2012

Я думаю, что мешает меню <div class="sidebar" id="sideLeft">. Убирая меню с <div id="container"> все отображается корректно, но возникает вопрос как теперь выставить меню с левого края на против прокрутки...

Sign In

Выравнивание прокрутки текста по вертикали

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information