CSS - рецепты - Joomla 1.0: Шаблоны - Форум русской поддержки Joomla!

sc@r@bey

Захожу иногда
360
55 / 5
делай, а потом спрашивай что не получилось!

CSS - рецепты

« : 30.05.2009, 00:45:44 »

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

Центрирование меню, построенного на ul — li без фиксированной ширины
помогло выровнять по центру(горизонтали) mainmenu - верстка слоями

Ненужные отступы в списках

vertical-align:middle
помогло выровнять по центр mainmenu(верикали) - верстка слоями

Еще один способ вертикального выравнивания в CSS

Записан

sc@r@bey

Захожу иногда
360
55 / 5
делай, а потом спрашивай что не получилось!

при верстке дивами в div-ах есть проблема невозможно выровнять опубликованное меню посередине, приходится использовать различные padding-и и text-allign:center, что не всегда удобно, решил проблему так, причем это только в Joomla, в обычной верстке такого гемморроя нет:

Код


/*стили меню опускаю*/
div#mainmenu, div#menuwrapper { 
	position: relative; 
}
div#mainmenu { 
	float: right; 
	right: 50%; 
	width: auto; 
	color: #fff974;
}
div#menuwrapper { 
	float: none!important; 
	float: left; 
	right:  -50%; 
}

Код


        <div id="footer">
	<div id="mainmenu">
	<div id="menuwrapper">
		<?php mosLoadModules ( 'bottom' ); ?>
        </div>   
        </div> 
        </div>

и все ок, а еще нужно его выровнять посредине, ситуация с vertical-align: middle; не работает, а обойти это проще применительно к нашему коду, надо просто взять высоту нашего контейнера и поставить такойже размер отступа между строк

Код


	
line-height: 45px;
height: 45px;

и все будет ок(45 это в моем случае, в вашем поставьте нужное значение

)

итого:

Код


div#mainmenu, div#menuwrapper { 
	position: relative; 
}
div#mainmenu { 
	float: right; 
	right: 50%; 
	width: auto; 
	line-height: 45px;
	height: 45px;
	color: #fff974;
}
div#menuwrapper { 
	float: none!important; 
	float: left; 
	right:  -50%; 
}

Код


        <div id="footer">
		<div id="mainmenu">
		<div id="menuwrapper">
			<?php mosLoadModules ( 'bottom' ); ?>
        </div>   
        </div> 
        </div>