Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / ДИВная верстка, проба пера :) / 25 сообщений из 26, страница 1 из 2
  1  все
04.05.2008, 09:09
    #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, 14:32
    #35292231
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
есть несколько вопросов к макету:
1. информация, статистика, итоги - это три колонки, такие что из суммарная ширина не всегда равна ширине экрана, или это ака меню?
2. Автор и пр. по низу экрана - всегда внизу экрана или только если контента меньше, чем высота экрана? (в первом случае легко решается с помощью position:absolute, во втором - будут проблемы с кроссбраузерностью).
3. с какой целью задано display:inline у дивов? В итоге из div'а получается почти что span, а для верстки колонками это отрицательный эффект. Например, inline элементам даже ширину нельзя задать (это я не про ИЕ, а про ФФ и Оперу, которые в этом придерживаются спецификации CSS2).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.05.2008, 15:19
    #35292362
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
illion1. информация, статистика, итоги - это три колонки, такие что из суммарная ширина не всегда равна ширине экрана
Именно так.
illion2. Автор и пр. по низу экрана - всегда внизу экрана ... легко решается с помощью position:absolute
Именно так. Но будет ли она внизу при сворачивании в окно, а так же на разных разрешениях?
illion3. с какой целью задано display:inline у дивов?
Это я в книге просветился. Там было написано "для ИЕ онли"... Это де помогает ему правильно чего-то там расчитывать для текста.

Так какие варианты по моему примерчику?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.05.2008, 15:39
    #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:40
    #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:51
    #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, 16:07
    #35292500
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
ShSergeА float: left; зачем?
Чтобы изменить их т.с. порядок расположения на экране
ShSergeЕсли убрать
Тогда они будут друг под другом
ShSergeпрокатит.
Не-е-е...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.05.2008, 16:11
    #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:15
    #35292523
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
illionс какой целью задано display:inline у дивов? В итоге из div'а получается почти что span
Так span не блочный тег... Им выделяют часть текста. А div - блочный. Т.ч. тут наверное такое сравнение не подойдет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.05.2008, 16:17
    #35292534
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
ShSergeА чего ж у меня работает?
Извини. Я больше твоего удалил в css... Сейчас подвергну твой код глубочайшему анализу.
Потом отпишусь...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.05.2008, 16:20
    #35292546
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
krvsa illionс какой целью задано display:inline у дивов? В итоге из div'а получается почти что span
Так span не блочный тег... Им выделяют часть текста. А div - блочный. Т.ч. тут наверное такое сравнение не подойдет.
А вот чего я нашел по поводу инлайн:
автор
Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.05.2008, 16:26
    #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:28
    #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:41
    #35292600
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
illionлогичнее
Код: plaintext
1.
2.
position:absolute;
bottom: 0 ;
width: 100 %;

Да, так гораздо лучше!
illionнасчет посередине - это попробовать надо.
Так мне уже ShSerge подсоветовал как это получить. Так вот там без дисплей инлине никак... Может конечно есть еще варианты... Интересно было бы посмотреть.
illionНо по-любому у колонок должна быть задана хоть какая-то ширина
Пока тренируюсь на ситуации "по содержимому"...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.05.2008, 16:47
    #35292622
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
Если как пишет illion - заменить дивы спанами - такой же результат будет. Тольно инлайн уже не нужно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.05.2008, 16:49
    #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
| Ответить | Цитировать | Написать  
05.05.2008, 00:25
    #35293182
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
krvsa illionнасчет посередине - это попробовать надо.
Так мне уже ShSerge подсоветовал как это получить. Так вот там без дисплей инлине никак...
млин, как по заколдованному кругу... Да, можно сделать выравнивание с помощью <center> или text-align:center, но только если откажешься от float. Откажешься от float - НЕ получишь колонок. Не получишь колонок - нафига тебе это надо тогда.

krvsa illionНо по-любому у колонок должна быть задана хоть какая-то ширина
Пока тренируюсь на ситуации "по содержимому"...
удачи. Это таблица ширину между колонками по-братски делит. А у дивов - кто успел, тот и съел. И даже expression здесь не помогут.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.05.2008, 08:25
    #35293322
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
illionесли откажешься от float. Откажешься от float - НЕ получишь колонок.
А как тогда с флоат сделать по центру?
illionЭто таблица ширину между колонками по-братски делит. А у дивов - кто успел, тот и съел.
Учту. Я этого пока не знал...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.05.2008, 12:44
    #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:56
    #35294128
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
а еще есть смутные сомненья насчет #aft. По-моему не все так просто c position:absolute. Если контента в колонках будет больше высоты экрана, то колонки потянутся, а #aft останется висеть там, где его приклеили. Возможно надо задавать прокрутку на #cont.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.05.2008, 13:05
    #35294157
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
illionЕсли контента в колонках будет больше высоты экрана, то колонки потянутся, а #aft останется висеть там, где его приклеили.
Так это меня устраивает... В этом случае будет появляться "лифт" у окна браузера?
illionВозможно надо задавать прокрутку на #cont.
Как это делается?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.05.2008, 13:18
    #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:30
    #35294240
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
illionкогда будешь скроллить вниз, то #aft будет не всегда внизу висеть, а останется прибитым к тому месту, где он был
Сейчас посмотрел как это выглядит и расстроился...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.05.2008, 13:31
    #35294248
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
illionЭто таблица ширину между колонками по-братски делит. А у дивов - кто успел, тот и съел.
Сейчас добавил еще текста в ДИВы и прослезился
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.05.2008, 14:54
    #35294532
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ДИВная верстка, проба пера :)
по-моему настал момент осознания надобности перехода ко смешанному дизайну :-). #head, #cont, #aft - position:absolute, height:[значения], #cont - overflow:auto, внутри #cont - трехколоночная таблица. Как тебе?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / ДИВная верстка, проба пера :) / 25 сообщений из 26, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 345ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1456519]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 33ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 58ms
get tp. blocked users:
 2ms
others: 212ms
total:  345ms
x
x
Закрыть


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