z-index - HTML и CSS

lansh · 04.11.2012, 17:47

Код HTML:

<html>
   <head>
      <style>
      #aaa {
         position: relative;
         z-index: -1;
      }
      #bbb {
         position: relative;
         z-index: 1;
      }
      </style>
</head>
<body>
   <div id="aaa">aaa</div>
   <div id="bbb">bbb</div>
</body>
</html>

Почему z-index вообще не работает? как будто его и нет, каждый элемент с новой строки, а не друг на друге...

MyLastHit · 04.11.2012, 18:39

Потому что элементы div блочные и чтобы они были друг на друге им не достаточно задать только position. Еще нужно как минимум top и left.

lansh · 04.11.2012, 20:18

Понял. Благодарю!
Я только учусь, и по этому много вопрос возникает, если модераторы не будут против, я буду все писать в этой теме, что бы не создавать их много.

Есть блок div, определенной высоты. И есть вложенный ещё один в него блок div, более меньшей высоты чем его родитель. Как прижать этот вложенный блок к низу его родителя? bottom: 0; и vertical-align: bottom; не помогают..

MyLastHit · 04.11.2012, 20:49

vertical-align для инлайновых и инлайн-блочных элементов. А прижать так:

Код:

	<style type="text/css">
		.container{
			height: 300px;
			width: 300px;
			border: 1px dashed #ccc;
		}
		.child{
			height: 30px;
			width: 30px;
			background: orange;
			position: relative;
			top: 100%;
			left: 50%;
			margin-top: -30px;
			margin-left: -15px;
		}
	</style>
	<div class="container">
		<div class="child"></div>
	</div>

По центру снизу.

lansh · 12.11.2012, 21:07

Сверстал свой дизайн, из psd макета. С html, css, javascript.
Каким образом можно его оптимизировать для joomla? хотя для форума наверное вопрос слишком обширный, вряд ли кто то сможем расписать это. По этому подскажите наиболее краткую, точную, и понятную инфу по этому вопросу. Пробовал сам искать но везде либо какие то визуальные редакторы типо Artisteer, или объясняют вместе c языками верстки и js, или много воды ненужной понапишут..
Зарание спасибо!

MrJenika · 12.11.2012, 23:32

Цитата:

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

Сверстал свой дизайн, из psd макета. С html, css, javascript.
Каким образом можно его оптимизировать для joomla? .....

Для 1,5 создаете новую папку с названием шаблона в папке шаблона, не по русски конечно же, заливаете туда необходимые файлики, это index.php, template.xml, component.phpv папка для стилей, хотя и не столь важно.

Основной файл это index.php в нем в head необходимо вставить стандартный вызов шапки (можно посмотреть в стандартных шаблонах), затем в body вставляйте вашу вёрстку, ну и дополнительно в шапку можно подключить свой файлик со стилями (/templates/template-name/css/template.css) в который и необходимо поместить все стили.

Следующий шаг это вызвать на странице специальные вставки вывода модулей и компонента.
Допустим если необходимо вывести меню на сайте, то создаем в админке меню, задаем пункты к нему, создаем модуль для меню и публикуем его на сайте в любую позицию, пусть будет menu (это не принципиально).
Затем в меcте шаблона, где должно быть меню пишем:

Код:

<jdoc:include type="modules" name="menu" style="xhtml" />

В name пишем имя позиции, а не название модуля.

Дальше уже думаю вам проще будет посмотреть на готовые шаблоны которые идут вместе с джумлой, там ничего сложного нет.

Как-то так вроде.

lansh · 13.11.2012, 15:57

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

Код HTML:

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="js.js"></script>
		<title>Lekulya's studio</title>
	</head>
	<body>
		<div id="headerFon"></div>
		<div id="topContentFon"></div>
		<div id="bottomContentFon"></div>
		<div id="menuFon"></div>
		<div id="footer">
			<div id="footerImg"></div>
		</div>
		<div id="clipsPolosa"></div>
		<div id="clips">
			<div id="topClips"></div>
			<div id="middleClips"></div>
			<div id="bottomClips"></div>
		</div>
		<div id="fonRight"></div>
		
		<div id="left">
			<div id="header">
			</div>
			<div id="content">
                        [COLOR="Lime"] !!!!основной контент!!!![/COLOR]
			</div>
		</div>
		<div id="menu">
			<div id="catalog">
			</div>
		</div>
		<div id="lang">
			<div id="ru"></div>
			<div id="en"></div>
			<div id="ge"></div>
			<div id="fr"></div>
			<div id="it"></div>
		</div>
	</body>
</html>

Есть блок, основной контент, в нем на всех страницах будет размещенная какая либо информация. Только его мне нужно использовать в джумле. Всего на сайте 4 страницы. Одна новостная, два каталога, и одна просто текст. Все остальное я сделаю сам, менюшку, и т.д.
От джумлы требуется просто дать возможность через админку писать новости, и добавлять файлы в каталог, ну и конечно же выводить это все в блок основного контента на разных страницах.
Сам дизайн, такой http://lekulya.com/ , это он же и есть, я уже и хостинг с доменом взял зарание.
Я это все конечно могу и ручками написать, и знаю как, но тогда и безопасности ни какой не будет, да и на этой уйдет очень много времени, по этому хочется сделать на джумле, да и пользователю сайта будет проще управлять им..

lansh · 13.11.2012, 16:10

И ещё от джумлы нужно будет сделать смену языков, но я думаю что с этим проблем не будет, и это не относится к верстке..

04.11.2012, 17:47	#1
lansh Пользователь Регистрация: 30.10.2012 Сообщений: 21	z-index Код HTML: <html> <head> <style> #aaa { position: relative; z-index: -1; } #bbb { position: relative; z-index: 1; } </style> </head> <body> <div id="aaa">aaa</div> <div id="bbb">bbb</div> </body> </html> Почему z-index вообще не работает? как будто его и нет, каждый элемент с новой строки, а не друг на друге...

04.11.2012, 18:39	#2
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Потому что элементы div блочные и чтобы они были друг на друге им не достаточно задать только position. Еще нужно как минимум top и left. Ненавижу быть как все, но люблю, чтобы все были как я.

04.11.2012, 20:49	#4
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	vertical-align для инлайновых и инлайн-блочных элементов. А прижать так: Код: `<style type="text/css"> .container{ height: 300px; width: 300px; border: 1px dashed #ccc; } .child{ height: 30px; width: 30px; background: orange; position: relative; top: 100%; left: 50%; margin-top: -30px; margin-left: -15px; } </style> <div class="container"> <div class="child"></div> </div>` По центру снизу. Ненавижу быть как все, но люблю, чтобы все были как я.

13.11.2012, 15:57	#7
lansh Пользователь Регистрация: 30.10.2012 Сообщений: 21	попробовал, вообще не получается... хотя бы без всяких модуле, просто выдает ошибку что не видит шаблон.. вот сама страничка: Код HTML: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="js.js"></script> <title>Lekulya's studio</title> </head> <body> <div id="headerFon"></div> <div id="topContentFon"></div> <div id="bottomContentFon"></div> <div id="menuFon"></div> <div id="footer"> <div id="footerImg"></div> </div> <div id="clipsPolosa"></div> <div id="clips"> <div id="topClips"></div> <div id="middleClips"></div> <div id="bottomClips"></div> </div> <div id="fonRight"></div> <div id="left"> <div id="header"> </div> <div id="content"> [COLOR="Lime"] !!!!основной контент!!!![/COLOR] </div> </div> <div id="menu"> <div id="catalog"> </div> </div> <div id="lang"> <div id="ru"></div> <div id="en"></div> <div id="ge"></div> <div id="fr"></div> <div id="it"></div> </div> </body> </html> Есть блок, основной контент, в нем на всех страницах будет размещенная какая либо информация. Только его мне нужно использовать в джумле. Всего на сайте 4 страницы. Одна новостная, два каталога, и одна просто текст. Все остальное я сделаю сам, менюшку, и т.д. От джумлы требуется просто дать возможность через админку писать новости, и добавлять файлы в каталог, ну и конечно же выводить это все в блок основного контента на разных страницах. Сам дизайн, такой http://lekulya.com/ , это он же и есть, я уже и хостинг с доменом взял зарание. Я это все конечно могу и ручками написать, и знаю как, но тогда и безопасности ни какой не будет, да и на этой уйдет очень много времени, по этому хочется сделать на джумле, да и пользователю сайта будет проще управлять им..

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
XML INDEX	Gregor	SQL, базы данных	0	02.06.2012 10:52
Index.php	Holyman	WordPress и другие CMS	3	05.04.2012 19:30
index.php	77777777	PHP	4	28.03.2012 15:49
<index></index>	DrStrangeLove	HTML и CSS	1	08.10.2010 21:38

04.11.2012, 20:18	#3
lansh Пользователь Регистрация: 30.10.2012 Сообщений: 21	Понял. Благодарю! Я только учусь, и по этому много вопрос возникает, если модераторы не будут против, я буду все писать в этой теме, что бы не создавать их много. Есть блок div, определенной высоты. И есть вложенный ещё один в него блок div, более меньшей высоты чем его родитель. Как прижать этот вложенный блок к низу его родителя? bottom: 0; и vertical-align: bottom; не помогают..

12.11.2012, 21:07	#5
lansh Пользователь Регистрация: 30.10.2012 Сообщений: 21	Сверстал свой дизайн, из psd макета. С html, css, javascript. Каким образом можно его оптимизировать для joomla? хотя для форума наверное вопрос слишком обширный, вряд ли кто то сможем расписать это. По этому подскажите наиболее краткую, точную, и понятную инфу по этому вопросу. Пробовал сам искать но везде либо какие то визуальные редакторы типо Artisteer, или объясняют вместе c языками верстки и js, или много воды ненужной понапишут.. Зарание спасибо!

13.11.2012, 16:10	#8
lansh Пользователь Регистрация: 30.10.2012 Сообщений: 21	И ещё от джумлы нужно будет сделать смену языков, но я думаю что с этим проблем не будет, и это не относится к верстке..