Перейти к содержимому


× Быстрый вопрос
Пользователь месяца
dos1k dos1k 1-й за Май
Очков активности: 1 194 28 тем, 115 сообщений, 4 балла репутации
Сайт: dos1k.ru
ТОП самых активных за этот месяц
  • Фотография Olya23
    #1

    Olya23
    Очков активности: 1278 3 темы, 133 сообщения, 6 баллов репутации

  • Фотография Rodiola
    #2

    Rodiola (rukodelkovo.ru)
    Очков активности: 693 0 тем, 77 сообщений, 6 баллов репутации

  • Фотография FIvYUr
    #3

    FIvYUr (catblogger.ru)
    Очков активности: 198 0 тем, 44 сообщения, 3 балла репутации

  • Фотография agrx
    #4

    agrx (key-assort.ru)
    Очков активности: 103.5 0 тем, 23 сообщения, 3 балла репутации

  • Фотография maxnik
    #5

    maxnik (konovalovpavel.ru)
    Очков активности: 99 0 тем, 22 сообщения, 3 балла репутации

  • Фотография fedornabilkin
    #6

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 60 0 тем, 20 сообщений, 2 балла репутации

  • Фотография BLIK
    #7

    BLIK
    Очков активности: 54 Вне конкурса за определение пользователя месяца

  • Фотография re-search
    #8

    re-search
    Очков активности: 51 7 тем, 13 сообщений, 1 балл репутации

  • Фотография Artos
    #9

    Artos
    Очков активности: 45 0 тем, 10 сообщений, 3 балла репутации

  • Фотография Андрей WPMasterKZ
    #10

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 39 0 тем, 26 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.06.2019
  • Яндекс выдача: 24.06.2019
Топ 5 участников по репутации


Про растягивающиеся верстку

#1 shtil

shtil
  • Неактивные
  • 50 сообщений
  • Репутация: 0
0

Отправлено 14 Июнь 2009 - 17:41

в общем есть у меня нарисованный дизайн, вот его схема:

Изображение

допустим, "тело" имеет большой обьем др. элементов. Как зделать так, что бы, когда текста в "теле" было больше, чем его размеры - "тело" увеличивалось, в вместе с ним добавлялись вниз элементы "стеночка 1 и 2"
т.е. с добавлением чего-либо сайт увеличивался по-вертикали

 

 

  • 0

#2 v1ex

v1ex
  • Неактивные
  • 225 сообщений
  • Репутация: 0

Отправлено 14 Июнь 2009 - 17:59

Если верстка табличная, то просто три колонки и все.
А если блочная, то нужно макет посмотреть, т.к. физически тянуть без js сразу несколько блоков не получится, можно только визуально "обмануть", что все блоки тянуться.
  • 0

#3 shtil

shtil
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 14 Июнь 2009 - 18:02

Если верстка табличная, то просто три колонки и все.
А если блочная, то нужно макет посмотреть, т.к. физически тянуть без js сразу несколько блоков не получится, можно только визуально "обмануть", что все блоки тянуться.

делаю на таблицах, можно подробнее про это :)
  • 0

#4 v1ex

v1ex
  • Неактивные
  • 225 сообщений
  • Репутация: 0

Отправлено 14 Июнь 2009 - 18:06

HTML:
<table class="main">
  <tr><td class="header" colspan="3">шапка</td></tr>
  <tr><td class="left">Левый блок</td><td class="center">Тело</td><td class="right">Правый блок</td></tr>
</table>
CSS:
.main {
  width: 100%;
}
.main td {
  vertical-align: top;
}
.left {
  width: 200px;
}
.right {
  width: 200px;
}
Все, все ваши колонки тянуться по вертикали.
  • 0

#5 shtil

shtil
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 14 Июнь 2009 - 18:13

HTML:

<table class="main">
  <tr><td class="header" colspan="3">шапка</td></tr>
  <tr><td class="left">Левый блок</td><td class="center">Тело</td><td class="right">Правый блок</td></tr>
</table>
CSS:
.main {
  width: 100%;
}
.main td {
  vertical-align: top;
}
.left {
  width: 200px;
}
.right {
  width: 200px;
}
Все, все ваши колонки тянуться по вертикали.

спасибо :)
  • 0

#6 ilyazh

ilyazh
  • Неактивные
  • 356 сообщений
  • Репутация: 1

Отправлено 15 Июнь 2009 - 07:31

Vlad: Ошибаетесь. На блоках, без явы, всё прекрасно тянется - учите css. Иначе, как по вашему сделаны миллионы сайтов в инетрнете, которые тянуться без явы? =)
  • 0

#7 shtil

shtil
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 15 Июнь 2009 - 10:24

почему-то не получается у меня :)

вот мой код:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="759" height="884" border="0" cellpadding="0" cellspacing="0" align=center>
	<tr>
		<td colspan="3">
			<img src="images/image_01.gif" width="759" height="533" alt=""></td>
	</tr>
	<tr>
		<td><img src="images/image_02.gif" width="38" height="303" alt=""></td> //первая стеночка
		<td width="673" height="303" bgcolor="#FFFFFF">//тело
			</td>
		<td><img src="images/image_04.gif" width="48" height="303" alt=""></td>//вторая стеночка
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/image_05.gif" width="759" height="48" alt=""></td>
	</tr>
</table>
</body>
</html>
помогите разобраться :)
  • 0

#8 v1ex

v1ex
  • Неактивные
  • 225 сообщений
  • Репутация: 0

Отправлено 15 Июнь 2009 - 10:42

Vlad: Ошибаетесь. На блоках, без явы, всё прекрасно тянется - учите css. Иначе, как по вашему сделаны миллионы сайтов в инетрнете, которые тянуться без явы? =)

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

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

И еще раз повторюсь, что физически блоки на одном уровне не могут растягиваться, это "обман зрения"

учите css

Бугога, улыбнуло :)

почему-то не получается у меня :(

вот мой код:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="759" height="884" border="0" cellpadding="0" cellspacing="0" align=center>
	<tr>
		<td colspan="3">
			<img src="images/image_01.gif" width="759" height="533" alt=""></td>
	</tr>
	<tr>
		<td><img src="images/image_02.gif" width="38" height="303" alt=""></td> //первая стеночка
		<td width="673" height="303" bgcolor="#FFFFFF">//тело
			</td>
		<td><img src="images/image_04.gif" width="48" height="303" alt=""></td>//вторая стеночка
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/image_05.gif" width="759" height="48" alt=""></td>
	</tr>
</table>
</body>
</html>
помогите разобраться :)

Упс, а что вы подразумевали под стеночкой? Я так понял, что вы подразумевали два блока с каким-либо контентом, а вы имели ввиду бекгроунд?
Если бекроунд, то это можно вообще одним слоем сделать :( Предположим у нас "стеночки" - это тень, то берем картинку на подобии следующей:
Изображение
Картинка - 820x25, синие по середине - цвет контента, по краям тень - "стеночки", одна тень - 10px.
HTML
<div class="box">
тра-та-та
</div>
CSS
.box {
  background-image: url(bg.png);
  background-position: left top;
  background-repeat: repeat-y;
  margin: auto;
  padding: 0px 10px;
  width: 800px;
}

  • 0

#9 shtil

shtil
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 15 Июнь 2009 - 10:49

щас пойду пробывать :)
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru