Jump to content
  • 0

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


resurs
 Share

Question

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

В который раз не могу выставить в нужное место блок 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 by resurs
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

Я думаю решение проблемы кроется где-то в свойствах для #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 by resurs
Link to comment
Share on other sites

  • 0

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

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

×
×
  • 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