Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 26.02.2014, 13:31   #1
Dennis777
Форумчанин
 
Регистрация: 06.11.2009
Сообщений: 203
По умолчанию Опустить кнопки вниз хидера.

Наткнулся на один интересный шаблон.

Хидер идет первым слайдом на весь экран, по центру отображены кнопка:

Код:
.bordered-button{
   display:inline-block;
   text-align:center;
   padding:15px 45px;
   font-size:20px;
   font-weight:600;
   color:#fff;
   border:3px solid #fff;
   -webkit-transition:all 0.3s ease;
   -moz-transition:all 0.3s ease;
   -o-transition:all 0.3s ease;
   transition:all 0.3s ease;
}
Кнопка находится внутри хидера, вида:

Код:
<header role="banner" class="site-header parallax noise" gumby-parallax="0.1">
		<div class="row">
			<div class="twelve columns">
				<h1></h1>
				<h2 class="eleven columns centered"></h2>		
				<a href="#" class="skip bordered-button" gumby-goto="[data-target='signup']" gumby-duration="2000">КНОПКА 1</a>
				<a href="#" class="skip bordered-button" gumby-goto="[data-target='signup']" gumby-duration="2000">Кнопка 2</a>	
				<a href="#" class="skip bordered-button" gumby-goto="[data-target='signup']" gumby-duration="2000">Кнопка 3</a>		
			</div>
		</div>
	</header>
Если добавить

.bordered-button{position:absolute; bottom:10px;left:200px;}, то кнопка опускается в нижний левый угол, но в таком случае, если их 3 - они накладываются друг на друга с небольшим смещением. Как можно их раздвинуть между собой и разместить по центру в самом низу хидера?
Интересный проект по изучению английского:
Английский в формате путешествия по США

Последний раз редактировалось Dennis777; 27.02.2014 в 02:01.
Dennis777 вне форума Ответить с цитированием
Старый 27.02.2014, 01:59   #2
Dennis777
Форумчанин
 
Регистрация: 06.11.2009
Сообщений: 203
По умолчанию

Кнопка находится внутри хидера, вида:

Код:
<header role="banner" class="site-header parallax noise" gumby-parallax="0.1">
		<div class="row">
			<div class="twelve columns">
				<h1></h1>
				<h2 class="eleven columns centered"></h2>		
				<a href="#" class="skip bordered-button" gumby-goto="[data-target='signup']" gumby-duration="2000">КНОПКА 1</a>
				<a href="#" class="skip bordered-button" gumby-goto="[data-target='signup']" gumby-duration="2000">Кнопка 2</a>	
				<a href="#" class="skip bordered-button" gumby-goto="[data-target='signup']" gumby-duration="2000">Кнопка 3</a>		
			</div>
		</div>
	</header>
Если добавить

.bordered-button{position:absolute; bottom:10px;left:200px;}, то кнопка опускается в нижний левый угол, но в таком случае, если их 3 - они накладываются друг на друга с небольшим смещением. Как можно их раздвинуть между собой и разместить по центру в самом низу хидера?
Интересный проект по изучению английского:
Английский в формате путешествия по США
Dennis777 вне форума Ответить с цитированием
Старый 27.02.2014, 07:34   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

http://jsfiddle.net/Na1ve/qtUWB/
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Опустить web browser в самый низ matvey.tech C# (си шарп) 0 10.01.2012 01:36
Табличку не могу опустить вниз!!! Ksy HTML и CSS 2 06.05.2010 10:18
Опустить блок вниз Darkstar100 HTML и CSS 10 26.01.2010 03:07
Опустить див вниз с флоатом rewiaca HTML и CSS 12 22.01.2010 13:09
При старте страницы, опустить полосу прокрутку вниз _PROGRAMM_ JavaScript, Ajax 0 27.12.2009 18:45