Автор Тема: Меню в блоке  (Прочитано 2661 раз)

02 Февраль, 2016, 14:24:42

Оффлайн loko

  • Школьник
  • *
  • Сообщений: 4
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 47.0.2526.73 Chrome 47.0.2526.73
    • Просмотр профиля
Только начинаю верстать. Помогите пожалуйста, создал div в CSS задал фон, в этом div создал меню. Но почему то получается следующее:

Нужно чтобы меню отображалось в блоке с фоном, а не ниже.

Форум вебмастеров - Webmasters.BY

Меню в блоке
« : 02 Февраль, 2016, 14:24:42 »

02 Февраль, 2016, 16:38:19
Ответ #1

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4928
  • Репутация: 112
  • Шииикарно!
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Firefox 44.0 Firefox 44.0
    • Просмотр профиля
так у вас там же какой-то текст над меню,  удалите его и меню должно подняться

02 Февраль, 2016, 19:18:24
Ответ #2

Оффлайн loko

  • Школьник
  • *
  • Сообщений: 4
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 47.0.2526.73 Chrome 47.0.2526.73
    • Просмотр профиля
Спасибо. Очередной вопрос: создаю div и в css задаю ему фон. В нем же создаю еще один div, в котором прописываю картинку (логотип), в CSS задаю отступ сверху 50px. Но почему то не только логотип получает отступ с верху но и родительский div.
<div class="header">
           <div class="logo">
              
                 <img src="img/logo.png" alt="ll"></img>
                
          </div>
      </div>

CSS:
.header {
   background: url(../img/skills.jpg) no-repeat top fixed;
   position: relative;
   width: 100%;
   position: relative;
   background-size: auto !100%;
    
}
.logo {
   text-align: center;
   Margin-top: 50px;
}
Как сделать что бы только логотип имел отступ с верху?

02 Февраль, 2016, 19:23:33
Ответ #3

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4928
  • Репутация: 112
  • Шииикарно!
  • OS: Windows NT 10.0 Windows NT 10.0
  • Browser: Firefox 43.0 Firefox 43.0
    • Просмотр профиля
вы проверьте какие правила задают отступ для родительского блока, ваш margin-top:50px для logo явно тут ни при чем

02 Февраль, 2016, 21:28:04
Ответ #4

Оффлайн loko

  • Школьник
  • *
  • Сообщений: 4
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 47.0.2526.73 Chrome 47.0.2526.73
    • Просмотр профиля
Не могу понять, когда убираю margin top из logo родительский блок возвращается на место.

02 Февраль, 2016, 21:30:09
Ответ #5

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4928
  • Репутация: 112
  • Шииикарно!
  • OS: Windows NT 10.0 Windows NT 10.0
  • Browser: Firefox 43.0 Firefox 43.0
    • Просмотр профиля
попробуйте удалить это
   position: relative;
   width: 100%;
   position: relative;

02 Февраль, 2016, 21:46:52
Ответ #6

Оффлайн loko

  • Школьник
  • *
  • Сообщений: 4
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 47.0.2526.73 Chrome 47.0.2526.73
    • Просмотр профиля
Все равно.
Попробовал вот так:
HTML
<div class="header">
           <div>              
                 <img src="img/logo.png" class="logo" alt="ll"></img>                
           </div>
      </div>
CSS
.header {
   background: url(../img/skills.jpg) no-repeat top fixed;
   background-size: auto !100%;
   
}
.logo {
   text-align: center;
   margin-top: 100px;
}
Отступ только в логотипа, но теперь он не становиться по середине.  :facepalm:

03 Февраль, 2016, 11:07:30
Ответ #7

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4928
  • Репутация: 112
  • Шииикарно!
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Firefox 44.0 Firefox 44.0
    • Просмотр профиля
так задайте text-align: center; для родительского блока логотипа

03 Февраль, 2016, 23:03:02
Ответ #8

Оффлайн WebCyber

  • Продвинутый юзер
  • ****
  • Сообщений: 306
  • Репутация: 1
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 47.0.2526.111 Chrome 47.0.2526.111
    • Просмотр профиля
Я тоже сталкивался с такой проблемой, это потом узнал что этот глюк называется "схлопывание" блоков, его можно решить задав внутренний отступ у родительского элемента. Задайте "padding:5px" у блока .header, должно помочь.
И там  у вас ошибка в css у блока .header написано "background-size: auto !100%;" - уберите восклицательный знак перед 100%(возможно из за этого и глючит).
« Последнее редактирование: 03 Февраль, 2016, 23:05:02 от WebCyber »