Верстка шапки и слайдеров :: Web-программирование :: Компьютерный форум Ru.Board
Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?
Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Верстка шапки и слайдеров

Модерирует : Cheery

 Версия для печати • Подписаться • Добавить в закладки

Открыть новую тему     Написать ответ в эту тему

General



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте. Возникла проблемы такого характера:
 
1. Не знаю как сверстать меню в шапке (см. рисунок). Как я вижу логотип расположен посредине меню. Никогда раньше с таким не сталкивался. Решения пока не нашел.
 
2.Возможно ли создание подобный слайдеров? С такими тоже раньше не встречался. Кроме того, даже не представляю, как такое потом реализовывать (к примеру на том же wordpress).
 
Буду рад за любые соображения по этому поводу.
 
Всего записей: 145 | Зарегистр. 06-01-2006 | Отправлено: 14:14 04-09-2015
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
General

Цитата:
Никогда раньше с таким не сталкивался. Решения пока не нашел.

в чем сложность то? делаете два меню.  
либо увеличиваете margin/padding между элементами посередине.
 

Цитата:
Возможно ли создание подобный слайдеров? С такими тоже раньше не встречался. Кроме того, даже не представляю, как такое потом реализовывать (к примеру на том же wordpress).

возможно многое. но тут вы не понимаете даже сути того, за что пытаетесь взяться. wordpress тут не при чем - сделайте с помощью html/js/css, а потом уже интегрируйте в wordpress. если же ищете что то готовое для WP, то вам сюда - WordPress [?]
Всего записей: 16213 | Зарегистр. 20-09-2014 | Отправлено: 20:17 04-09-2015 | Исправлено: Mavrikii, 21:22 04-09-2015
General



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
в чем сложность то? делаете два меню.  
либо увеличиваете margin/padding между элементами посередине.  

Возможно для Вас это сложности и не представляет. Для меня, как для начинающего не все так просто. Поэтому я пытаюсь разобраться. Вы имеете ввиду что нужно "раздвинуть" центр и туда  поставить логотип? Но На сколько я понимаю если высоту блока (меню+ логотип) задать соизмеримо с размером логотипа, то этот блок "закроет" контакты  
 

 

Цитата:
возможно многое. но тут вы не понимаете даже сути того, за что пытаетесь взяться. wordpress тут не при чем - сделайте с помощью html/js/css, а потом уже интегрируйте в wordpress.

 
Суть я понимаю, про wordpress сказал как бы в дополнение т.к. работал в основном с ним.  Стандартные слайдеры  вставить не проблема, а здесь в одной картинке 4 кликабельных картинки.  
Приходит на ум только применение <map> + <area> . Это что касается второго слайдера. По первому я вообще не знаю как  туда сразу впихать картинку +текст +кнопку.
 

Цитата:
если же ищете что то готовое для WP, то вам сюда - WordPress

 
Спасибо за ссылку. Позже обязательно гляну. Сейчас же у меня задача разобраться с версткой. Работа с темами wordpress после верстки это уже второй этап.
Всего записей: 145 | Зарегистр. 06-01-2006 | Отправлено: 21:23 04-09-2015 | Исправлено: General, 21:25 04-09-2015
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
General

Цитата:
 Вы имеете ввиду что нужно "раздвинуть" центр и туда  поставить логотип? Но На сколько я понимаю если высоту блока (меню+ логотип) задать соизмеримо с размером логотипа, то этот блок "закроет" контакты

что такое z-index знаете? вам ничто не мешает размещать какие то блоки выше, какие то ниже. поэтому меню вы можете расположить над логотипом (его можно вообще в качестве фона div элемента вставить), нужно просто раздвинуть элементы, чтобы не перекрывали лого.
 

Цитата:
Приходит на ум только применение <map> + <area>  

аналогично, поверх картинки вы можете выводить и другие элементы, как вам будет удобнее. про map и area вообще лучше забыть, только если какие то сложные конфигурации областей.
Всего записей: 16213 | Зарегистр. 20-09-2014 | Отправлено: 21:26 04-09-2015
Pumych



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Поместите элемент лого в нутрь враппера меню, сделайте его абсолютно позиционированным в центре с отрицательным margin на половину ширины лого.
В самом меню сделайте пустой элемент на нужную ширину. Это как вариант. Может у кого-то будет более элегантное решение.
 
.logo{
  display: block;
  width: 250px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -125px;
  z-index: 3;
}
 
По поводу wordpress, я бы сделал для начала статический HTML и CSS, а потом бы уже думал о том как имплементировать это в CMS
Всего записей: 86 | Зарегистр. 10-05-2005 | Отправлено: 01:08 05-09-2015
General



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Пока получилось так:
 

 
Несколько часов уже не могу сдвинуть  пункты меню на их законное место. Если меню сдвигается, то только вместе с полосой и логотопом. Не догоняю почему.
 

Код:
<body>
<div class="main">
<div class="header">
<div class="cont">
<div><p>контакты</p> </div>
<div class="menu-wrapper">
<ul class="menu">
<li><a href="#" class="active">Главная</a></li>
<li><a href="#">Подбор тура</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul>
<div class="logo"> <a href="/"> <img src="images/logo.png" class="logo" alt="Логотип компании" /> </a> </div>
 
</div>
</div>  
</div>
</div>
</body>

 

Код:
*{
    padding:0; margin: 0;
}
html {
    background:#EFEFEF url(images/header.jpg) center top no-repeat;  
}
 
body { font-family:Arial, Helvetica, sans-serif; line-height:1.3;
}
 
.main{
    width:1600px; margin:0 auto;
}
 
.menu-wrapper {
background:url(images/menu.png) center top no-repeat;
 
}
 
.menu ul {
list-style: none; /*убираем маркеры списка*/
}
.menu li { display: inline; /* Отображать как строчный элемент */
}
 
.menu a {
text-decoration:none; /*убираем подчеркивание текста ссылок*/
}
 
img {border: none;
}
 
 
.logo{
  position: relative; top: 5px;
}  
    
    
Всего записей: 145 | Зарегистр. 06-01-2006 | Отправлено: 11:49 06-09-2015
General



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Поместите элемент лого в нутрь враппера меню, сделайте его абсолютно позиционированным в центре с отрицательным margin на половину ширины лого.
В самом меню сделайте пустой элемент на нужную ширину. Это как вариант. Может у кого-то будет более элегантное решение.  

 
Попробовал сделать по Вашему совету.
Получилось так:
 

 
Код следующий:

Код:
<body>
<div class="main">
<div class="header">
<div class="cont">
<p>контакты</p> </div>
<div class="menu-wrapper">
<div class="menu">
<ul>
<li><a href="#" class="active">Главная</a></li>
<li><a href="#">Подбор тура</a></li>
<li class="logo"></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul> </div>
</div>
</div>
</div>
</body>

 

Код:
*{
    padding:0; margin: 0;
}
html {
    background:#EFEFEF url(images/header.jpg) center top no-repeat;  
}
 
body { font-family:Arial, Helvetica, sans-serif; line-height:1.3;
}
 
img {border: none;
}
 
.main{
    width:1600px; margin:0 auto;
}
 
.menu-wrapper {
background:url(images/menu.png) center top no-repeat;
 
}
 
.menu {
width:100%;
height:30px;
margin: 35px auto; /* (100px-30px)/2 = 35px */
background:url(images/menu.png) center top no-repeat;
}
 
.menu ul {
list-style: none;
margin:0;
padding:0;
font-size:0;
text-align:center; /*убираем маркеры списка*/
}
 
.menu li {
display:inline-block; /* Отображать как строчный элемент */
vertical-align:middle;
margin: -35px 10px 0; /* (100px-30px)/2 = 35px */
font-size: 14 px;
line-height: 30 px;  
}
 
.menu a {
text-decoration:none; /*убираем подчеркивание текста ссылок*/
}
 
 
 
 
.logo{
  width: 100px;
  height:100px;
  background:url(images/logo.png) center top no-repeat;  
}  
    
    

 
 
Что не так не могу понять.
Всего записей: 145 | Зарегистр. 06-01-2006 | Отправлено: 20:42 07-09-2015
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
General
навскидку, не самый лучший вариант решения, просто для идеи
http://jsfiddle.net/428bbrqx/
Всего записей: 16213 | Зарегистр. 20-09-2014 | Отправлено: 03:43 09-09-2015
General



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
General
навскидку, не самый лучший вариант решения, просто для идеи
http://jsfiddle.net/428bbrqx/
 

Спасибо за идею. Есть один минус: логотип в этом случае не кликабелен будет.
Всего записей: 145 | Зарегистр. 06-01-2006 | Отправлено: 19:26 09-09-2015
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
General

Цитата:
Есть один минус: логотип в этом случае не кликабелен будет.

нет никакой проблемы сделать его кликабельным - "натянуть" пустую ссылку поверх
с позиционированием и z индексом можно отображать как хочется.
Всего записей: 16213 | Зарегистр. 20-09-2014 | Отправлено: 19:36 09-09-2015 | Исправлено: Mavrikii, 21:13 09-09-2015
General



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
нет никакой проблемы сделать его кликабельным - "натянуть" пустую ссылку поверх
с позиционированием и z индексом можно отобрать как хочется.
Спасибо, буду пробовать.
Всего записей: 145 | Зарегистр. 06-01-2006 | Отправлено: 21:04 09-09-2015
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Верстка шапки и слайдеров


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru