Форум Сайтостроение Веб-строительство

Нужна помощь в CSS

123 4
Justify
На сайте с 20.05.2008
Offline
138
Justify
#11

<style>

.style_0 { background: url(img2.jpg) 0 0 repeat-y; }

.style_1 { background: url(img1.jpg) 0 0 no-repeat; }

.style_2 { background: url(img3.jpg) 0 100% no-repeat; }

</style>

.....

<div class="style_0"><div class="style_1"><div class="style_2">

text....

</div></div></div>

....

самое примитивное...

не забудьте поставить размеры в цсс и отступы...

pelvis
На сайте с 01.09.2005
Offline
345
pelvis
#12

extaz, вижу, что юзаете стандартный файловый менеджер и что модреврайт :) А в чем вопрос? Ширина одинаковая, высота разная, текст в нужном блоке :) Стандарт :)

Продаю вывески. Задарма и задорого (https://www.ledsvetzavod.ru/)
extaz
На сайте с 23.02.2008
Offline
26
extaz
#13
pelvis:
текст в нужном блоке :) Стандарт :)

так вот именно что мне нужно чтобы текст был не в одном блоке, а на всех блоках причем: начинался

с верхушки проходил по второму блоку(в зависимости от кол-ва текста второй блок будет удлиняться ) и заканчивался в третьем.☝

"Самый надежный способ удвоить свои деньги - сложить их пополам и сунуть в бумажник."
pelvis
На сайте с 01.09.2005
Offline
345
pelvis
#14

extaz, простите уж старика, но тут все проще :) Верстка изначально не правильная. Сначала идет дивак с тектом, потом подвал, затем кепка. И в стилях прописываете сначала абсолют, потом релятив. Купите учебник. SEO верстка рулит :)

Justify
На сайте с 20.05.2008
Offline
138
Justify
#15
extaz:
так вот именно что мне нужно чтобы текст был не в одном блоке, а на всех блоках причем: начинался
с верхушки проходил по второму блоку(в зависимости от кол-ва текста второй блок будет удлиняться ) и заканчивался в третьем.☝

Так нильзя! Разве что отдельно по куска будеш пускать текст. Сделай как я писал, тяни фон (2), наложы (1) и (3) на него.. и сделай отступы... и будет идеально для тебя..

Justify добавил 26.05.2008 в 02:56

pelvis:
потом релятив.

Для чего тут relative??

Можно же проще ;)

extaz
На сайте с 23.02.2008
Offline
26
extaz
#16

pelvis, Justifyспасибо , правда не очень понял, но суть уловил. Видимо сказываются 3 часа ночи, утром со всем разберусь. Ещё раз благодарю.

pelvis
На сайте с 01.09.2005
Offline
345
pelvis
#17

Justify, http://deforum.ru/forum/viewtopic.php?t=63237 :) расскажите рецептик :)

Justify
На сайте с 20.05.2008
Offline
138
Justify
#18
pelvis:
Justify, http://deforum.ru/forum/viewtopic.php?t=63237 :) расскажите рецептик :)

В даном случае конечно, если не резиновый сайт должен получиться, тогда возможно такое и без абсолюте не обойтись. А если резиновый то думаю и абсолюте не поможет, надо будет применять стандартный порядок разстановки.. разве что шапку только будет возможность сделать ниже остальных блоков.

dkameleon
На сайте с 09.12.2005
Offline
386
dkameleon
#19

extaz, или например так:

.m-top {
    width:245px;
    background:url('../images/m-top2.gif') no-repeat top left;
}
.m-center {
    width:245px;
    background:url('../images/m-center.gif') repeat-y;
}
.m-bottom {
    width:245px;
    background:url('../images/m-bottom.gif') no-repeat bottom left;
}  

<div class="m-center">
<div class="m-bottom">
<div class="m-top">
текст
</div>
</div>
</div>

только фоны шапки и низа должны быть похоже непрозрачными, чтоб линиии не торчали.

самому внутреннему блоку падинги ещё можно добавить.

pelvis, простейшее решение для четвёртого часа ночи может быть следующим:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
.layout {
	width: 80%;
	margin: 0 auto;
	position: relative;
	min-width: 600px; /* need IE hack */
}
.inner {
	padding: 100px 200px 50px 300px;
	border: 1px solid #0f0;
}

.head {
	width: 100%;
	height: 100px;
	border: 1px solid red;
	position: absolute;
	top: 0;
	left: 0;
}
.foot {
	width: 100%;
	height: 50px;
	border: 1px solid red;
	position: absolute;
	bottom: 0;
	left: 0;
}
.left {
	width: 300px;
	border: 1px solid red;
	position: absolute;
	top: 100px;
	left: 0;
}
.right {
	width: 200px;
	border: 1px solid red;
	position: absolute;
	top: 100px;
	right: 0;
}



</style>
</head>
<body>

	<div class="layout">
		<div class="inner">
 текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
		</div>

		<div class="head">head</div>
		<div class="foot">foot</div>
		<div class="left">left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left </div>
		<div class="right">right right right right right right right right right right right right right right right right right right right right right right right right right right right right right </div>
	</div>


</body>
</html>

Есть ньюансы с налезанием футера если центральный текст короче боковых, но это обычное явление при абсолютном позиционировании. Поэтому надо или прекратить издеваться над разметкой или терпеть :)

Дизайн интерьера (http://balabukha.com/)
Justify
На сайте с 20.05.2008
Offline
138
Justify
#20
dkameleon:

только фоны шапки и низа должны быть похоже непрозрачными, чтоб линиии не торчали.
самому внутреннему блоку падинги ещё можно добавить.

Очень кстати даную графику сохранить в GIF'е ;) (низ и верх).

А то что будет тянуться (елемент 2) не забудьте в .PNG сохранить, желательно полупрозрачным))

123 4

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий