Проблема верстки шапки и слайдеров

blackgeneral · September 4, 2015

Здравствуйте. Я начинающий верстальщик. Возникла проблемы такого характера:

1. Не знаю как сверстать меню в шапке (см. рисунок). Как я вижу логотип расположен посредине меню. Никогда раньше с таким не сталкивался. Решения пока не нашел.

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

Буду рад за любые соображения по этому поводу.

Great Rash · September 4, 2015

1. Сайт адаптивный, резиновый или фиксированный?

2. Возможно ли, что в меню будет больше 4-х ссылок?

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

blackgeneral · September 4, 2015

1. Сайт адаптивный, резиновый или фиксированный? 2. Возможно ли, что в меню будет больше 4-х ссылок?

Человек сам не знает т.к. полный ноль в этом. Я просто "подвернулся по руку" и в разговоре сказал, что могу бесплатно поэкспериментировать над сайтом ))

Я думаю, что выбирать придеться из фиксированного и резинового. Какой Вы посоветуете в этом случае?

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

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

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

Great Rash · September 4, 2015

Вообще, судя по картинке, тут резина не предусмотрена, так что фикс. В таком случае, я бы ленточке задал фиксированную высоту, а внутрь накидал бы ссылки вместе с логотипом. Лого и ссылки я бы сделал инлайн-блоками, и до кучи логотипу задал бы отрицательный отступ (position: relative; top: -Npx;). В таком случае логотип вылез бы за пределы ленты, но при этом раздвигал бы ссылки, которые его окружают. Ну а инлайн-блоки - потому что их по центру выравнивать проще простого.

Любой слайдер выводит контент, а не картинку. Контентом может быть всё, что угодно.

blackgeneral · September 6, 2015

Пока получилось так:

Уже пару часов не могу подвинуть меню на ее законное место.

<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;}

Любой слайдер выводит контент, а не картинку. Контентом может быть всё, что угодно.

Если честно, то думал только картинке. Как доберусь про слайдер, то если непонятно будет у Вас поинтересуюсь (если Вы не против).

Great Rash · September 7, 2015

http://codepen.io/GreatRash/pen/yYNYjE

blackgeneral · September 7, 2015

Спасибо! Идею Вашу понял, но воплотить ее в жизнь почему-то не хватает ума...

В конечном итоге код преобразовался так:

<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;  }

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

Great Rash · September 7, 2015

Ну по картинке трудно судить в чём именно у вас проблемы. На первый взгляд всё правильно. Попробуйте сверстать меню отдельно на том же сервисе, что и я (codepen или jsfiddle)

blackgeneral · September 7, 2015

Ну по картинке трудно судить в чём именно у вас проблемы. На первый взгляд всё правильно. Попробуйте сверстать меню отдельно на том же сервисе, что и я (codepen или jsfiddle)

А туда вставить стороннюю картинку можно? Чтобы более приближено к правде получилось? Я что-то ни там, ни там не нашел такой функции?

Edited September 7, 2015 by blackgeneral

Great Rash · September 8, 2015

Можно закинуть картинку на сторонний хостинг картинок и забрать оттуда ссылку. Только реальную ссылку из инспектора, а не ту, что выдаёт хостинг.

blackgeneral · September 8, 2015

Можно закинуть картинку на сторонний хостинг картинок и забрать оттуда ссылку. Только реальную ссылку из инспектора, а не ту, что выдаёт хостинг.

Спасибо, попробую.

Sign In

Проблема верстки шапки и слайдеров

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information