Сложная верстка на HTML - Веб-программирование

Alexxxander · 09.02.2007, 11:07

Подскажите, возможно ли такое сделать с помощью HTML и CSS? Так чтобы это корректно смотрелось в разных браузерах. И желательно без графики и таблиц.

Псих · 09.02.2007, 11:59

Alexxxander, врядли. с таблицами можно, без врядли. сомниваюсь, что в css есть подобный элемент списка, чтобы его просто выставить (квадратик). А остальное, в общем-то реализуемо

xroot · 09.02.2007, 14:16

Alexxxander, а сохранить страницу с css не пробовал?
давай сюда код может че и придумаем?

хотя я тек думаю на твоем примере без джава-скрипт не обошлось

Псих · 09.02.2007, 14:41

agRav, а причем тут js к верстке?

xroot · 09.02.2007, 14:57

Псих, присмотрись к меню мне кажеться там и
*.js работает в связке динамик html так сказать
ведь нет сомнения что дерево меню раскрываеться и закрываеться

Alexxxander · 09.02.2007, 15:15

Цитата:

Сообщение от agRav

ведь нет сомнения что дерево меню раскрываеться и закрываеться

этого не требуется.

Нужно просто сделать нечто подобное, возможно, с небольшими отклонениями.

Цитата:

Сообщение от agRav

а сохранить страницу с css не пробовал?
давай сюда код может че и придумаем?

Такой страницы нет. Ее нужно сделать.

xroot · 09.02.2007, 16:18

ну берем значит и рисуем квадратик с элеметном уголок

и в css в свойствах элемента li прописываем эту каринку
далее перед каждым линком в html прописываем, <li>

ну а заголовки можно так

Код:

.buttred {
background: #770033;
font-family:Arial; 
font-weight:bold; 
text-decoration:none; 
text-align:center; 
font-size:12; 
width:90; 
color:white;
font-size:12px;

ну подправишь цвета , длинну

вроде так

Hubbitus · 10.02.2007, 02:12

Цитата:

Сообщение от Alexxxander

И желательно без графики и таблиц.

Цитата:

Сообщение от agRav

ну берем значит и рисуем квадратик с элеметном уголок

А на сколько желательно, это принципиально? просто в принципе, можно конечно извратиться, особенно с абсолютным позиционированием, и квадратики DIV'ами закрашенными сделать и с полосками так поступить... только действительно ли нужен такой изврат?

xroot · 10.02.2007, 19:35

я извиняюсь за невнимательность
ну можно и кнопки buttons под квадратики замаскировать
но вот только как сказал:

Цитата:

Сообщение от Hubbitus

только действительно ли нужен такой изврат?

в чем идея ? может что полегче и получше придумаем?

Alexxxander · 12.02.2007, 17:01

Цитата:

Сообщение от agRav

в чем идея ? может что полегче и получше придумаем?

Идея именно в этом: сделать с помощью html и css такую верстку. Лучше конечно, не использовать неправильные конструкции (типа buttons).
Повторяю: ничего раскрывать не должно — обычный статичный текст.

Насколько я понимаю, если сделать в списочным символом графический элемент, при изменении размера шрифта (интерлинъяжа) линия разорвется. Не хотелось бы привязываться к размеру шрифта.

Есть еще один вариант верстки, он попроще:

Hubbitus · 14.02.2007, 01:29

Цитата:

Сообщение от Alexxxander

Есть еще один вариант вёрстки, он попроще:

Ну попроще, сделаете сами. А пример реализации первоначального вот:

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
div	{padding: 0; margin: 0;}

#maindiv	{
	width: 200;
	font-family: Arial;
	font-size: 13px;
	line-height: 1.5em;
}

#maindiv_grey	{
	width: 200;
	font-family: Arial;
	font-size: 13px;
	line-height: 1.5em;
}

#d_header, #d_header_red	{
	width: 100;
	height: 1.5em;
	color: white;
	text-align: center;
	background-color: #949494;
	vertical-align: middle;
	}

#d_header_red	{
	background-color: #7B002F;
	}

#v_line	{
	background-color: #7B002F;
	width: 1px;
	height: 2.42em;
	margin-top: -1.5em;
	padding: 0;
	margin-left: 3px;
	float: left
}

#maindiv_grey #v_line	{
	background-color: #949494;
}

#h_line	{
	border-top: 1px solid #7B002F;
	font-size: 0;
	width: 8px;
	height: 1px;
	margin-top: 11px;
	float: left;
	background-color: white;
}

#maindiv_grey #h_line	{
	border-top: 1px solid #949494;
}

#quad	{
	background-color: #949494;
	width: 9px;
	height: 9px;
	margin-top: 7px;
	float: left;
	font-size: 0; /*Долбанный IE*/
}

#d_item	{
	margin-left: 1.7em;
	color: #949494;
	font-weight: bold
	}

#sub_item	{
	margin-left: 1.4em;
	font-size: 10px;
	line-height: 1em
	}
</style>
</head>

<body>
<div id="maindiv_grey">
	<div id="d_header">образование</div>
	<div id="v_line"></div>
	<div id="h_line"></div><div id="quad"></div>

	<div id="d_item">новости</div>
</div>

<div id="maindiv">
	<div id="d_header_red">бизнес</div>
	
	<div id="v_line"></div>
	<div id="h_line"></div><div id="quad"></div>
	<div id="d_item">новости компаний</div>

	<div id="v_line"></div>
	<div id="h_line"></div><div id="quad"></div>
	<div id="d_item">кросс-культура</div>
	<div id="sub_item">Если Ваш партнер - un`italiano vero</div>

	<div id="v_line"></div>
	<div id="h_line"></div><div id="quad"></div>
	<div id="d_item">маркетинг</div>

	<div id="sub_item">"Звездные врата" большого рынка</div>

	<div id="v_line"></div>
	<div id="h_line"></div><div id="quad"></div>
	<div id="d_item">менеджмент</div>
	<div id="sub_item">Удержать дистанцию!</div>
</div>

</body>
</html>

Примеры (долго лежать не будут, по крайней мере не гарантирую)
http://ru.bir.ru/imho/div/divS.htm по моему мнению более "правильный" вариант, потому что используются единицы измерения относительно величины используемого текста, однако, долбанный IE не отображает это как задумано. В нем почему-то нельзя сделать высоту div меньше строчки текста, даже если в нем нету никакого текста... по моему бред, но так уж есть. Протестировано в ФФ 2.0.0.1 и Опера 9.10

http://ru.bir.ru/imho/div/divS_IE.htm Вариант "менее правильный" (см выше), в коде выше именно он располагается. Зато отображается одинаково к браузерам выше еще и в ИЕ 6.0

Alexxxander · 14.02.2007, 09:37

Большое спасибо за пример!

Но увы! В IE, кроме прочего, если поставить «Не учитывать размеры шрифтов...», верстка «поедет».

Hubbitus · 14.02.2007, 13:41

Если в любом другом браузере размер шрифта изменить (увеличить), то и в них, естественно поедет. Дак а что Вы хотели?? Я сразу спрашивал - зачем такой изврат? Но Вам хотелось, и я представил пример. С парой-тройкой табличек проблема решается легко.

Alexxxander · 14.02.2007, 16:56

понятно, спасибо!

09.02.2007, 11:59	# 2
Псих ::VIP:: Guinness Liker Понаехало тут Регистрация: 26.01.2003 Адрес: В нейроне Пол: Male Сообщения: 2 848	Alexxxander, врядли. с таблицами можно, без врядли. сомниваюсь, что в css есть подобный элемент списка, чтобы его просто выставить (квадратик). А остальное, в общем-то реализуемо __________________ меня не вылечат

09.02.2007, 14:16	# 3
xroot ::VIP:: dr.Great Jah Регистрация: 29.08.2004 Адрес: £ U. c K. Пол: Male Сообщения: 1 127	Alexxxander, а сохранить страницу с css не пробовал? давай сюда код может че и придумаем? хотя я тек думаю на твоем примере без джава-скрипт не обошлось __________________ Каждый уважающий себя ёж хранит в норке фотоальбомчик с фотографиями голых жоп, которыми его пытались пугать. Последний раз редактировалось xroot; 09.02.2007 в 14:32.

09.02.2007, 14:41	# 4
Псих ::VIP:: Guinness Liker Понаехало тут Регистрация: 26.01.2003 Адрес: В нейроне Пол: Male Сообщения: 2 848	agRav, а причем тут js к верстке? __________________ меня не вылечат

09.02.2007, 14:57	# 5
xroot ::VIP:: dr.Great Jah Регистрация: 29.08.2004 Адрес: £ U. c K. Пол: Male Сообщения: 1 127	Псих, присмотрись к меню мне кажеться там и .js работает в связке динамик html так сказать ведь нет сомнения что дерево меню раскрываеться и закрываеться __________________ Каждый уважающий себя ёж хранит в норке фотоальбомчик с фотографиями голых жоп, которыми его пытались пугать. Последний раз редактировалось xroot; 09.02.2007 в 15:01.*

14.02.2007, 13:41	# 13
Hubbitus мод IMHO Кодер-200(6,7,8) Регистрация: 29.03.2003 Адрес: Saint-Petersburg, Russia Пол: Male Сообщения: 2 734	Если в любом другом браузере размер шрифта изменить (увеличить), то и в них, естественно поедет. Дак а что Вы хотели?? Я сразу спрашивал - зачем такой изврат? Но Вам хотелось, и я представил пример. С парой-тройкой табличек проблема решается легко. __________________ Я делаю Линукс! Присоединяйтесь к свободным людям! Связаться со мной всегда можно по джабберу: Hubbitus@jabber.ru Pahan-Hubbitus.

14.02.2007, 09:37	# 12
Alexxxander Newbie Регистрация: 27.10.2004 Сообщения: 19	Большое спасибо за пример! Но увы! В IE, кроме прочего, если поставить «Не учитывать размеры шрифтов...», верстка «поедет».

14.02.2007, 16:56	# 14
Alexxxander Newbie Регистрация: 27.10.2004 Сообщения: 19	понятно, спасибо!