ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / ДИВная верстка, проба пера :)
26 сообщений из 26, показаны все 2 страниц
  все  
ДИВная верстка, проба пера :)
    #35291529
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Пробую овладеть ДИВной версткой... Но не все получается чего бы хотелось...
Вот примерчик...
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<html>
<head>
<style text='text/css'>
#all {
}
h1 {
	text-align: center;
}
#cont {
}
#info {
	float: left;
	display: inline;
}
#stat {
	float: left;
	display: inline;
	clear: right;
}
#itg {
	float: left;
	display: inline;
	clear: right;
}
#aft {
	clear: both;
	text-align: right;
	font-size:  50 %;
}
</style>
</head>
<body>
<div id='all'>
	<h1>Заголовок</h1>
	<div id='cont'>
		<div id='info'>Информация
		</div>
		<div id='stat'>Статистика
		</div>
		<div id='itg'>Итоги
		</div>
	</div>
	<div id='aft'>Автор и пр...
	</div>
</div>
</body>
</html>
Как например сделать чтобы "Информация", "Стаистика" и "Итоги" были по центру экрана?
Как сделать чтобы "Автор и пр..." были по низу окна?

У нас все делается в ИЕ... Т.ч. кросбраузерность для начала не очень важна. Но и к ней мы тоже вернемся.
----------
Cache for Windows (Intel) 2007.1 (Build 369) Fri Jun 15 2007 15:25:42 EDT
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
04.05.2008, 09:09
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292231
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
есть несколько вопросов к макету:
1. информация, статистика, итоги - это три колонки, такие что из суммарная ширина не всегда равна ширине экрана, или это ака меню?
2. Автор и пр. по низу экрана - всегда внизу экрана или только если контента меньше, чем высота экрана? (в первом случае легко решается с помощью position:absolute, во втором - будут проблемы с кроссбраузерностью).
3. с какой целью задано display:inline у дивов? В итоге из div'а получается почти что span, а для верстки колонками это отрицательный эффект. Например, inline элементам даже ширину нельзя задать (это я не про ИЕ, а про ФФ и Оперу, которые в этом придерживаются спецификации CSS2).
...
Рейтинг: 0 / 0
04.05.2008, 14:32
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292362
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illion1. информация, статистика, итоги - это три колонки, такие что из суммарная ширина не всегда равна ширине экрана
Именно так.
illion2. Автор и пр. по низу экрана - всегда внизу экрана ... легко решается с помощью position:absolute
Именно так. Но будет ли она внизу при сворачивании в окно, а так же на разных разрешениях?
illion3. с какой целью задано display:inline у дивов?
Это я в книге просветился. Там было написано "для ИЕ онли"... Это де помогает ему правильно чего-то там расчитывать для текста.

Так какие варианты по моему примерчику?
...
Рейтинг: 0 / 0
04.05.2008, 15:19
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292422
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionв первом случае легко решается с помощью position:absolute
Попробовал так...
[SRC#aft {
clear: both;
text-align: right;
font-size: 50%;
position: absolute;
top: 96%;
width: 100%;
}[/src]Вроде то, что надо. А как быть с "посередине"?
...
Рейтинг: 0 / 0
04.05.2008, 15:39
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292424
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
#aft {
	clear: both;
	text-align: right;
	font-size:  50 %;
	position: absolute; 
	top:  98 %;
	width:  100 %;
}
----------
Cache for Windows (Intel) 2007.1 (Build 369) Fri Jun 15 2007 15:25:42 EDT
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
04.05.2008, 15:40
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292452
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
А float: left; зачем?
Если убрать
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
<center>
		<div id='info'>Информация
		</div>
		<div id='stat'>Статистика
		</div>
		<div id='itg'>Итоги
		</div>
</center>
	</div>
прокатит.
...
Рейтинг: 0 / 0
04.05.2008, 15:51
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292500
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ShSergeА float: left; зачем?
Чтобы изменить их т.с. порядок расположения на экране
ShSergeЕсли убрать
Тогда они будут друг под другом
ShSergeпрокатит.
Не-е-е...
...
Рейтинг: 0 / 0
04.05.2008, 16:07
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292510
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
А чего ж у меня работает?
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
<html>
<head>
<style>
#all {
}
h1 {
	text-align: center;
}
#cont {
}
#info {

	display: inline;
}
#stat {

	display: inline;
	clear: right;
}
#itg {


	display: inline;
	clear: right;
}
#aft {
	clear: both;
	text-align: right;
	font-size:  50 %;
	position: absolute; 
	top:  98 %;
	width:  100 %;
}
</style>

</head>
<body>
<div id='all'>
	<h1>Заголовок</h1>
	<div id='cont'>
<center>
		<div id='info'>Информация
		</div>
		<div id='stat'>Статистика
		</div>
		<div id='itg'>Итоги
		</div>
</center>
	</div>
	<div id='aft'>Автор и пр...
	</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
04.05.2008, 16:11
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292523
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionс какой целью задано display:inline у дивов? В итоге из div'а получается почти что span
Так span не блочный тег... Им выделяют часть текста. А div - блочный. Т.ч. тут наверное такое сравнение не подойдет.
...
Рейтинг: 0 / 0
04.05.2008, 16:15
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292534
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ShSergeА чего ж у меня работает?
Извини. Я больше твоего удалил в css... Сейчас подвергну твой код глубочайшему анализу.
Потом отпишусь...
...
Рейтинг: 0 / 0
04.05.2008, 16:17
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292546
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
krvsa illionс какой целью задано display:inline у дивов? В итоге из div'а получается почти что span
Так span не блочный тег... Им выделяют часть текста. А div - блочный. Т.ч. тут наверное такое сравнение не подойдет.
А вот чего я нашел по поводу инлайн:
автор
Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
...
Рейтинг: 0 / 0
04.05.2008, 16:20
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292555
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ShSergeА вот чего я нашел по поводу инлайн
При попытке их убрать в варианте
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<html>
<head>
<style>
#all {
}
h1 {
	text-align: center;
}
#cont {
}
#info {
	display: inline;
}
#stat {
	display: inline;
	clear: right;
}
#itg {
	display: inline;
	clear: right;
}
#aft {
	clear: both;
	text-align: right;
	font-size:  50 %;
	position: absolute; 
	top:  98 %;
	width:  100 %;
}
</style>

</head>
<body>
<div id='all'>
	<h1>Заголовок</h1>
	<center>
	<div id='cont'>
		<div id='info'>Информация
		</div>
		<div id='stat'>Статистика
		</div>
		<div id='itg'>Итоги
		</div>
	</div>
	</center>
	<div id='aft'>Автор и пр...
	</div>
</div>
</body>
</html>
ДИВы выстраиваются один под другим... Сталобыть тут мне такое нужно.
...
Рейтинг: 0 / 0
04.05.2008, 16:26
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292561
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsa
Код: plaintext
1.
2.
3.
4.
#aft {
	position: absolute; 
	top:  98 %;
	width:  100 %;
}

логичнее
Код: plaintext
1.
2.
position:absolute;
bottom: 0 ;
width: 100 %;

krvsaТак span не блочный тег... Им выделяют часть текста. А div - блочный. Т.ч. тут наверное такое сравнение не подойдет.
так вот и я о том же. Когда диву ты задаешь display:inline он перестает быть блочным и превращается в inline-элемент ака спан.

насчет посередине - это попробовать надо. Но по-любому у колонок должна быть задана хоть какая-то ширина, хоть в %, хоть в px, иначе первая колонка распластается почти на весь экран, если много текста в ней будет. А если ширину задавать будешь - то там и отступы можно посчитать.
...
Рейтинг: 0 / 0
04.05.2008, 16:28
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292600
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionлогичнее
Код: plaintext
1.
2.
position:absolute;
bottom: 0 ;
width: 100 %;

Да, так гораздо лучше!
illionнасчет посередине - это попробовать надо.
Так мне уже ShSerge подсоветовал как это получить. Так вот там без дисплей инлине никак... Может конечно есть еще варианты... Интересно было бы посмотреть.
illionНо по-любому у колонок должна быть задана хоть какая-то ширина
Пока тренируюсь на ситуации "по содержимому"...
...
Рейтинг: 0 / 0
04.05.2008, 16:41
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292622
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Если как пишет illion - заменить дивы спанами - такой же результат будет. Тольно инлайн уже не нужно.
...
Рейтинг: 0 / 0
04.05.2008, 16:47
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35292628
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Это я уже понял...
----------
Cache for Windows (Intel) 2007.1 (Build 369) Fri Jun 15 2007 15:25:42 EDT
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
04.05.2008, 16:49
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35293182
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsa illionнасчет посередине - это попробовать надо.
Так мне уже ShSerge подсоветовал как это получить. Так вот там без дисплей инлине никак...
млин, как по заколдованному кругу... Да, можно сделать выравнивание с помощью <center> или text-align:center, но только если откажешься от float. Откажешься от float - НЕ получишь колонок. Не получишь колонок - нафига тебе это надо тогда.

krvsa illionНо по-любому у колонок должна быть задана хоть какая-то ширина
Пока тренируюсь на ситуации "по содержимому"...
удачи. Это таблица ширину между колонками по-братски делит. А у дивов - кто успел, тот и съел. И даже expression здесь не помогут.
...
Рейтинг: 0 / 0
05.05.2008, 00:25
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35293322
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionесли откажешься от float. Откажешься от float - НЕ получишь колонок.
А как тогда с флоат сделать по центру?
illionЭто таблица ширину между колонками по-братски делит. А у дивов - кто успел, тот и съел.
Учту. Я этого пока не знал...
...
Рейтинг: 0 / 0
05.05.2008, 08:25
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35294090
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsaА как тогда с флоат сделать по центру?
я умею только отступами. float:left подразумевает, что элемент будет спозиционирован на самое лево родительского элемента, что противоречит идее центрирования. Опыты показали, что float вообще как бы исключает блок из обычого потока данных, и div id='cont' остается как бы пустым:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<style>
#cont { text-align: center; border:1px solid black; }
#info { float: left; border:1px solid green; }
#stat { float: left; clear: right;  border:1px solid yellow; }
#itg { 	float: left; clear: right;  border:1px solid blue; }
</style>
<div id='cont'>
		<div id='info'>Информация Информация </div>
		<div id='stat'>Статистика Статистика </div>
		<div id='itg'>Итоги	</div>
</div>

а насчет отступов - эта идея тесно связана с шириной колонок. Например:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<style>
#cont { text-align: center; margin-left: 10 %; border:1px solid black; }
#info { float: left; width: 20 %; border:1px solid green; }
#stat { float: left; width: 40 %; clear: right;  border:1px solid yellow; }
#itg  {	float: left; width: 20 %; clear: right;  border:1px solid blue; }
</style>
<div id='cont'>
		<div id='info'>Информация Информация </div>
		<div id='stat'>Статистика Статистика </div>
		<div id='itg'>Итоги	</div>
</div>
...
Рейтинг: 0 / 0
05.05.2008, 12:44
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35294128
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
а еще есть смутные сомненья насчет #aft. По-моему не все так просто c position:absolute. Если контента в колонках будет больше высоты экрана, то колонки потянутся, а #aft останется висеть там, где его приклеили. Возможно надо задавать прокрутку на #cont.
...
Рейтинг: 0 / 0
05.05.2008, 12:56
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35294157
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionЕсли контента в колонках будет больше высоты экрана, то колонки потянутся, а #aft останется висеть там, где его приклеили.
Так это меня устраивает... В этом случае будет появляться "лифт" у окна браузера?
illionВозможно надо задавать прокрутку на #cont.
Как это делается?
...
Рейтинг: 0 / 0
05.05.2008, 13:05
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35294202
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsaТак это меня устраивает... В этом случае будет появляться "лифт" у окна браузера?
да. И вот когда будешь скроллить вниз, то #aft будет не всегда внизу висеть, а останется прибитым к тому месту, где он был (относительно контента в изначальном положении).

krvsa illionВозможно надо задавать прокрутку на #cont.
Как это делается?
Код: plaintext
1.
2.
* {margin: 0 ;}
...
#cont { height: 98 %; overflow:auto; border:1px solid black;}
...
Рейтинг: 0 / 0
05.05.2008, 13:18
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35294240
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionкогда будешь скроллить вниз, то #aft будет не всегда внизу висеть, а останется прибитым к тому месту, где он был
Сейчас посмотрел как это выглядит и расстроился...
...
Рейтинг: 0 / 0
05.05.2008, 13:30
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35294248
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionЭто таблица ширину между колонками по-братски делит. А у дивов - кто успел, тот и съел.
Сейчас добавил еще текста в ДИВы и прослезился
...
Рейтинг: 0 / 0
05.05.2008, 13:31
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35294532
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
по-моему настал момент осознания надобности перехода ко смешанному дизайну :-). #head, #cont, #aft - position:absolute, height:[значения], #cont - overflow:auto, внутри #cont - трехколоночная таблица. Как тебе?
...
Рейтинг: 0 / 0
05.05.2008, 14:54
| Ответить | Цитировать | Написать  
ДИВная верстка, проба пера :)
    #35294728
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionпо-моему настал момент осознания надобности перехода ко смешанному дизайну :-).
...
трехколоночная таблица. Как тебе?
Тут дело какое...
У меня просто есть задачка сделаная на таблицах, т.с. по-старинке. А тут все ДИВы, ДИВы... Чую пора перестраиваться! Вот и стал пробовать сделать сделаное но на ДИВах.
Поднабраться опыта... Узнать хоть немного что к чему - вот и решил с сообчеством пообщаться... Потренироваться сам, а может и еще кого заинтересовать...
...
Рейтинг: 0 / 0
05.05.2008, 15:50
| Ответить | Цитировать | Написать  
26 сообщений из 26, показаны все 2 страниц
  все  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / ДИВная верстка, проба пера :)
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?all=1&fid=22&tid=1456519]:
 0ms
get settings:
 10ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 198ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 40ms
get tp. blocked users:
 1ms
others: 215ms
total:  491ms
созд. / загр.: 491ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]