вертикальные линии

alex29 · February 12, 2008

Даже не знаю, в какой раздел писать...

Нужно создать вертикальную линию вдоль основного текста страницы, но так, чтобы она на Npx не доходила до начала и конца текста.

С CSS/таблицами линия получается, но она только вдоль всего текста.

Пробовал создать таблицу с тремя строками, указать размер верхней и нижней строки по Npx, но этот размер не учитывается, средняя строка все равно не занимает весь оставшийся размер страницы...

Как?

Спасибо :lol:

ZooY · February 12, 2008

Приведи пример страницы, а то вариантов решения масса, какой тебе подойдет надо смотеть по ситуации...

alex29 · February 12, 2008

Пример сводится к простой таблице. Таблица с двумя колонками, в первой - текстовая менюха, во второй - текст.

Сделать линию вдоль меню я могу, но хочу линию вдоль текста, с отступами, о которых я говорил...

Думаю, писать пример table не надо?

:lol:

maddogrts · February 12, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
div {width: 500px; background: url(g.gif) 0px 0 repeat-y;  display: block; margin-left: 200px;} /*1 пиксельный бордер*/
p {padding-left: 20px;  }
.top {background: url(g1.gif) 0px 0 no-repeat;} /*рисунок заданной высоты и фона*/
.bottom {background: url(g1.gif) 0px 100% no-repeat;}
-->
</style>
</head>

<body>

</body>
<div>
<p class="top">
Даже не знаю, в какой раздел писать...
Нужно создать вертикальную линию вдоль основного текста страницы, но так, чтобы она на Npx не доходила до начала и конца текста.
С CSS/таблицами линия получается, но она только вдоль всего текста.
</p>
<p>
Пробовал создать таблицу с тремя строками, указать размер верхней и нижней строки по Npx, но этот размер не учитывается, средняя строка все равно не занимает весь оставшийся размер страницы...
</p>
<p>
Даже не знаю, в какой раздел писать...
Нужно создать вертикальную линию вдоль основного текста страницы, но так, чтобы она на Npx не доходила до начала и конца текста.
С CSS/таблицами линия получается, но она только вдоль всего текста.
</p>
<p>
Пробовал создать таблицу с тремя строками, указать размер верхней и нижней строки по Npx, но этот размер не учитывается, средняя строка все равно не занимает весь оставшийся размер страницы...
Даже не знаю, в какой раздел писать...
</p>
<p>
Нужно создать вертикальную линию вдоль основного текста страницы, но так, чтобы она на Npx не доходила до начала и конца текста.
С CSS/таблицами линия получается, но она только вдоль всего текста.
Пробовал создать таблицу с тремя строками, указать размер верхней и нижней строки по Npx, но этот размер не учитывается, средняя строка все равно не занимает весь оставшийся размер страницы...
</p>
<p>
Даже не знаю, в какой раздел писать...
Нужно создать вертикальную линию вдоль основного текста страницы, но так, чтобы она на Npx не доходила до начала и конца текста.
С CSS/таблицами линия получается, но она только вдоль всего текста.
</p>
<p class="bottom">
Пробовал создать таблицу с тремя строками, указать размер верхней и нижней строки по Npx, но этот размер не учитывается, средняя строка все равно не занимает весь оставшийся размер страницы...
</p>
</div>
</html>

alex29 · February 12, 2008

maddogrts, спасибо, похоже.

Только неудобно, что надо не шаблон подредактировать, а править содержимое всех страниц...

А более универсально сделать нельзя? Чтобы сам текст не форматировать и не привязываться к нему.

Mordraug · February 12, 2008

ну и не привязывайся к тексту.. сделай сверху до текста:

<div class="top"></div>

и, соответственно, в конце после текста:

<div class="bottom"></div>

в контексте примера, указанного выше ? выглядеть будет примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
div.container {
	width:500px; 
	background:yellow url(g.gif) 0px 0 repeat-y;  /*1 пиксельный бордер, не забудь убрать цвет фона*/ 
	display: block; margin-left: 200px;

	} 

p {
	padding-left: 20px;
}

.top {
	height:10px;
	position:relative;
	top:30px; /*отступ сверху ? для того чтобы сместить верхний див на текст*/
	background:red url(g1.gif) 0px 0 no-repeat; /*рисунок заданной высоты (10px) и фона, не забудь убрать цвет фона*/
	} 

.bottom {
	height:10px;
	position:relative;
	bottom:30px; /*отступ снизу ? для того чтобы сместить нижний див на текст*/
	background:blue url(g1.gif) 0px 100% no-repeat; /*не забудь убрать цвет фона*/
	}
-->
</style>
</head>

<body>

</body>
<div class="container">
<div class="top"></div>
<p>
Даже не знаю, в какой раздел писать...
Нужно создать вертикальную линию вдоль основного текста страницы, но так, чтобы она на Npx не доходила до начала и конца текста.
С CSS/таблицами линия получается, но она только вдоль всего текста.
</p>
<p>
Пробовал создать таблицу с тремя строками, указать размер верхней и нижней строки по Npx, но этот размер не учитывается, средняя строка все равно не занимает весь оставшийся размер страницы...
</p>
<p>
Даже не знаю, в какой раздел писать...
Нужно создать вертикальную линию вдоль основного текста страницы, но так, чтобы она на Npx не доходила до начала и конца текста.
С CSS/таблицами линия получается, но она только вдоль всего текста.
</p>
<p>
Пробовал создать таблицу с тремя строками, указать размер верхней и нижней строки по Npx, но этот размер не учитывается, средняя строка все равно не занимает весь оставшийся размер страницы...
Даже не знаю, в какой раздел писать...
</p>
<p>
Нужно создать вертикальную линию вдоль основного текста страницы, но так, чтобы она на Npx не доходила до начала и конца текста.
С CSS/таблицами линия получается, но она только вдоль всего текста.
Пробовал создать таблицу с тремя строками, указать размер верхней и нижней строки по Npx, но этот размер не учитывается, средняя строка все равно не занимает весь оставшийся размер страницы...
</p>
<p>
Даже не знаю, в какой раздел писать...
Нужно создать вертикальную линию вдоль основного текста страницы, но так, чтобы она на Npx не доходила до начала и конца текста.
С CSS/таблицами линия получается, но она только вдоль всего текста.
</p>
<p>
Пробовал создать таблицу с тремя строками, указать размер верхней и нижней строки по Npx, но этот размер не учитывается, средняя строка все равно не занимает весь оставшийся размер страницы...
</p>
<div class="bottom"></div>
</div>
</html>

запусти этот код и посмотри ? увидешь размеченную цветами структуру.. тоесть наглядно как это выглядит..

Sign In

вертикальные линии

Question

alex29

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

ZooY

Link to comment

Share on other sites

alex29

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

alex29

Link to comment

Share on other sites

Mordraug

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information